美文网首页每天进步一点点简友广场编程语言爱好者
JetPack Compose 基础(1)Compose 布局中

JetPack Compose 基础(1)Compose 布局中

作者: zcwfeng | 来源:发表于2021-08-29 14:54 被阅读0次

Compose 有一项规则,即,子项只能测量一次,测量两次就会引发运行时异常。

有时需要先收集一些关于子项的信息,然后再测量子项。

解决:借助固有特性,您可以先查询子项,然后再进行实际测量。

对于可组合项,您可以查询其 intrinsicWidth 或 intrinsicHeight:

  • (min|max)IntrinsicWidth:给定此高度,可以正确绘制内容的最小/最大宽度是多少?
  • (min|max)IntrinsicHeight:给定此宽度,可以正确绘制内容的最小/最大高度是多少?

1. 官方文档举了一个🌰:

「如果您查询具有无限 width 的 Text 的 minIntrinsicHeight,它将返回 Text 的 height,就好像该文本是在单行中绘制的一样。」

※ 请求固有特性测量不会两次测量子项。 系统在测量子项前会先查询其固有测量值,然后父项会根据这些信息计算测量其子项时使用的约束条件。

假设我们需要创建一个可组合项,该可组合项在屏幕上显示两个用分隔线隔开的文本

我们可以将两个 Text 放在同一 Row,并在其中最大程度地扩展,另外在中间放置一个 Divider。我们需要将分隔线的高度设置为与最高的 Text 相同,粗细设置为 width = 1.dp。

用布局有好几种做法,可以用 ConstraintLayout约束布局,然后放两个TextView。 也可以用RelativeLayout 和LinearLayout包裹
// 测量

@Composable
fun TwoTexts(
    text1: String,
    text2: String,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )

        Divider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .width(100.dp)
                .height(100.dp)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),
            text = text2
        )
    }
}

@Preview
@Composable
fun TwoTextsPreview() {
    MaterialTheme {
        Surface {
            TwoTexts(text1 = "Hi", text2 = "there")
        }
    }
}

要说名的是 Row(modifier = modifier.height(IntrinsicSize.Min))

去掉 modifier.height(IntrinsicSize.Min)

Row 会逐个测量每个子项,并且 Text 的高度不能用于限制 Divider。我们希望 Divider 以一个给定的高度来填充可用空间。为此,我们可以使用 height(IntrinsicSize.Min) 修饰符。

height(IntrinsicSize.Min) 可将其子项的高度强行调整为最小固有高度。由于该修饰符具有递归性,因此它将查询 Row 及其子项 minIntrinsicHeight。

官方例子没有添加高度,去掉.height(100.dp) 效果更加明显

没限制Monitor 限制Monitor

2. 自定义布局中的固有特性

创建自定义 Layoutlayout 修饰符时,系统会根据近似值自动计算固有测量结果。因此,计算结果可能并不适用于所有布局。这些 API 提供了替换这些默认值的选项。

要指定自定义 Layout 的固有特性测量,则在创建该布局时替换 MeasurePolicyminIntrinsicWidthminIntrinsicHeightmaxIntrinsicWidthmaxIntrinsicHeight

定义布局的度量和布局行为。 Layout 和 MeasurePolicy 是 Compose 布局(如 Box、Column 等)的构建方式,也可以用来实现自定义布局。

  • 首先要做的是衡量可组合。 正如我们在 Compose 中的布局原则部分中提到的,您只能测量您的孩子一次。
fun Modifier.firstBaselineToTop(
  firstBaselineToTop: Dp
) = this.then(
    layout { measurable, constraints ->
        ...
    }
)
  • 通过调用 measurable.measure(constraints) 来衡量可组合。 调用 measure(constraints) 时,您可以传入约束 lambda 参数中可用的可组合的给定约束,也可以创建自己的约束。 对 Measurable 调用 measure() 的结果是一个 Placeable,可以通过调用 placeRelative(x, y) 来定位,
        val placeable = measurable.measure(constraints)

对比一下


fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = this.then(
    layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        // Check the composable has a first baseline
        check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
        val firstBaseline = placeable[FirstBaseline]

        // Height of the composable with padding - first baseline
        val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
        val height = placeable.height + placeableY
        layout(placeable.width, height) {
            // Height of the composable with padding - first baseline
            val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
            val height = placeable.height + placeableY
            layout(placeable.width, height) {
                // Where the composable gets placed
                placeable.placeRelative(0, placeableY)
            }
        }
    }
)

@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
    MaterialTheme {
        Surface (color = MaterialTheme.colors.background){
            Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
        }
    }
}

@Preview
@Composable
fun TextWithNormalPaddingPreview() {
    MaterialTheme {
        Surface(color = MaterialTheme.colors.background) {
            Text("Hi there!", Modifier.padding(top = 32.dp))
        }
    }
}

简单布局🌰:

@Composable
fun MyOwnColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->

        // Don't constrain child views further, measure them with given constraints
        // List of measured children
//        val placeables = measurables.map { measurable ->
//            // Measure each child
//            measurable.measure(constraints)
//        }
//        // Set the size of the layout as big as it can
//        layout(constraints.maxWidth, constraints.maxHeight) {
//            // Place children
//        }


        // Don't constrain child views further, measure them with given constraints
        // List of measured children
        val placeables = measurables.map { measurable ->
            // Measure each child
            measurable.measure(constraints)
        }

        // Track the y co-ord we have placed children up to
        var yPosition = 0

        // Set the size of the layout as big as it can
        layout(constraints.maxWidth, constraints.maxHeight) {
            // Place children in the parent layout
            placeables.forEach { placeable ->
                // Position item on the screen
                placeable.placeRelative(x = 0, y = yPosition)

                // Record the y co-ord placed up to
                yPosition += placeable.height
            }
        }
    }
}
@Preview(
    showBackground = true,
)
@Composable
fun BodyContent(modifier: Modifier = Modifier) {
    MyOwnColumn(modifier.padding(8.dp)) {
        Text("MyOwnColumn")
        Text("places items")
        Text("vertically.")
        Text("We've done it by hand!")
    }
}

相关文章

网友评论

    本文标题:JetPack Compose 基础(1)Compose 布局中

    本文链接:https://www.haomeiwen.com/subject/ipjbiltx.html