Compose学习记录(1)

news2025/2/7 2:32:03

Compose学习记录(1)

简易使用HelloWorld。
新建一个工程，它已经默认启用了compose特性。MainActivity继承自 ComponentActivity，可以用compose来编写UI界面。

    // sample 1: simple Version
    setContent {
        Text("Hello World.")
    }

一个函数，添加@Composable,就形成一个Compose对象
Compose函数可以调用另一个Compose函数，也可以调用普通函数。普通函数不能调用Compose函数。有点类似suspend函数。

    // sample 2:
    setContent {
        MessageCard("Hello Compose.")
    }
    @Composable
    fun MessageCard(name: String) {
        Text(text = "Hello $name!")
    }

点击事件弹出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")
    }

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)

创建行和列，类似于原 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")
            }
        }
    }
}