使用 Jetpack Compose 左对齐自定义选项卡答案

【问题标题】：Left aligned custom tabs with Jetpack Compose使用 Jetpack Compose 左对齐自定义选项卡
【发布时间】：2022-03-13 16:37:56
【问题描述】：

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

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

Jetpack compose 在这种情况下有 Scaffold，这样的东西应该适合你

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 = {

查看更多关于Scaffold

【讨论】：

谢谢。就我而言，我根本不需要脚手架。行就够了。另外我想我会添加 LazyList，这样可以滚动项目以防它们太多。

【解决方案2】：

这个怎么样？

ScrollableTabRow(
            selectedTabIndex = pagerState.currentPage,
            backgroundColor = colorResource(id = R.color.white),
            divider = { TabRowDefaults.Divider(color = colorResource(id = R.color.transparent)) },
            edgePadding = 0.dp
        ) {
            //draw your tab
        }

【讨论】：

【解决方案3】：

试试这个

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun RecentTabs(tabs: List<CustomTabs>, onSelectedTab: (CustomTabs) -> Unit) {
    var selectedTab by remember { mutableStateOf("") }
    @Composable
    fun RecentTabItem(text: String, selectedColor: Color = Color.Green, onSelect: () -> Unit) {
        val selected = text == selectedTab
        Text(
            text,
            modifier = Modifier
                .clip(CircleShape)
                .background(
                    if (selected)
                        selectedColor
                    else
                        Color.Transparent
                )
                .clickable(
                    onClick = {
                        selectedTab = text
                        onSelect.invoke()
                    }
                )
                .padding(vertical = 8.dp, horizontal = 18.dp)
        )
    }
    Row(
        Modifier
            .scrollable(rememberScrollState(), orientation = Orientation.Horizontal)
            .padding(horizontal = 5.dp, vertical = 8.dp)) {
        tabs.forEach {
            RecentTabItem(text = it.name, selectedColor = it.color.toColor(Color.Magenta)) { onSelectedTab.invoke(it) }
            Spacer(modifier = Modifier.width(5.dp))
        }
    }
}

用法：

            RecentTabs(tabs = listOf(
                CustomeTabs(1,"Tab1", color = Color.Blue.toString()),
                CustomeTabs(2,"Tab2", color = Color.Gray.toString()),
                CustomeTabs(3,"Tab3", color = Color.Red.toString())
            ), onSelectedTab = {
                Log.d(TAG, "RecentScreen() called ${it.toString()}")
            })

【讨论】：