Jetpack compose初尝试

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()
}

 显示效果