Compose_18--顶部Tab导航

最新推荐文章于 2025-04-16 09:33:39 发布

放弃了放弃

最新推荐文章于 2025-04-16 09:33:39 发布

阅读量1.8k

点赞数

分类专栏： Android-compose 文章标签： android

本文链接：https://blog.youkuaiyun.com/weixin_42404361/article/details/122146437

版权

本文介绍了如何在Android的Jetpack Compose中创建顶部Tab导航，通过示例详细讲解了从基本TabRow的使用到自定义Tab指示器长度的过程，包括定义枚举类、Tab内容、Tab导航组合函数的实现，以及如何通过扩展Modifier来调整指示器长度至Tab宽度的一半。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、认识TabRow

实现顶部Tab导航需要用到TabRow，所以让我们先来认识下TabRow

@Composable
fun TabRow(
    selectedTabIndex: Int, // 当前项
    modifier: Modifier = Modifier,  // 修饰符
    backgroundColor: Color = MaterialTheme.colors.primarySurface,  // 背景颜色
    contentColor: Color = contentColorFor(backgroundColor),  // 内容颜色
    // 指示器
    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
        TabRowDefaults.Indicator(
            Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
        )
    },
    // 分割线
    divider: @Composable () -> Unit = @Composable {
        TabRowDefaults.Divider()
    },
    tabs: @Composable () -> Unit // tabs内容
)

二、写一个简单例子

1.定义一个枚举类

/**
 * 枚举类
 */
enum class TabBean(@StringRes val titleResId: Int) {
    Tab_1(R.string.tab_1),
    Tab_2(R.string.tab_2),
    Tab_3(R.string.tab_3),
}

2.定义Tab内容类

/**
 * Tab内容类
 */
class TabContent(val tab: TabBean, val content: @Composable () -> Unit)

3.定义Tab导航可组合函数

@Composable
fun compose_18() {
    // tab1内容
    val tab1 = TabContent(TabBean.Tab_1) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Tab_1")
        }
    }

    // tab2内容
    val tab2 = TabContent(TabBean.Tab_2) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Tab_2")
        }
    }

最低0.47元/天解锁文章