前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >安卓软件开发:Jetpack Compose中常见的核心概念总结-2

安卓软件开发:Jetpack Compose中常见的核心概念总结-2

原创
作者头像
Nimyears
发布2024-10-31 08:54:17
发布2024-10-31 08:54:17
1060
举报

6. 文本和按钮

Text - 文本

代码语言:kotlin
复制
Text(
    text = "Hello Nim",
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold
)
  • fontSize: 设置文本字体大小。
  • fontWeight: 设置文本的粗细

Button - 按钮

代码语言:kotlin
复制
Button(
    onClick = { /* TODO*/ },
    modifier = Modifier.padding(8.dp)
) {
    Text("Click Nim")
}
  • Button: 创建一个可点击的按钮。
  • onClick: 点击时触发的事件。

7. Lazy 列表

LazyColumn - 懒加载列

代码语言:kotlin
复制
LazyColumn {
    items(100) { index ->
        Text("Item $index")
    }
}
  • LazyColumn: 一个只加载可见部分的垂直列表。

LazyRow - 懒加载行

代码语言:kotlin
复制
LazyRow {
    items(50) { index ->
        Text("Item $index")
    }
}
  • LazyRow: 一个只加载可见部分的水平列表。

8. Dialog 和 Alert

AlertDialog - 弹出框

代码语言:kotlin
复制
if (showDialog) {
    AlertDialog(
        onDismissRequest = { /* TODO */ },
        confirmButton = {
            TextButton(onClick = { /* Confirm action */ }) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(onClick = { /* Dismiss action */ }) {
                Text("Dismiss")
            }
        },
        title = { Text("Title") },
        text = { Text("This is an alert dialog") }
    )
}
  • AlertDialog: 创建一个带有确认和取消按钮的弹出框。

showDialog - 显示对话框的状态

代码语言:kotlin
复制
var showDialog by remember { mutableStateOf(false) }
Button(onClick = { showDialog = true }) {
    Text("Show Dialog")
}

9. 自定义组件

Custom Component - 自定义组件

代码语言:kotlin
复制
@Composable
fun CustomButton(
    text: String,
    onClick: () -> Unit
) {
    Button(onClick = onClick) {
        Text(text)
    }
}
  • Composable Function: 定义一个可组合的自定义组件。

Reusable Component - 可重用组件

代码语言:kotlin
复制
CustomButton("Click Nim") {
    // Define action
}
  • CustomButton: 通过传递参数实现组件的复用。

10. 约束布局(ConstraintLayout)

ConstraintLayout - 约束布局

代码语言:kotlin
复制
ConstraintLayout(
    modifier = Modifier.fillMaxSize()
) {
    val (button, text) = createRefs()

    Button(
        onClick = { /* Do something */ },
        modifier = Modifier.constrainAs(button) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top, margin = 16.dp)
        }
    ) {
        Text("Button")
    }

    Text(
        "This is a constrained text",
        modifier = Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
    )
}
  • createRefs: 创建引用来管理组件的约束关系。
  • constrainAs: 定义组件的约束关系,确定其在布局中的位置。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 6. 文本和按钮
    • Text - 文本
    • Button - 按钮
  • 7. Lazy 列表
    • LazyColumn - 懒加载列
    • LazyRow - 懒加载行
  • 8. Dialog 和 Alert
    • AlertDialog - 弹出框
    • showDialog - 显示对话框的状态
  • 9. 自定义组件
    • Custom Component - 自定义组件
    • Reusable Component - 可重用组件
  • 10. 约束布局(ConstraintLayout)
    • ConstraintLayout - 约束布局
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档