Android中Compose常用组件及布局使用方法示例详解

text(
    text = "hello compose", // 必填，显示文本
    color = color.blue,      // 文字颜色
    fontsize = 24.sp,        // 字体大小（注意使用.sp单位）
    fontstyle = fontstyle.italic, // 字体样式（斜体）
    fontweight = fontweight.bold, // 字体粗细
    modifier = modifier
        .padding(16.dp)     // 内边距
        .background(color.lightgray) // 背景色
)

[浅灰色背景]
  hello compose（蓝色，24sp，粗体，斜体）

val context = localcontext.current
button(
    onclick = { // 必填，点击回调
        toast.maketext(context, "clicked!", toast.length_short).show()
    },
    colors = buttondefaults.buttoncolors(
        backgroundcolor = color.red, // 按钮背景
        contentcolor = color.white   // 内容颜色
    ),
    modifier = modifier.padding(8.dp),
    enabled = true // 是否启用
) {
    icon( // 图标
        imagevector = icons.filled.favorite,
        contentdescription = "like"
    )
    spacer(modifier.width(8.dp)) // 间距
    text("like") // 按钮文字
}

[红色按钮] ♥ like（白色文字）
点击后弹出toast

var text by remember { mutablestateof("") } // 关键：状态管理
textfield(
    value = text, // 当前值（绑定状态）
    onvaluechange = { newtext -> // 输入变化回调
        text = newtext 
    },
    label = { text("username") }, // 浮动标签
    placeholder = { text("enter your name") }, // 提示文字
    leadingicon = { // 前缀图标
        icon(icons.filled.person, null) 
    },
    keyboardoptions = keyboardoptions(
        keyboardtype = keyboardtype.text, // 键盘类型
        imeaction = imeaction.done        // 键盘动作
    ),
    modifier = modifier.fillmaxwidth()
)

// 加载本地资源
image(
    painter = painterresource(r.drawable.dog),
    contentdescription = "cute dog", // 必填（无障碍）
    modifier = modifier
        .size(120.dp)
        .clip(circleshape), // 圆形裁剪
    contentscale = contentscale.crop // 裁剪模式
)
// 加载网络图片（coil）
asyncimage(
    model = "https://example.com/image.jpg",
    contentdescription = "network image",
    placeholder = { // 加载中显示
        circularprogressindicator()
    },
    error = { // 错误显示
        icon(icons.filled.error, null)
    }
)

// 圆形进度条
circularprogressindicator(
    progress = 0.7f, // 进度值（0-1）
    color = color.green,
    strokewidth = 8.dp,
    modifier = modifier.size(50.dp)
)
// 线性进度条
linearprogressindicator(
    progress = 0.4f,
    backgroundcolor = color.lightgray,
    color = materialtheme.colors.primary,
    modifier = modifier
        .fillmaxwidth()
        .padding(16.dp)
)

column(
    modifier = modifier
        .fillmaxsize() // 占满父布局
        .background(color.lightgray),
    horizontalalignment = alignment.centerhorizontally, // 水平居中
    verticalarrangement = arrangement.spaceevenly // 等间距分布
) {
    text("item 1")
    button(onclick = {}) { text("button") }
    image(painterresource(r.drawable.icon), null)
}

┌───────────────────────────┐
│                           │
│          item 1           │
│                           │
│         [ button ]        │
│                           │
│          [图标]           │
│                           │
└───────────────────────────┘
（等间距分布）

row(
    modifier = modifier
        .fillmaxwidth()
        .background(color.lightgray)
        .padding(16.dp)
        .horizontalscroll(rememberscrollstate()), // 水平滚动
    verticalalignment = alignment.centervertically, // 垂直居中
    horizontalarrangement = arrangement.spacebetween // 两端对齐
) {
    icon(icons.filled.menu, "menu")
    text("title", fontweight = fontweight.bold)
    icon(icons.filled.search, "search")
}

┌─[菜单]─────标题─────[搜索]─┐
（两端对齐，可横向滚动）

box(
    modifier = modifier
        .size(200.dp)
        .background(color.blue)
) {
    image( // 底层
        painter = painterresource(r.drawable.bg),
        contentdescription = "background",
        modifier = modifier.fillmaxsize()
    )
    text( // 中层
        "overlay text",
        color = color.white,
        modifier = modifier
            .align(alignment.center)
            .padding(8.dp)
    )
    button( // 顶层
        onclick = {},
        modifier = modifier
            .align(alignment.bottomend)
            .padding(16.dp)
    ) {
        text("action")
    }
}

┌───────────────────────────┐
│   [背景图片]              │
│                           │
│        居中文字           │
│                           │
│                   [按钮]  │
└───────────────────────────┘
（三层叠加）

// 状态声明
var text by remember { mutablestateof("") }
// 状态绑定
textfield(
    value = text, // 绑定状态值
    onvaluechange = { newtext -> 
        text = newtext // 更新状态
    }
)
/*
1. 初始状态 text = ""
2. 用户输入 "a" -> 触发 onvaluechange
3. text 更新为 "a"
4. 状态变化触发重组（recomposition）
5. textfield 根据新值刷新界面
*/

column(
    modifier = modifier.verticalscroll(rememberscrollstate())
) { /* 长内容 */ }

lazycolumn {
    item { header() }
    items(100) { index -> // 只渲染可见项
        listitem(index)
    }
    item { footer() }
}

box(modifier = modifier.fillmaxsize()) {
    // 左上角
    text("topstart", modifier.align(alignment.topstart))
    // 右上角
    button(onclick = {}, modifier.align(alignment.topend)) { ... }
    // 正中央
    image(..., modifier.align(alignment.center))
    // 左下角
    icon(..., modifier.align(alignment.bottomstart))
    // 右下角
    circularprogressindicator(modifier.align(alignment.bottomend))
}

@composable
fun adaptivelayout() {
    // 根据屏幕宽度选择布局
    val configuration = localconfiguration.current
    val screenwidth = configuration.screenwidthdp.dp
    if (screenwidth < 600.dp) {
        verticallayout() // 小屏：垂直布局
    } else {
        horizontallayout() // 大屏：水平布局
    }
}