我有一个列,其中包含一些行,我想将最后一行对齐到底部,但该行从未位于屏幕底部,它一直位于前一行之后:
Column {
// RED BOX
Row(
modifier = Modifier
.fillMaxWidth()
.height(130.dp)
.padding(vertical = 15.dp, horizontal = 30.dp),
verticalAlignment = Alignment.CenterVertically
) {
Column {
Text(
text = stringResource(id = R.string.app_name),
style = TextStyle(fontSize = 40.sp),
color = Color.White
)
Text(
text = stringResource(id = R.string.app_description),
style = TextStyle(fontSize = 13.sp),
fontWeight = FontWeight.Bold,
color = Color.Black
)
}
}
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(15.dp)
)
// GREEN BOX
val currentRoute = currentRoute(navController)
items.forEach { item ->
DrawerItem(item = item, selected = currentRoute == item.route) {
navController.navigate(item.route) {
launchSingleTop = true
}
scope.launch {
scaffoldState.drawerState.close()
}
}
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 15.dp, horizontal = 30.dp),
verticalAlignment = Alignment.Bottom,
horizontalArrangement = Arrangement.Center
) {
Text(
text = BuildConfig.VERSION_NAME,
style = TextStyle(fontSize = 11.sp),
color = Color.Black,
)
}
}
我想得到和我在图片中显示的一样的。我想有第一行(红色),然后是第二行(绿色),然后是适合屏幕底部的第三行(蓝色)
2条答案
按热度按时间nfeuvbwi1#
你可以用很多方法去做。
您可以使用带有
verticalArrangement = Arrangement.SpaceBetween
的列,将weight(1f,false)
分配给最后一行:dgiusagp2#
您可以在GreenBox和Blue Box之间使用
Spacer(modifier.weight(1f))
来创建它们之间的空间,或者您可以使用Layout
函数创建自定义列,并将最后一个Placeable
的y位置设置为Composable
的高度-最后一个Composble
的高度结果:
自定义布局
用途
结果:
在这个布局示例中,您应该考虑如何使用约束测量可测量项以及总宽度和总高度。这需要一点实践,但您可以获得更多独特的设计,而且工作量更少(更优化)的可组合比现成的。这里我设置为最大宽度布局,所以无论你分配的宽度是整个宽度。它's为了演示,您可以根据需要在
layout
中设置最大宽度或高度。