提问人:nikhilbalwani 提问时间:11/8/2023 更新时间:11/8/2023 访问量:32
如何在Jetpack Compose中将一行中的两个极端元素分别向左和向右对齐?
How to align two extreme elements in a Row to the left and the right respectively in Jetpack Compose?
问:
我在 Jetpack Compose 中有一个 CardOption 组件:
@Composable
fun CardOption(text: String) {
Column(
horizontalAlignment = Alignment.Start,
modifier = Modifier.fillMaxWidth()
) {
// Title
@OptIn(ExperimentalTextApi::class)
val fontFamily =
FontFamily(
Font(
R.font.sfprotextbold,
// variationSettings = FontVariation.Settings(
// FontVariation.weight(950),
// FontVariation.width(30f),
// FontVariation.slant(-6f),
// )
)
)
val textStyle = TextStyle(
fontFamily = fontFamily
)
Divider(
color = Color.LightGray, // You can change the color as needed
thickness = 1.dp, // You can adjust the thickness as needed
modifier = Modifier.fillMaxWidth()
)
OutlinedButton(
colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
border = BorderStroke(0.dp, Color.Transparent),
modifier = Modifier
.fillMaxWidth()
.background(
color = Color.Transparent
)
.height(100.dp),
shape = RectangleShape,
onClick = {
}
) {
Row(modifier = Modifier.fillMaxWidth()
.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween) {
Image(
painter = painterResource(id = R.drawable.black_credit_card), // Replace with your image resource
contentDescription = null, // Provide an appropriate content description
modifier = Modifier
.size(200.dp)
)
Text(
modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
color = Color.Black,
text = text,
fontSize = 15.sp,
style=textStyle
)
Text(
modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
color = Color.Black,
text = ">",
fontSize = 15.sp,
style=textStyle
)
}
}
Divider(
color = Color.LightGray, // You can change the color as needed
thickness = 1.dp, // You can adjust the thickness as needed
modifier = Modifier.fillMaxWidth()
)
}
}
它在 UI 上呈现如下:
但是,我希望图像与最左边对齐(带有次要填充),向右箭头(“>”)与最右边对齐。我尝试了各种安排:
- Arragement.Start(阿拉格门.开始)
- Arrangement.SpaceBetween (安排.空间之间)
- 排列.空间均匀
- 安排结束
但没有任何效果。我怎样才能做到这一点?
答:
0赞
imn
11/8/2023
#1
将两个文本组件放在单独的行中,如下所示:
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Image(
painter = painterResource(id = R.drawable.black_credit_card), // Replace with your image resource
contentDescription = null, // Provide an appropriate content description
modifier = Modifier
.size(200.dp)
)
Row {
Text(
modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
color = Color.Black,
text = text,
fontSize = 15.sp,
style = textStyle
)
Text(
modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
color = Color.Black,
text = ">",
fontSize = 15.sp,
style = textStyle
)
}
}
评论
0赞
nikhilbalwani
11/9/2023
让我试试这个
0赞
nikhilbalwani
11/9/2023
那行不通:|
0赞
imn
11/9/2023
您能分享一下预期设计的图片吗?
评论
Spacer(Modifier.weight(1f))
Image
Text