Compose布局基础与UI控制

约 594 字大约 2 分钟

2025-12-23

一、背景

在实践中，我们发现当权限未授予时，“请求相机权限”按钮会铺满整个屏幕，这显然不符合设计需求。那么代码的问题出在哪里呢？

为了实现居中显示、固定大小的按钮，我们需要理解 Compose 的布局容器、对齐方式和修饰符 Modifier。

本篇主要讲如何用 Compose 控制布局和 UI 元素大小。

二、Surface 容器

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
)

作用：Material3 容器，用于承载 UI 元素
modifier.fillMaxSize()：让 Surface 占满父容器（整个屏幕）
color：设置背景颜色，通常使用 Material3 主题色

小结：Surface 是 Compose UI 的根容器，负责背景和大小。

三、Box 容器与对齐

Box(
    modifier = Modifier.fillMaxSize(),        // 父容器占满屏幕
    contentAlignment = Alignment.Center       // 子元素居中
)

Box：Compose 中最灵活的容器之一
- 可以放置一个或多个子元素
- 支持重叠布局
contentAlignment = Alignment.Center
- 控制 Box 内所有子元素的对齐方式
- 常用于居中显示按钮、文本等

小结：使用 Box + contentAlignment 可以轻松实现居中布局。

四、按钮布局与 Modifier

Button(
    onClick = onRequestPermission,
    modifier = Modifier
        .width(200.dp)   // 固定宽度
        .height(60.dp)   // 固定高度
)
{
    Text("请求相机权限")
}

关键点

onClick
- 按钮点击事件回调
- 在 Phase 0 中用于触发权限请求
Modifier.width / height
- 控制按钮固定尺寸
- 避免按钮默认铺满父容器
组合 Modifier
- Modifier 可以链式组合，例如 .width().height().padding()
- 顺序无关紧要，但要保证逻辑清晰

五、完整 NoPermissionView 示例

@Composable
fun NoPermissionView(onRequestPermission: () -> Unit) {
    Box(
        modifier = Modifier.fillMaxSize(),        
        contentAlignment = Alignment.Center       
    ) {
        Button(
            onClick = onRequestPermission,       
            modifier = Modifier
                .width(200.dp)                   
                .height(60.dp)                   
        ) {
            Text("请求相机权限")                  
        }
    }
}

分析

Box：居中父容器
Button：固定大小
Text：按钮显示文字

现在按钮不会铺满屏幕，而是固定大小居中显示，用户体验更好。

六、学习重点

Surface 是根容器
- 用于背景、占满屏幕
Box + contentAlignment = Alignment.Center
- 容器内居中布局
Modifier 灵活组合
- width / height / fillMaxSize / padding
- 控制子控件尺寸和位置
Compose 布局思路
- 父容器决定子控件布局
- 子控件通过 Modifier 精细控制尺寸和位置
实际效果
- 权限未授予 → 居中按钮
- 权限已授予 → CameraPreview 占满屏幕