在kotlin中TabRow设置每个按钮的导航路由
时间: 2024-10-13 14:03:08 浏览: 6
在Kotlin的Jetpack Compose中,`TabRow`通常用于展示一组选项卡,并通过点击切换内容。如果你想要为每个按钮设置导航路由,你可以这样做:
1. 首先,你需要导入必要的库:
```kt
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.text.Button
import androidx.compose.material.TabLayout
import androidx.compose.material.Text
import androidx.compose.material.TabRow
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.route.Router
import androidx.compose.ui.router.linkTo
```
2. 创建一个自定义Button组件,它接受一个`Route`作为参数:
```kt
@Composable
fun TabButton(text: String, route: Route) {
Button(onClick = { Router.current().linkTo(route) }) {
Text(text = text)
}
// 可选:添加一个占位符或图标等其他样式
}
```
3. 使用`TabRow`将这些按钮组合起来,并传递对应的路由:
```kt
@Composable
fun TabbedNavigation(
router: Router,
routes: List<Pair<String, Route>>,
) {
TabLayout的内容 {
TabRow(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
) {
for ((tabTitle, route) in routes) {
TabButton(tabTitle, route)
}
}
}
}
```
在这个例子中,`routes`是一个列表,其中包含键值对 `(tabTitle, route)`,`tabTitle`是你想显示的文字,`route`则是对应的导航路径。