初识 Jetpack Compose(二) ：布局，移动智能终端开发报告
}
通过Row的源码可以看到我们还可以传递如下几个参数：
@Composable
inline fun Row(
modifier: Modifier = Modifier,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
verticalAlignment: Alignment.Vertical = Alignment.Top,
content: @Composable RowScope.() -> Unit
) {
...
}
| 参数 | 类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| modifier | Modifier | Modifier | 布局的修饰符 |
| horizontalArrangement | Arrangement.Horizontal | Arrangement.Start | 布局子级的 水平 放置方式，默认从布局开始往布局结束方向放置 |
| verticalAlignment | Alignment.Vertical | Alignment.Top | 布局子级的 垂直 对其方式，默认从布局顶部对齐 |
例如：
需要注意的是，和 LinearLayout 一样，超出布局设置的最大宽度或高度的视图将不可见
2. Column
Column可以理解为 Xml 布局中LinearLayout的vertical模式，例如：
@Composable
fun MainPage() {
Column(Modifier.padding(Dp(50f))) {
Text(text = "Hello")
Text(text = ",")
Text(text = "jetpack compose!")
}
}
通过Column的源码可以看到我们还可以传递如下几个参数：
@Composable
inline fun Column(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: @Composable ColumnScope.() -> Unit
) {
...
}
| 参数 | 类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| modifier | Modifier | Modifier | 布局的修饰符 |
| verticalArrangement | Arrangement.Vertical | Arrangement.Top | 布局子级的 竖直 放置方式，默认从布局顶部往布局底部方向放置 |
| horizontalAlignment | Alignment.Horizontal | Alignment.Start | 布局子级的 水平 对其方式，默认从布局开始对齐 |
Column 有和 Row 同样的问题，注意用于修饰 Column 子级放置和对其方式和 Row 的参数是不一样的
3. Box
Box可以理解为 Xml 布局中FrameLayout，例如：
@Composable
fun MainPage() {
Box(Modifier.size(Dp(300f), Dp(150f)),
contentAlignment = Alignment.Center) {
Box(modifier = Modifier
.background(MaterialTheme.colors.error)
.size(
Dp(200f), Dp(100f)))
Box(modifier = Modifier
.background(MaterialTheme.colors.secondary)
.size(Dp(100f), Dp(50f)))
Text(text = "hello,jetpack compose!")
}
}
通过Column的源码可以看到我们还可以传递如下几个参数：
@Composable
inline fun Box(
modifier: Modifier = Modifier,
contentAlignment: Alignment = Alignment.TopStart,
propagateMinConstraints: Boolean = false,
content: @Composable BoxScope.() -> Unit
) {
...
}
| 参数 | 类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| modifier | Modifier | Modifier | 布局的修饰符 |
| contentAlignment | Alignment | Alignment.TopStart | Box 内的默认对齐方式 |
| propagateMinConstraints | Boolean | false | 传入的最小约束是否应传递给内容。 |
4. BoxWithConstraints
如需了解来自父项的约束条件并相应地设计布局，您可以使用?
BoxWithConstraints。您可以在内容 lambda 的作用域内找到[测量约束条件](
)。
BoxWithConstraints与 Box 使用方式完全一致，只是如官方所说，可以测量约束条件，例如：
@Composable
fun MainPage1() {
BoxWithConstraints {
Text("My minHeight is maxWidth")
}
}
在其作用域内可以拿到 BoxWithConstraints的最大最小宽高信息。
5. ConstraintLayout
ConstraintLayout 其实就是 Xml 布局中的 ConstraintLayout，我们来看官方的描述
ConstraintLayout?有助于根据可组合项的相对位置将它们放置在屏幕上，它是使用多个嵌套?Row、Column、Box?和自定义布局元素的替代方案。在实现对齐要求比较复杂的较大布局时，ConstraintLayout?很有用。
注意：在 View 系统中，建议使用?
ConstraintLayout?来创建复杂的大型布局，因为扁平视图层次结构比嵌套视图的性能更好。不过，这在 Compose 中不是什么问题，因为它能够高效地处理较深的布局层次结构。
注意：是否将?
ConstraintLayout?用于 Compose 中的特定界面取决于开发者的偏好。在 Android View 系统中，使用?ConstraintLayout?作为构建更高性能布局的一种方法，但这在 Compose 中并不是问题。在需要进行选择时，请考虑?ConstraintLayout?是否有助于提高可组合项的可读性和可维护性。
可以看出，虽然官方提供了ConstraintLayout,但并不推荐在Compose中使用，xml 中使用ConstraintLayout的根本目的是为了减少视图嵌套层级从而提升android的页面绘制性能，在Compose中不存在视图嵌套这一概念，所以是否使用ConstraintLayout，需要考虑个人习惯和?ConstraintLayout?是否有助于提高可组合项的可读性和可维护性。
在使用ConstraintLayout前，需要在?build.gradle?中添加以下依赖项：
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha08"
Compose 中的?ConstraintLayout?支持?[DSL](
)：
引用是使用?
createRefs()?或?createRefFor()?创建的，ConstraintLayout?中的每个可组合项都需要有与之关联的引用。约束条件是使用?
constrainAs()?修饰符提供的，该修饰符将引用作为参数，可让您在主体 lambda 中指定其约束条件。约束条件是使用?
linkTo()?或其他有用的方法指定的。parent?是一个现有的引用，可用于指定对?ConstraintLayout?可组合项本身的约束条件。
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论