Arrangement

本计划详细安排了一周内学习数据结构和Access2003的任务,包括观看视频教程、完成练习题以及软件操作实践等。通过有序的学习步骤,确保能够全面掌握相关知识点。
本周任务:把DataStrcture 学好,把
周四1.1:把图这章的视频看完。
周五1.2:把图这章的基础题(1-3级)做完。
周六1.3:把查找那一章的视频看完
周日1.4:把查找那章的基础题(1-3级)做完。
下周任务
1.5:把内部排序那章的视频看完。
1.6:把内部排序的那章基础题做完。
1.7:把Access2003的电脑操作认真的搞下
1.8:把Access2003课后习题再搞一遍。
1.9:把Access线性代数再看下。
考试
```kotlin verticalArrangement = Arrangement.Center ``` 这是 Jetpack Compose 中 `Column` 或 `Row` 布局的一个参数,用于控制子组件在**主轴方向上的垂直排列方式**。 --- ## ✅ 详细解释:`Arrangement.Center` ### 📌 作用: 将所有子组件作为一个整体,在 **主轴(Main Axis)方向上居中对齐**。 > 对于 `Column`:主轴是垂直方向 → 控制 **上下居中** > > 对于 `Row`:主轴是水平方向 → 控制 **左右居中** --- ### 🔹 在 `Column` 中使用(最常见) ```kotlin Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center ) { Text("Hello") Text("World") } ``` 👉 效果: - 整个内容块("Hello" + "World")会在屏幕**垂直方向上居中** - 上下留白相等 - 类似于 CSS 的 `justify-content: center` #### 可视化布局: ``` | | ← 屏幕顶部 | | | Hello | | World | | | | | ← 屏幕底部 ``` ✅ 子项整体垂直居中 --- ### 🔹 在 `Row` 中使用 ```kotlin Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center // ← 水平居中 ) ``` 但如果你写的是: ```kotlin Row( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center ) ``` ⚠️ 注意!虽然语法合法,但在 `Row` 中 `verticalArrangement` 实际上控制的是 **交叉轴(Cross Axis)** 的排列。而默认的 `Alignment` 才是控制交叉轴的。 所以更推荐的做法是: ```kotlin Row( modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.Center // ✅ 推荐:明确表示“交叉轴居中” ) { Text("Item 1") Text("Item 2") } ``` > 💡 总结: > - `verticalArrangement` 在 `Row` 中意义不大(除非自定义排布) > - 应使用 `verticalAlignment` 来控制 `Row` 子项的垂直对齐 --- ## ✅ 常见组合用法 ### 1. 屏幕中央居中(文字+按钮) ```kotlin Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text("欢迎登录", style = MaterialTheme.typography.headlineMedium) Spacer(Modifier.height(16.dp)) Button(onClick = { /* 登录 */ }) { Text("立即开始") } } ``` 👉 效果:整个内容块(文本 + 按钮)**垂直居中**,并且每个子项**水平居中对齐** --- ### 2. 与 `SpaceBetween` 对比 | 写法 | 效果 | |------|------| | `verticalArrangement = Arrangement.Top` | 所有子项贴顶 | | `verticalArrangement = Arrangement.Bottom` | 所有子项贴底 | | `verticalArrangement = Arrangement.Center` | 子项整体居中 | | `verticalArrangement = Arrangement.SpaceBetween` | 首尾贴边,中间均分 | --- ## ✅ 工作原理(底层机制) Compose 的 `Arrangement` 是一个接口,`Arrangement.Center` 是其实现之一。 它会在测量阶段计算出: ```text totalHeight = 所有子项高度之和 availableHeight = 父容器高度 - totalHeight mainAxisPadding = (availableHeight / 2) ← 居中偏移量 ``` 然后从 `mainAxisPadding` 开始依次摆放子项。 --- ## ❗注意事项 | 问题 | 解决方案 | |------|----------| | 使用了 `.weight()` 导致居中失效 | `.weight()` 会拉伸子项占满空间,破坏居中逻辑 | | 忘记加 `fillMaxSize()` 导致看不出效果 | 父容器太小,无法体现“居中” | | 在 `LazyColumn` 中不能用 `Arrangement.Center` | `Lazy*` 组件不支持此参数,需用 `Arrangement.spacedBy()` 或外层包裹 `Box` 实现 | --- ## ✅ 替代方案:使用 `Box` 居中 你也可以不用 `Column` + `Arrangement.Center`,而是用 `Box`: ```kotlin Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(8.dp) ) { Text("加载完成") Button(onClick = {}) { Text("进入") } } } ``` > ✅ 优点:更灵活,适合复杂居中场景 > ✅ `contentAlignment = Alignment.Center` 相当于同时实现了 `horizontal + vertical` 居中 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值