android 如何基于其他周围视图添加合成修改器?

h5qlskok  于 2022-11-20  发布在  Android
关注(0)|答案(2)|浏览(144)

我无法得到如下图所示的预期结果。有2个规则要遵循
1.水平线不应延伸到底部文本,而应正好是右侧文本的高度(多行)。
1.底部文本应从左侧与右侧文本对齐。
当前不正确的代码段

@Composable
fun Sample() {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .padding(10.dp)
    ) {
        Text("Left Text")
        
        Divider(
            Modifier
                .padding(horizontal = 10.dp)
                .fillMaxHeight()
                .width(4.dp),
            color = Color.Black
        )

        Column {
            Text("Right Looooong Text")
            Text("Bottom Text")
        }
    }
}

视觉表现

nc1teljy

nc1teljy1#

您可以通过多种方式实现此目的,包括

**选项1:**您可以重新设计您的可组合
**选项2:**应用Modifier.layoutId()你的合成对象,然后使用Layout设置它们相对于彼此的位置,并通过这个id获得可测量的对象,然后基于它们所依赖的对象放置它们。

我只张贴选项之一,这是最简单的一个。

@Composable
fun Sample(horizontalPadding: Dp = 10.dp, dividerWidth: Dp = 4.dp) {
    Row(
        modifier = Modifier.padding(10.dp)
    ) {
        Text("Left Text")

        Column {
            Row(modifier = Modifier.height(IntrinsicSize.Min)) {
                Divider(
                    Modifier
                        .padding(horizontal = horizontalPadding)
                        .fillMaxHeight()
                        .width(dividerWidth),
                    color = Color.Black
                )

                Text("Right Loooooooooooooooooooong Text")
            }

            Text(
                "Bottom Text",
                modifier = Modifier.offset(x = horizontalPadding * 2 + dividerWidth)
            )
        }
    }
}

测试结果

voase2hg

voase2hg2#

您可以使用修饰词扩充功能**.onSizeChanged{}(它会以Int**传回其可组合的大小),将垂直分隔缐的高度设定如下:

var divHeight: Int = 0 // Must be initialized

Row() {
    Text(text = "Left Text")

    Divider(
        modifier = Modifier
                .padding(horizontal = 10.dp)
                .width(4.dp)
                .height(divHeight.dp) // .dp converts measurement from Int to Dp
    )

    Column {
        Text(
            modifier = Modifier
                    .onSizeChanged { divHeight = it.height },
            text = "Right Looooong Text"
        )
        Text(text = "Bottom Text")
    }
}

希望这对您有所帮助!

相关问题