2021/07/29 Jetpack compose1.0正式发布,已经可以在生产环境中使用了。
下面的内容为根据官方教程尝试的总结,上手没难度,而且也不需要配置什么环境。
Android 开发者 | Android Developers (google.cn)
Jetpack Compose是用于构建原生Android界面的工具包。不需要xml布局,也不需要创建界面微件,只需要调用Jetpack Compose函数(使用@Composable注解的函数)即可。
步骤:
1. 下载Android Studio Arctic Fox | 2020.3.1(否则创建不了compose工程)
2. File - New - New Project - Empty Compose Activity
3. 编写代码
代码示码
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { // 调用@Composable注解的函数 Study() } } } @Composable fun Study() { // 设置主题 MaterialTheme { val typography = MaterialTheme.typography // Column:垂直堆叠元素 Column( // 配置布局,上下左右设置16dp空隙 modifier = Modifier.padding(16.dp) ) { // 创建图片 Image( painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = null, // 配置图片 modifier = Modifier // 高度 .height(180.dp) // 宽度,填充布局 .fillMaxWidth() // 圆角,Material Design .clip(shape = RoundedCornerShape(4.dp)), // 图片填充Column的整个宽度,并根据需要裁剪为适当的高度 contentScale = ContentScale.Crop ) // 添加16dp高的空隙 Spacer(Modifier.height(16.dp)) // 创建Textview显示文本 Text( "Study Android together Androidを勉強しましょう 一起学习Android吧 测试内容请忽略", // 配置主题中的特定的式样 style = typography.h6, // 设置文字显示的最多行数 maxLines = 2, // 不够显示的情况下,显示...,未设置情况下会被截断 overflow = TextOverflow.Ellipsis ) Text( "Kotlin", style = typography.body2 ) Text( "Jetpack compose", style = typography.body2 ) } } } // 添加@Preview注解的函数,才能在Android Studio中预览 // Android Studio中以@Preview为单位提供预览 // 如果有两个@Preview函数的话,会提供两个预览,内容并不会合并在一起 @Preview @Composable fun DefaultPreview() { Study() }
显示效果