我们如何在喷气背包组合中实现这一点
我在做这样的事
Button(
elevation = ButtonDefaults.elevation(
defaultElevation = 0.dp,
pressedElevation = 8.dp,
disabledElevation = 0.dp
),
onClick = { onClick },
shape = RoundedCornerShape(28.dp),
modifier = modifier
.fillMaxWidth()
.shadow(0.dp),
contentPadding = PaddingValues(15.dp),
colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
border = BorderStroke(1.dp, Color.Grey)
) {
Box(modifier = modifier.fillMaxWidth(),
contentAlignment = Alignment.Center) {
Icon(
imageVector = imageVector,
modifier = Modifier
.size(18.dp),
contentDescription = "drawable icons",
tint = Color.Unspecified
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = buttonText,
color = Color.Black,
textAlign = TextAlign.Center
)
}
}
正如你所看到的谷歌标志是刚刚离开的文字,我需要它在开始的方块,所以我怎么能做到这一点。
5条答案
按热度按时间1hdlvixo1#
您可以在
Icon's
Modifier
参数上使用align(Alignment.CenterStart)
,以使图标围绕Box Composable
的开始居中。此对齐方式将优先于框的对齐参数。您还可以删除
Spacer
组合对象,因为Box
布局子对象在组合顺序中是一个堆叠在另一个之上的,所以Spacer
组合对象基本上位于Text
组合对象的下方,处于中心位置。如果您希望在
Icon
和Text
之间有一些空间,可以在Icon
周围使用一些填充。试试这个(它对我很有效):
t9eec4r02#
8cdiaqws3#
正如其他答案中所建议的,您可以使用
Box
Package 内容。或者,您可以简单地使用
Button
的**RowScope
**,而不使用任何容器。只需将
weight(1f)
修改器应用于Text
和offset(x=- iconWidth/2)
。比如:
如果要使用
Box
,请删除Box
中的contentAlignment = Alignment.Center
并用途:ccgok5k54#
Box
不提供边界,所以对于较长的文本,它会导致重叠。Row
对我来说更好。另外,你可以在这里使用Spacer
,这对Box
来说是不可能的。在我的例子中,我使用spacedBy
作为Spacer
的替代:x759pob25#