android - 使用 Jetpack Compose 左对齐自定义选项卡

Question

我需要使用 Jetpack Compose 制作标签，看起来像水平按钮。标签应该左对齐，而不是居中。就像在图像中一样。选定的选项卡也不应显示下划线。

标签： androidandroid-jetpack-compose

Answer 1

Jetpack composeScaffold对于这种情况，这样的东西应该适合你

enum class Tab {
    Day,
    Week,
    Month,
}

@Composable
fun TestView(
) {
    var selectedTab by remember { mutableStateOf(Tab.Day) }
    Scaffold(topBar = {
        Row(Modifier.padding(5.dp)) {
            Tab.values().forEach { tab ->
                BottomBarButton(
                    tab.name,
                    selected = selectedTab == tab,
                    onSelect = {
                        selectedTab = tab
                    },
                )
            }
        }
    }) {
        when (selectedTab) {
            Tab.Day -> Text("$selectedTab content")
            Tab.Week -> Text("$selectedTab content")
            Tab.Month -> Text("$selectedTab content")
        }
    }
}

@Composable
fun BottomBarButton(
    text: String,
    selected: Boolean,
    onSelect: () -> Unit
) {
    Text(
        text,
        modifier = Modifier
            .background(
                if (selected)
                    Color.Green
                else
                    Color.Transparent
            )
            .clickable(onClick = onSelect)
            .padding(10.dp)
    )
}

如果您需要底栏，只需替换topBar = {为bottomBar = {

查看更多关于脚手架的信息