首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >布局垂直对齐: SpaceBetween没有影响

布局垂直对齐: SpaceBetween没有影响
EN

Stack Overflow用户
提问于 2021-09-10 05:18:40
回答 1查看 1.5K关注 0票数 3

我希望将Upcoming文本推到底部,而7 pax文本则保持在顶部。我对该列使用了verticalArrangement = Arrangement.SpaceBetween,但是它没有任何效果,因为列的高度不是完全的。如果我对列使用fillMaxHeight强制它获得完全高度,则整行将获得整个屏幕的高度,这是不需要的。我怎么才能解决这个问题?

代码语言:javascript
代码运行次数:0
运行
复制
@Composable
fun SoFixClientTourCard() {
    Column {
        Row(
            verticalAlignment = Alignment.Top,
            modifier = Modifier
                .background(Color.White)
                .fillMaxWidth()
                .padding(16.dp)
        ) {

            // calendar
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .padding(top = 4.dp)
                    .background(MaterialTheme.colors.error)
                    .shadow(1.dp)
                    .padding(horizontal = 8.dp, vertical = 4.dp)
            ) {
                Text("02", fontSize = 14.sp, fontWeight = FontWeight.Bold, color = Color.White)
                Text("OCT", fontSize = 12.sp, fontWeight = FontWeight.Bold, color = Color.White)
            }

            // tour & package name
            Column(
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .weight(1f)
            ) {
                Text("Tanguar Haor Tour", style = MaterialTheme.typography.subtitle1, fontWeight = FontWeight.Bold)
                Text(
                    "Couple Non-AC + Single Non-AC + Family Non-AC + Couple AC",
                    style = MaterialTheme.typography.body2,
                    lineHeight = 20.sp,
                    modifier = Modifier.padding(top = 4.dp)
                )
            }

            // FIXME: Align status to the bottom, pax to the top
            // pax & status
            Column(
                horizontalAlignment = Alignment.End,
                verticalArrangement = Arrangement.SpaceBetween,
            ) {
                Text("7 pax", fontSize = XS)
                val status = "Upcoming"
                Text(
                    status,
                    fontSize = XXXS,
                    color = Color.White,
                    modifier = Modifier
                        .padding(top = 4.dp) // top margin
                        .background(
                            when (status.lowercase()) {
                                "upcoming" -> MaterialTheme.colors.primary
                                "cancelled" -> MaterialTheme.colors.error
                                else -> Color.DarkGray
                            }
                        )
                        .padding(horizontal = 8.dp, vertical = 4.dp)
                )
            }
        }
    }
}

谢谢你的帮忙!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-10 05:42:25

您可以将本征测量应用于其父容器,在您的例子中是Row

高度(IntrinsicSize.Min)修饰符添加到Row中,将fillMaxHeight()修饰符添加到第3 Column。类似于:

代码语言:javascript
代码运行次数:0
运行
复制
Column {
    Row(
        verticalAlignment = Alignment.Top,
        modifier = Modifier
            .background(Color.White)
            .fillMaxWidth()
            .padding(16.dp)
            .height(IntrinsicSize.Min)
    ) {

        //....
       
        // pax & status
        Column(
            modifier= Modifier.fillMaxHeight(),
            horizontalAlignment = Alignment.End,
            verticalArrangement = Arrangement.SpaceBetween,
        ) {
            //...
        }
    }
}

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69127581

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档