android - Jetpack Compose 中的自定义 TabRow

Question

我使用 TabRow，我有两个问题:

• 是否可以删除一条宽度为整个屏幕宽度的线？

• 如何将按钮放在一起(减少它们之间的空间)

Answer 1

要删除选项卡下方的行，只需通过传递 divider = {} 设置一个空分隔线即可。

要使选项卡填充 TabRow 中的可用空间(因此没有空格)，只需对选项卡设置特定大小即可，以下示例有效如你所愿。

var state by remember { mutableStateOf(0) }
val titles = listOf("TAB 1", "TAB 2")
Column {
    TabRow(selectedTabIndex = state, divider = {}) {
        titles.forEachIndexed { index, title ->
            Tab(
                text = { Text(title) },
                selected = state == index,
                onClick = { state = index }
            )
        }
    }
}