Hi, I’m learning to use Compose and I’m trying to use Tab in a layout like this

class TabContent(val header: String, val icon: Int, val content: @Composable () -> Unit)

@Composable
fun BodyContent() {
    var index = 0
    val updateTab : (currentIndex: Int) -> Unit = { index = it }

    val tabs = listOf(
        TabContent(
            header = stringResource(id = R.string.depenses_tab_title).toUpperCase(
                Locale.getDefault()
            ),
            icon = R.drawable.ic_depenses
        ) { DepenseTabContent(Modifier) },
        TabContent(
            header = stringResource(id = R.string.equilibre_tab_title).toUpperCase(
                Locale.getDefault()
            ),
            icon = R.drawable.ic_equilibres
        ) { Text ( text= "blop") }
    )

    BodyContent(index, updateTab, tabs)
}

@Composable
fun BodyContent(
    selectedTabIndex: Int,
    updateTab: (Int) -> Unit,
    tabs: List<TabContent>,
    modifier: Modifier = Modifier
) {
    Column(modifier.fillMaxSize()) {
        TabRow(selectedTabIndex = selectedTabIndex) {
            tabs.forEachIndexed { index, tabContent ->
                Tab(
                    selected = selectedTabIndex == index,
                    onClick = { updateTab(index) },
                    text = { Text(text = tabContent.header) },
                    icon = {
                        Icon(
                            vectorResource(id = tabContent.icon),
                            Modifier.width(24.dp).height(24.dp)
                        )
                    }
                )
            }
        }
        Box {
            tabs[selectedTabIndex].content
        }
    }
}

My tab content is never displayed and I can’t refresh it by clicking in the tabRow. I don’t understand what I’v done wrong.

I think you should change the decleration of you index to:

var index = remember { mutableStateOf(0) }

it seems it doesn’t change anything

Can you please try to just show a Text() with the index instead of your content. Does this work?

yes it does display 0

Ah you just forget the ()

tabs[selectedTabIndex].content()

that’s it! thx. but when I click on the unselected tab, the screen is not refreshed

That should be because of your index decleration. it should be

var index by remember { mutableStateOf(0) }

@Ttop Hi. I'm using your code for tabs but some how dynamic contents are not drawing. and their compose function do not trigger at all;

tabs[selectedTabIndex].content

Do you have this issue?