英文:
What is the working logic of Row Arrangement in Android jetpack compose?
问题
我一直在学习和开发Android Jetpack Compose,有些东西我不太了解,对此感到困惑。我想知道的一件事是,我试图在屏幕的左上角放置一个返回按钮,中间放置一个文本。最初我写的代码是这样的:
Row(modifier = Modifier
.padding(5.dp)
.fillMaxWidth()) {
Image(
modifier = Modifier
.clickable {
onBackClick()
}
.padding(4.dp),
alignment = Alignment.CenterStart,
painter = painterResource(id = R.drawable.ic_back),
contentDescription = "back")
Row(
horizontalArrangement = Arrangement.Center){
Text(text = "Help")
}
}
因为我在第一个Row中使用了modifier.FillMaxWidth,所以我在第二个Row中没有使用,因为它有一个子组件,我认为这是不必要的。我在第二个Row中使用了horizontalArrangement = Arrangement.Center来使Text居中对齐,但是即使我这样做了,返回按钮和文本仍然会并排显示在左上角。
然而,当我像这样重新编写代码时,当我在第二个Row中添加了modifier.FillMaxWidth时,它正常工作了。
Row(modifier = Modifier
.padding(5.dp)
.fillMaxWidth()) {
Image(
modifier = Modifier
.clickable {
onBackClick()
}
.padding(4.dp),
alignment = Alignment.CenterStart,
painter = painterResource(id = R.drawable.ic_back),
contentDescription = "back")
Row(modifier = Modifier.fillMaxWidth(), // <----
horizontalArrangement = Arrangement.Center){
Text(text = "Yardım")
}
}
我在第二个Row组件中添加了modifier = Modifier.fillMaxWidth()。
为什么在第二个Row中需要使用Modifier.fillMaxWidth()?我们已经在父组件中使用了它?背后到底发生了什么?
英文:
I've been currently developing and learning android jetpack compose and there are some things I don't know and wonder about this. One thing I'm wondering I'm trying to do a back button positioned in the upper left corner of the screen and a text positioned in the middle. I originally wrote this code like this:
Row(modifier = Modifier
.padding(5.dp)
.fillMaxWidth()) {
Image(
modifier = Modifier
.clickable {
onBackClick()
}
.padding(4.dp),
alignment = Alignment.CenterStart,
painter = painterResource(id = R.drawable.ic_back),
contentDescription = "back")
Row(
horizontalArrangement = Arrangement.Center){
Text(text = "Help")
}
}
Since I gave a modifier.FillMaxWidth in the first Row, I didn't give it in the second because it has a child component, I thought it was unnecessary, and I gave a horizontalArrangment center in the second Row to align the Text in the middle, but even though I did this, the back button and the text appeared side by side on the upper left.
However, when I rewrote my code like this, when I added the second Row modifier.FillMaxWidth, it worked fine.
Row(modifier = Modifier
.padding(5.dp)
.fillMaxWidth()) {
Image(
modifier = Modifier
.clickable {
onBackClick()
}
.padding(4.dp),
alignment = Alignment.CenterStart,
painter = painterResource(id = R.drawable.ic_back),
contentDescription = "back")
Row(modifier = Modifier.fillMaxWidth(), // <----
horizontalArrangement = Arrangement.Center){
Text(text = "Yardım")
}
}
I added this modifier = Modifier.fillMaxWidth() second Row component
Why is it necessary to give Modifier.fillMaxWidth() on the second Row? We already give it in the parent component? what's going on in the background?
答案1
得分: 3
Row
中的 horizontalArrangement
= 布局中子元素的水平排列在可用空间中。
使用:
Row(modifier = Modifier
.fillMaxWidth()
.background(Yellow),
horizontalArrangement = Arrangement.Center
) {
Text(text = "Yardım")
}
使用:
Row(modifier = Modifier
//.fillMaxWidth()
.background(Yellow),
horizontalArrangement = Arrangement.Center
) {
Text(text = "Yardım")
}
无论如何,使用这种布局,Text(text = "Yardım")
不是在整个第一个 Row
中居中,而是只在第二个 Row
占用的空间中居中。
如果你想要在整个第一个 Row
中居中文本,可以使用 Box
作为父容器。在这种情况下,使用子元素中的 align
修饰符来指定 Box
内的特定 Alignment
。这个对齐方式将优先于 Box
的 alignment
参数。
类似于:
Box(
modifier = Modifier
.padding(5.dp)
.fillMaxWidth(),
contentAlignment = Alignment.Center,
) {
Row(modifier = Modifier
.fillMaxWidth()
.align(Alignment.Center)
.background(Yellow),
horizontalArrangement = Arrangement.Center
){
Text(text = "Yardım")
}
Image(
modifier = Modifier
.align(Alignment.CenterStart),
//.....
)
}
英文:
The horizontalArrangement
in the Row
= the horizontal arrangement of the layout's children in the available space.
Using:
Row(modifier = Modifier
.fillMaxWidth()
.background(Yellow),
horizontalArrangement = Arrangement.Center
) {
Text(text = "Yardım")
}
Using:
Row(modifier = Modifier
//.fillMaxWidth()
.background(Yellow),
horizontalArrangement = Arrangement.Center
) {
Text(text = "Yardım")
}
In any case using this layout the Text(text = "Yardım")
is not centered in the whole 1st Row
but only in the space occupied by the 2nd Row
.
If you want to center the text in the whole 1st Row
you can use a Box
as parent container.
In this case use the align
modifier in the children to a specific Alignment
within the Box
. This alignment will have priority over the Box
's alignment
parameter.
Something like:
Box(
modifier = Modifier
.padding(5.dp)
.fillMaxWidth(),
contentAlignment = Alignment.Center,
) {
Row(modifier = Modifier
.fillMaxWidth()
.align(Alignment.Center)
.background(Yellow),
horizontalArrangement = Arrangement.Center
){
Text(text = "Yardım")
}
Image(
modifier = Modifier
.align(Alignment.CenterStart),
//.....
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论