如何使用 jetpack compose 设置选项卡的初始启动屏幕答案

【问题标题】：How to set the initial start screen for a tab with jetpack compose如何使用 jetpack compose 设置选项卡的初始启动屏幕
【发布时间】：2022-08-07 20:07:15
【问题描述】：

现在，开始屏幕是\"相机屏幕\"（在索引 0 处）

我想将开始屏幕设置为 \"聊天画面\" （即索引 1 而不是 0）

即：当用户打开应用程序时，\"聊天画面\" 是活动屏幕，而不是\"相机屏幕\"-- 就像在 WhatsApp 上一样

private val tabs = listOf(
TabItem.Camera,
TabItem.Chat,
TabItem.Status,
TabItem.Call
)

@Composable
fun TabLayout(
modifier: Modifier = Modifier,
tabs: List<TabItem>,
selectedIndex: Int = 1,
onPageSelected: ((tabItem: TabItem) -> Unit)
) {

TabRow(
    selectedTabIndex = selectedIndex,
    divider = { }
) {

    tabs.forEachIndexed{index, tabItem ->

        Tab(
            selected = index == selectedIndex,
            modifier = modifier.background(MaterialTheme.colors.primary),
            onClick = {
            onPageSelected(tabItem)
        },

            text =
            {
                if (tabItem == TabItem.Camera) {
                    Icon(painter = painterResource(id = R.drawable.ic_camera), stringResource(id = R.string.icon)).toString()
                }

                else {
                    Text(
                        text = stringResource(id = tabItem.title).uppercase(Locale.ROOT),
                        style = MaterialTheme.typography.caption,
                    )
                }

            },
        )
    }
  }
}

用法

val pagerState = rememberPagerState()

 //tab layout
TabLayout(tabs = tabs, selectedIndex = pagerState.currentPage ,
    onPageSelected = { tabItem->
        coroutineScope.launch {
            pagerState.animateScrollToPage(tabItem.index)
        }
    })

如果您转到另一个选项卡，所选选项卡（选项卡下的行）是否会更改？
是的，它改变了
您传递寻呼机当前页面。你检查它是否是1？
它从 0 @Marat 开始

标签： android kotlin tabs android-jetpack-compose

【解决方案1】：

您需要将传递给 TabRow 的 selectedIndex 变量初始化为 1。

【讨论】：

你好。我这样做了。相机屏幕仍然是第一个选定的屏幕，而不是“聊天”选项卡。检查编辑的问题
你能发布你是如何调用TabLayout 可组合的吗？
我已更新问题以包含该问题。
嗨@Jacob，我还没有找到解决这个问题的方法

【解决方案2】：

您可以尝试对选定选项卡使用状态：

@Composable
fun TabLayout(
modifier: Modifier = Modifier,
tabs: List<TabItem>,
selectedIndex: Int = 1,
onPageSelected: ((tabItem: TabItem) -> Unit)
) {
 var tabIndex by remember { mutableStateOf(selectedIndex) }

TabRow(
  selectedTabIndex = tabIndex,
  divider = { }
 ) {

tabs.forEachIndexed{index, tabItem ->

    Tab(
        selected = index == tabIndex,
        modifier = modifier.background(MaterialTheme.colors.primary),
        onClick = {
          tabIndex = index
          onPageSelected(tabItem)
        },

【讨论】：

遗憾的是，没有奏效。这样，选项卡下的行就不会移动。它只是停留在第一个“相机屏幕”中
嗨@Marat，我还没有找到解决这个问题.. :(

【解决方案3】：

所以，这很容易。

我所要做的就是覆盖默认的初始状态寻呼机状态

val pagerState = rememberPagerState(initialPage = 1)

【讨论】：

由于您将 pagerState.currentPage 传递给您的 tabLayout，因此 currentPage 值将控制您最初看到的选项卡

【解决方案4】：

替换 Modifier.pagerTabIndicatorOffset(pagerState, tabPositions) 到 Modifier.tabIndicatorOffset(tabPositions[tabIndex])

见https://androidx.tech/artifacts/compose.material3/material3/1.0.0-alpha08-source/androidx/compose/material3/TabRow.kt.html

【讨论】：