android compose Tab 标签页 使用

android compose Tab 标签页 使用标签页可让您整理相关内容组。标签页有两种类型主要标签页位于顶部应用栏下方的内容窗格顶部。 它们会显示主要内容目标并且仅在需要一组标签页时使用。次要标签页在内容区域内使用用于进一步分隔相关 内容并建立层次结构。当屏幕需要多个级别的标签页时它们是必需的。使用 Tab、PrimaryTabRow 和 SecondaryTabRow 可组合项 来实现标签页。Tab可组合项表示行中的单个标签页通常在PrimaryTabRow用于主要指示器标签页或SecondaryTabRow用于次要指示器标签页内使用。Tab包含以下关键参数selected确定当前标签页是否以视觉方式突出显示。onClick()一个必需的 lambda 函数用于定义用户点击标签页时要执行的操作。您通常在此处处理导航事件、更新所选标签页状态或加载相应内容。text在标签页内显示文本。可选。icon在标签页内显示图标。可选。enabled控制标签页是否已启用且可交互。如果设置为 false则标签页将显示为已停用状态并且不会响应点击。package com.wn.androidcomposedemo1.basegoogle import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.Person import androidx.compose.material.icons.filled.Settings import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.PrimaryTabRow import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Tab import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.style.TextOverflow import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme /** * Author : wn * Email : maoning20080808163.com * Date : 2026/6/28 19:36 * Description : 标签页 */ class TabActivity : ComponentActivity(){ override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { AndroidComposeDemo1Theme() { Surface( modifier Modifier.fillMaxSize(), color MaterialTheme.colorScheme.background ) { NavigationTabExample(modifier Modifier.fillMaxSize()) } } } } OptIn(ExperimentalMaterial3Api::class) Composable fun NavigationTabExample(modifier: Modifier){ val navController rememberNavController() val startDestination2 Destination2.HOME var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination2.ordinal) } Scaffold(modifier modifier) { contentPadding - PrimaryTabRow(selectedTabIndex selectedDestination, modifier Modifier.padding(contentPadding)) { Destination2.entries.forEachIndexed { index, destination2 - Tab( selected selectedDestination index, onClick { navController.navigate(route destination2.route) selectedDestination index }, icon { Icon(imageVector destination2.icon,contentDescription destination2.contentDescription,) }, text { Text( text destination2.label, maxLines 2, overflow TextOverflow.Ellipsis ) } ) } } AppNavHost(navController navController, startDestination2 startDestination2) } } Composable fun AppNavHost( navController: NavHostController, startDestination2: Destination2 ){ NavHost( navController navController, startDestination startDestination2.route ){ Destination2.entries.forEach { destination2 - composable(destination2.route){ when(destination2){ Destination2.HOME - Home2Screen() Destination2.PERSON - PersonScreen2() Destination2.SETTING - SettingScreen2() } } } } } Composable fun Home2Screen(){ Box(modifier Modifier.fillMaxSize(), contentAlignment Alignment.Center){ Text(首页2) } } Composable fun PersonScreen2(){ Box(modifier Modifier.fillMaxSize(), contentAlignment Alignment.Center){ Text(个人页面2) } } Composable fun SettingScreen2(){ Box(modifier Modifier.fillMaxSize(), contentAlignment Alignment.Center){ Text(设置页面2) } } } enum class Destination2( val route : String, val label : String, val icon : ImageVector, val contentDescription: String ){ HOME(home, 首页, Icons.Default.Home, 首页描述), PERSON(person, 个人, Icons.Default.Person, 个人描述), SETTING(setting, 设置, Icons.Default.Settings, 设置描述) }