列垂直SpaceBetween 不考虑

发布于 2025-01-11 01:19:12 字数 1595 浏览 2 评论 0原文

无法理解为什么在这张卡中,在列中,垂直对齐之间的空间没有考虑在内。 列示例的底部

fun UserCard(image:Int, text:String, actionButtonLabel:String){
    Card(
        elevation = 4.dp,
        modifier = Modifier
            .padding(12.dp)
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Row(
            horizontalArrangement  =  Arrangement.SpaceBetween,
            modifier = Modifier
                .padding(8.dp)
                .border(width = 1.dp, color = Color.Blue)
                .padding(12.dp)
        ) {
            Image(
                painter = painterResource(id = image),
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(120.dp)
                    .clip(CircleShape)
            )
            Column(
                modifier= Modifier.fillMaxHeight(),
                horizontalAlignment = Alignment.End,
                verticalArrangement = Arrangement.SpaceBetween, // <-- seems not to be taking into account
            ) {
                Title(text)
                Button(onClick = { }) {
                    Text(text = actionButtonLabel)
                }

            }
        }
    }
}

我希望标题位于顶部,“查看详细信息”按钮位于UserCard 调用的

UserCard(
            image= R.drawable.iron,
            text = "Live after death",
            actionButtonLabel = "View details"
        )

按钮位于卡片按钮

Can not understand why in this card, in the column, the spacebetween vertical alignment is not taking into account. I'm expecting the Title to be on top, and the "View Details" button to be at the bottom of the Column

fun UserCard(image:Int, text:String, actionButtonLabel:String){
    Card(
        elevation = 4.dp,
        modifier = Modifier
            .padding(12.dp)
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Row(
            horizontalArrangement  =  Arrangement.SpaceBetween,
            modifier = Modifier
                .padding(8.dp)
                .border(width = 1.dp, color = Color.Blue)
                .padding(12.dp)
        ) {
            Image(
                painter = painterResource(id = image),
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(120.dp)
                    .clip(CircleShape)
            )
            Column(
                modifier= Modifier.fillMaxHeight(),
                horizontalAlignment = Alignment.End,
                verticalArrangement = Arrangement.SpaceBetween, // <-- seems not to be taking into account
            ) {
                Title(text)
                Button(onClick = { }) {
                    Text(text = actionButtonLabel)
                }

            }
        }
    }
}

example of call of UserCard

UserCard(
            image= R.drawable.iron,
            text = "Live after death",
            actionButtonLabel = "View details"
        )

button tp be at button of the card

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

z祗昰~ 2025-01-18 01:19:12

您可以将内在测量应用于行 容器和 ColumnfillMaxHeight() 修饰符。
你的问题是柱子的高度。

    Row(
        horizontalArrangement  =  Arrangement.SpaceBetween,
        modifier = Modifier.height(IntrinsicSize.Min)
        //..
    ){
        /* Image */
        Column(
            modifier = Modifier
                .fillMaxHeight(),
            horizontalAlignment = Alignment.End,
            verticalArrangement = Arrangement.SpaceBetween){
          
           //...
        }
   }

输入图片此处描述

You can apply an intrinsic measurements to the Row container and the fillMaxHeight() Modifier to the Column.
Your issue is the height of the column.

    Row(
        horizontalArrangement  =  Arrangement.SpaceBetween,
        modifier = Modifier.height(IntrinsicSize.Min)
        //..
    ){
        /* Image */
        Column(
            modifier = Modifier
                .fillMaxHeight(),
            horizontalAlignment = Alignment.End,
            verticalArrangement = Arrangement.SpaceBetween){
          
           //...
        }
   }

enter image description here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文