使用Compose完成页面UI
1,页面跳转使用NavHost
环境配置
implementation "androidx.navigation:navigation-compose:2.4.1"
配置导航目录
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
Navigator()
}
}
}
/**
* 页面导航
*
* startDestination = "LoginPage"
*
*/
@Composable
fun Navigator() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "LoginPage") {
composable("LoginPage") { LoginPage(navController) }
composable("HomePage") { HomePage(navController) }
composable("ListPage"){ ListPage(navController)}
}
}
2,列表实现
LazyColumn(
contentPadding = PaddingValues(horizontal = 16.dp, vertical =20.dp),
){
// Add a single item
item {//添加一个
Text(text = "First item")
}
// Add 5 items
// 添加多个
items(5) { index ->
Text(text = "Item: $index",
modifier = Modifier.fillMaxWidth().padding(top = 20.dp)
)
}
// Add another single item
item {
Text(text = "Last item",
modifier = Modifier.fillMaxWidth().padding(top = 20.dp)
)
}
}
效果图
项目地址gitee