Android中Compose常用组件及布局使用方法示例详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>一、基础控件详解</li><ul class="second_class_ul"><li>1. Text - 文本控件</li><li>2. Button - 按钮控件</li><li>3. TextField - 输入框控件</li><li>4. Image - 图片控件</li><li>5. ProgressIndicator - 进度指示器</li></ul><li>二、核心布局详解（附结构图）</li><ul class="second_class_ul"><li>1. Column - 垂直布局</li><li>2. Row - 水平布局</li><li>3. Box - 层叠布局</li></ul><li>三、常见问题</li><ul class="second_class_ul"><li>Q1：Compose 为什么需要状态管理？TextField 如何处理状态变化？</li><li>Q2：如何实现列表滚动？</li><li>Q3：Box 布局如何实现复杂定位？</li><li>Q4：如何实现响应式布局？</li></ul></ul></div><p class="maodian"></p><h2>一、基础控件详解</h2><p class="maodian"></p><h3>1. Text - 文本控件</h3>
<div class="jb51code"><pre class="brush:java;">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) // 背景色
)</pre></div>
<p><strong>核心参数说明</strong>：</p>
<ul><li><p><code>text</code>：显示的文字内容（<strong>必填</strong>）</p></li><li><p><code>color</code>：文字颜色（<code>Color.Red</code>, <code>Color(0xFF6200EE)</code>等）</p></li><li><p><code>fontSize</code>：字体大小（必须使用<code>.sp</code>单位，如<code>18.sp</code>）</p></li><li><p><code>fontWeight</code>：字体粗细（<code>FontWeight.Normal</code>, <code>Bold</code>, <code>W800</code>等）</p></li><li><p><code>modifier</code>：通用修饰符（设置边距、背景、点击事件等）</p></li><li><p><code>maxLines</code>：最大行数（超出显示省略号）</p></li><li><p><code>textDecoration</code>：文本装饰（<code>TextDecoration.Underline</code>下划线）</p></li></ul>
<p><strong>效果(示意图)</strong>：</p>
<div class="jb51code"><pre class="brush:plain;">[浅灰色背景]
Hello Compose（蓝色，24sp，粗体，斜体）</pre></div>
<p class="maodian"></p><h3>2. Button - 按钮控件</h3>
<div class="jb51code"><pre class="brush:java;">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") // 按钮文字
}</pre></div>
<p><strong>核心参数说明</strong>：</p>
<ul><li><p><code>onClick</code>：点击事件回调（<strong>必填</strong>）</p></li><li><p><code>colors</code>：颜色配置（背景色、文字色）</p></li><li><p><code>enabled</code>：是否启用（false时变灰色）</p></li><li><p><code>content</code>：按钮内容（可包含任意Composable）</p></li></ul>
<p><strong>效果</strong>：</p>
<div class="jb51code"><pre class="brush:plain;">[红色按钮] ♥ Like（白色文字）
点击后弹出Toast</pre></div>
<p class="maodian"></p><h3>3. TextField - 输入框控件</h3>
<div class="jb51code"><pre class="brush:java;">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()
)</pre></div>
<p><strong>核心参数说明</strong>：</p>
<ul><li><p><code>value</code>/<code>onValueChange</code>：<strong>必须配合状态管理</strong>（<code>remember+mutableStateOf</code>）</p></li><li><p><code>label</code>：浮动标签（输入时上浮）</p></li><li><p><code>placeholder</code>：提示文本（未输入时显示）</p></li><li><p><code>keyboardOptions</code>：键盘配置（邮箱/数字键盘等）</p></li><li><p><code>singleLine</code>：是否单行（true时禁用换行）</p></li></ul>
<p class="maodian"></p><h3>4. Image - 图片控件</h3>
<div class="jb51code"><pre class="brush:java;">// 加载本地资源
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)
}
)</pre></div>
<p><strong>核心参数说明</strong>：</p>
<ul><li><p><code>painter</code>：本地资源（<code>painterResource()</code>）</p></li><li><p><code>contentDescription</code>：<strong>必填</strong>（无障碍支持）</p></li><li><p><code>contentScale</code>：缩放模式（<code>Crop</code>, <code>Fit</code>, <code>Inside</code>等）</p></li><li><p><code>alpha</code>：透明度（0.0f-1.0f）</p></li><li><p><code>colorFilter</code>：颜色滤镜（如黑白效果）</p></li></ul>
<p class="maodian"></p><h3>5. ProgressIndicator - 进度指示器</h3>
<div class="jb51code"><pre class="brush:java;">// 圆形进度条
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)
)</pre></div>
<p><strong>参数说明</strong>：</p>
<ul><li><p><code>progress</code>：进度值（0-1），不传则为不确定进度</p></li><li><p><code>color</code>：进度条颜色</p></li><li><p><code>strokeWidth</code>：圆形进度条粗细</p></li><li><p><code>backgroundColor</code>：线性进度条背景色</p></li></ul>
<p class="maodian"></p><h2>二、核心布局详解（附结构图）</h2>
<p class="maodian"></p><h3>1. Column - 垂直布局</h3>
<div class="jb51code"><pre class="brush:java;">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)
}</pre></div>
<p><strong>参数说明</strong>：</p>
<table><thead><tr><th>参数</th><th>说明</th><th>常用值</th></tr></thead><tbody><tr><td><code>horizontalAlignment</code></td><td>子项水平对齐</td><td><code>Start</code>, <code>CenterHorizontally</code>, <code>End</code></td></tr><tr><td><code>verticalArrangement</code></td><td>垂直分布方式</td><td><code>Top</code>, <code>Center</code>, <code>SpaceBetween</code>, <code>SpaceEvenly</code></td></tr><tr><td><code>modifier</code></td><td>修饰符</td><td>设置尺寸/背景/边距等</td></tr></tbody></table>
<p><strong>布局效果</strong>：</p>
<div class="jb51code"><pre class="brush:plain;">┌───────────────────────────┐
│ │
│ Item 1 │
│ │
│ [ Button ] │
│ │
│ [图标] │
│ │
└───────────────────────────┘
（等间距分布）</pre></div>
<p class="maodian"></p><h3>2. Row - 水平布局</h3>
<div class="jb51code"><pre class="brush:java;">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")
}</pre></div>
<p><strong>参数说明</strong>：</p>
<table><thead><tr><th>参数</th><th>说明</th><th>常用值</th></tr></thead><tbody><tr><td><code>verticalAlignment</code></td><td>子项垂直对齐</td><td><code>Top</code>, <code>CenterVertically</code>, <code>Bottom</code></td></tr><tr><td><code>horizontalArrangement</code></td><td>水平分布方式</td><td><code>Start</code>, <code>Center</code>, <code>SpaceBetween</code>, <code>SpaceAround</code></td></tr><tr><td><code>.horizontalScroll()</code></td><td>水平滚动支持</td><td>必须添加</td></tr></tbody></table>
<p><strong>布局效果</strong>：</p>
<div class="jb51code"><pre class="brush:plain;">┌─[菜单]─────标题─────[搜索]─┐
（两端对齐，可横向滚动）</pre></div>
<p class="maodian"></p><h3>3. Box - 层叠布局</h3>
<div class="jb51code"><pre class="brush:java;">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")
}
}</pre></div>
<p><strong>关键方法</strong>：</p>
<ul><li><p><code>Modifier.align()</code>：在Box内定位</p>
<ul><li><p><code>Alignment.TopStart</code></p></li><li><p><code>Alignment.Center</code></p></li><li><p><code>Alignment.BottomEnd</code></p></li></ul></li><li><p><code>Modifier.zIndex()</code>：控制层级（默认后添加的在上层）</p></li></ul>
<p><strong>布局效果</strong>：</p>
<div class="jb51code"><pre class="brush:plain;">┌───────────────────────────┐
│ [背景图片] │
│ │
│ 居中文字 │
│ │
│ [按钮]│
└───────────────────────────┘
（三层叠加）</pre></div>
<p class="maodian"></p><h2>三、常见问题</h2>
<p class="maodian"></p><h3>Q1：Compose 为什么需要状态管理？TextField 如何处理状态变化？</h3>
<p><strong>答</strong>：</p>
<div class="jb51code"><pre class="brush:java;">// 状态声明
var text by remember { mutableStateOf("") }
// 状态绑定
TextField(
value = text, // 绑定状态值
onValueChange = { newText ->
text = newText // 更新状态
}
)
/*
1. 初始状态 text = ""
2. 用户输入 "A" -> 触发 onValueChange
3. text 更新为 "A"
4. 状态变化触发重组（Recomposition）
5. TextField 根据新值刷新界面
*/</pre></div>
<p class="maodian"></p><h3>Q2：如何实现列表滚动？</h3>
<p><strong>垂直滚动</strong>：</p>
<div class="jb51code"><pre class="brush:plain;">Column(
modifier = Modifier.verticalScroll(rememberScrollState())
) { /* 长内容 */ }</pre></div>
<p><strong>高性能列表（LazyColumn）</strong>：</p>
<div class="jb51code"><pre class="brush:java;">LazyColumn {
item { Header() }
items(100) { index -> // 只渲染可见项
ListItem(index)
}
item { Footer() }
}</pre></div>
<p class="maodian"></p><h3>Q3：Box 布局如何实现复杂定位？</h3>
<div class="jb51code"><pre class="brush:java;">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))
}</pre></div>
<p class="maodian"></p><h3>Q4：如何实现响应式布局？</h3>
<div class="jb51code"><pre class="brush:java;">@Composable
fun AdaptiveLayout() {
// 根据屏幕宽度选择布局
val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp
if (screenWidth < 600.dp) {
VerticalLayout() // 小屏：垂直布局
} else {
HorizontalLayout() // 大屏：水平布局
}
}</pre></div>
<p>到此这篇关于Android中Compose常用组件以及布局使用方法的文章就介绍到这了,更多相关android compose组件布局内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>Android Jetpack结构运用Compose实现微博长按点赞彩虹效果</li><li>Android Compose自定义TextField实现自定义的输入框</li><li>Android Jetpack Compose实现列表吸顶效果</li><li>Android Jetpack Compose无限加载列表</li><li>Android之Compose页面切换动画介绍</li><li>Android Compose实现底部按钮以及首页内容详细过程</li></ul>
</div>
</div>
<!--endmain--> 看到这么详细的Compose教程，真是太棒了！感谢楼主的分享，这对于我们这些正在学习Jetpack Compose的同学来说简直是大礼包~
之前一直对Compose的状态管理有点困惑，看了你关于TextField的讲解终于搞明白了！原来需要用remember + mutableStateOf来管理状态，这样才能实现UI的自动刷新，学到了！
有几个小问题想请教一下：
[*]关于LazyColumn的性能优化，如果数据量特别大（比如上万条），除了使用items()之外，还需要注意什么吗？
[*]Box布局的zIndex是不是主要用在有动画效果的场景？普通静态UI是不是可以不用管它？
[*]响应式布局那里，如果要在平板和手机之间切换，除了判断screenWidthDp，还有没有其他更好的方案？
另外，感觉这篇文章特别适合作为入门教程收藏，期待楼主后续能出一些进阶的内容，比如：
[*]Compose动画的实现方法
[*]自定义布局（LayoutModifier）的使用
[*]Compose与View混合开发时的注意事项
再次感谢楼主的干货分享，已Mark备用！希望能看到更多Compose系列教程~
板凳占位，坐等更新！
頁:
[1]