如何在android jetpack compose中更改TabLayout的位置?

k7fdbhmy  于 2023-06-28  发布在  Android
关注(0)|答案(1)|浏览(176)

所以,我在TopAppBar下面的Tablayout中设置了我的标签,但我希望这些标签位于屏幕的左侧,而不是顶部。我甚至试着改变对齐。开始,但没有任何变化。下面是我的代码

@ExperimentalPagerApi
@Composable
fun TableLayout(){

    var tabIndex by remember {
        mutableStateOf(0)
    }

    val tabs = listOf<String>("Basic","Medium","Hard")

    Column(modifier = Modifier.fillMaxHeight()) {
        TabRow(selectedTabIndex = tabIndex,
        modifier = Modifier.align(androidx.compose.ui.Alignment.Start)) {
            tabs.forEachIndexed{ index,title ->
                Tab(text = { Text(title) },
                    selected = tabIndex == index,
                    onClick = { tabIndex = index }
                )
            }
        }
        
    }

}


正如你所看到的图像一个在另一个下面。因此,而不是我想要的标签页布局的标签,而不是那些图像之下的其他一个。

lnxxn5zx

lnxxn5zx1#

尝试在TabRow中使用horizontalArrangement而不是在其修饰符中使用align来水平排列其内容。
编辑:有关对齐与排列https://semicolonspace.com/jetpack-compose-alignment-arrangement/
编辑:这段代码将把它们一个放在另一个上面,垂直排列,而不是你现在的水平布局。(如果这是你正在寻找的)。否则,请更详细地指定所需的布局。

Column(modifier = Modifier.fillMaxHeight()) {
        TabRow(
            selectedTabIndex = tabIndex.value,
            modifier = Modifier.align(androidx.compose.ui.Alignment.Start,
            )
        ) {
            Column() {
                tabs.forEachIndexed{ index,title ->
                    Tab(text = { Text(title) },
                        selected = tabIndex.value == index,
                        onClick = { tabIndex.value = index }
                    )
                }
            }

        }

    }

相关问题