Kotlin 使用Compose完成界面_kotlin compose

使用Compose完成页面UI

1，页面跳转使用NavHost
环境配置

    implementation "androidx.navigation:navigation-compose:2.4.1"

1
2

配置导航目录

  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)}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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)
                            )
                        }
                    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果图



项目地址gitee