目录- 一、基础控件详解
- 1. Text - 文本控件
- 2. Button - 按钮控件
- 3. TextField - 输入框控件
- 4. Image - 图片控件
- 5. ProgressIndicator - 进度指示器
- 二、核心布局详解（附结构图）
- 1. Column - 垂直布局
- 2. Row - 水平布局
- 3. Box - 层叠布局
- 三、常见问题
- Q1：Compose 为什么需要状态管理？TextField 如何处理状态变化？
- Q2：如何实现列表滚动？
- Q3：Box 布局如何实现复杂定位？
- Q4：如何实现响应式布局？
一、基础控件详解
1. Text - 文本控件
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) // 背景色
)核心参数说明：
text：显示的文字内容（必填）
color：文字颜色（Color.Red, Color(0xFF6200EE)等）
fontSize：字体大小（必须使用.sp单位，如18.sp）
fontWeight：字体粗细（FontWeight.Normal, Bold, W800等）
modifier：通用修饰符（设置边距、背景、点击事件等）
maxLines：最大行数（超出显示省略号）
textDecoration：文本装饰（TextDecoration.Underline下划线）
效果(示意图)：
[浅灰色背景]
Hello Compose（蓝色，24sp，粗体，斜体） 2. Button - 按钮控件
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 3. TextField - 输入框控件
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()
)核心参数说明：
value/onValueChange：必须配合状态管理（remember+mutableStateOf）
label：浮动标签（输入时上浮）
placeholder：提示文本（未输入时显示）
keyboardOptions：键盘配置（邮箱/数字键盘等）
singleLine：是否单行（true时禁用换行）
4. Image - 图片控件
// 加载本地资源
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)
}
)核心参数说明：
painter：本地资源（painterResource()）
contentDescription：必填（无障碍支持）
contentScale：缩放模式（Crop, Fit, Inside等）
alpha：透明度（0.0f-1.0f）
colorFilter：颜色滤镜（如黑白效果）
5. ProgressIndicator - 进度指示器
// 圆形进度条
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)
)参数说明：
二、核心布局详解（附结构图）
1. Column - 垂直布局
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)
}参数说明：
| 参数 | 说明 | 常用值 |
|---|
horizontalAlignment | 子项水平对齐 | Start, CenterHorizontally, End | verticalArrangement | 垂直分布方式 | Top, Center, SpaceBetween, SpaceEvenly | modifier | 修饰符 | 设置尺寸/背景/边距等 |
布局效果：
┌───────────────────────────┐
│ │
│ Item 1 │
│ │
│ [ Button ] │
│ │
│ [图标] │
│ │
└───────────────────────────┘
（等间距分布） 2. Row - 水平布局
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")
}参数说明：
| 参数 | 说明 | 常用值 |
|---|
verticalAlignment | 子项垂直对齐 | Top, CenterVertically, Bottom | horizontalArrangement | 水平分布方式 | Start, Center, SpaceBetween, SpaceAround | .horizontalScroll() | 水平滚动支持 | 必须添加 |
布局效果：
┌─[菜单]─────标题─────[搜索]─┐
（两端对齐，可横向滚动） 3. Box - 层叠布局
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")
}
}关键方法：
布局效果：
┌───────────────────────────┐
│ [背景图片] │
│ │
│ 居中文字 │
│ │
│ [按钮] │
└───────────────────────────┘
（三层叠加） 三、常见问题
Q1：Compose 为什么需要状态管理？TextField 如何处理状态变化？
答：
// 状态声明
var text by remember { mutableStateOf("") }
// 状态绑定
TextField(
value = text, // 绑定状态值
onValueChange = { newText ->
text = newText // 更新状态
}
)
/*
1. 初始状态 text = ""
2. 用户输入 "A" -> 触发 onValueChange
3. text 更新为 "A"
4. 状态变化触发重组（Recomposition）
5. TextField 根据新值刷新界面
*/Q2：如何实现列表滚动？
垂直滚动：
Column(
modifier = Modifier.verticalScroll(rememberScrollState())
) { /* 长内容 */ }高性能列表（LazyColumn）：
LazyColumn {
item { Header() }
items(100) { index -> // 只渲染可见项
ListItem(index)
}
item { Footer() }
}Q3：Box 布局如何实现复杂定位？
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))
}Q4：如何实现响应式布局？
@Composable
fun AdaptiveLayout() {
// 根据屏幕宽度选择布局
val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp
if (screenWidth < 600.dp) {
VerticalLayout() // 小屏：垂直布局
} else {
HorizontalLayout() // 大屏：水平布局
}
}到此这篇关于Android中Compose常用组件以及布局使用方法的文章就介绍到这了,更多相关android compose组件布局内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！
您可能感兴趣的文章:- Android Jetpack结构运用Compose实现微博长按点赞彩虹效果
- Android Compose自定义TextField实现自定义的输入框
- Android Jetpack Compose实现列表吸顶效果
- Android Jetpack Compose无限加载列表
- Android之Compose页面切换动画介绍
- Android Compose实现底部按钮以及首页内容详细过程
|
發表於 2025-7-4 10:34:05
