0
点赞
收藏
分享

微信扫一扫

vscode 的 AI 协助插件 Tabnine / Codeium

曾宝月 2024-05-27 阅读 5

Compose学习记录(1)

  1. 简易使用HelloWorld。
    新建一个工程,它已经默认启用了compose特性。MainActivity继承自 ComponentActivity,可以用compose来编写UI界面。
    // sample 1: simple Version
    setContent {
        Text("Hello World.")
    }
  1. 一个函数,添加@Composable,就形成一个Compose对象
    Compose函数可以调用另一个Compose函数,也可以调用普通函数。普通函数不能调用Compose函数。有点类似suspend函数。
    // sample 2:
    setContent {
        MessageCard("Hello Compose.")
    }
    @Composable
    fun MessageCard(name: String) {
        Text(text = "Hello $name!")
    }
  1. 点击事件弹出Toast
    // sample 3
    @Composable
    fun NamePickerItem(name: String, onClick: (String) -> Unit) {
        Text(name, Modifier.clickable(onClick = { onClick(name) }))
    }
    fun toast(context: Context, msg:String) {
        Toast.makeText(context, msg, Toast.LENGTH_LONG).show()
    }
    // 使用,在Compose函数中可以获取当前Context
    val ctx = LocalContext.current
    NamePickerItem("Start Travel") {
        toast(ctx, "You click: $it")
    }

  1. Modifier修饰符
    修饰符会指示界面元素如何在其父布局中放置、显示或表现。
    可以通过Modifier修饰符更改可组合项的大小、布局、外观。
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "A",
        modifier = Modifier
            .size(50.dp)
            .clip(CircleShape)
            .border(width = 2.dp, Color.Red, CircleShape)
    )

添加padding: modifier.padding(24.dp)

  1. 创建行和列,类似于原 LinearLayout
    Compose 中的三个基本标准布局元素是 Column、Row 和 Box 可组合项。
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val ctx = LocalContext.current
    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello")
                Text(text = name)
            }
            ElevatedButton(onClick = { toast(ctx, "You Click $name") }) {
                Text("Show Me")
            }
        }
    }
}
  • Modifier.weight()配置该结点会具有弹性,会尽量占满空间。
  • Modifier.fillMaxWidth() 配置该结点的宽度占满空间。

效果:
在这里插入图片描述

参考资料: 谷歌Jetpack Compose 基础知识
https://developer.android.google.cn/codelabs/jetpack-compose-basics?hl=zh-cn#0

举报

相关推荐

0 条评论