[英]Jetpack Compose Text and Image get overlapped inside Column layout issue
I am using Jetpack Compose
for designing dynamic Layout inside android app.我正在使用
Jetpack Compose
在 android 应用程序中设计动态布局。 Column
layout is used to place elements like Vertical
layout. Column
布局用于放置元素,如Vertical
布局。 This kind of behaviour is achieved using LinearLayout
orientation Vertical
usage without compose.这种行为是使用
LinearLayout
orientation Vertical
usage without compose 实现的。 Inside Column I have added one Image
on top and one text I want to display below it.在 Column 中,我在顶部添加了一张
Image
,并在其下方添加了一张文字。 But after placing the Text inside the Compose Column
layout it is getting overlapped.但是在将文本放入 Compose
Column
布局后,它会重叠。 How to resolve this.如何解决这个问题。 The code for adding
Image
and Text
is as follows添加
Image
和Text
的代码如下
@Composable
fun GreetingSectionExperimental(
name: String = "Philipp"
) {
//var text by remember { mutableStateOf(TextFieldValue("")) }
Column(
verticalArrangement = Arrangement.Top,
modifier = Modifier.fillMaxSize()
) {
Image(
painterResource(id = R.drawable.ic_launcher_background),
modifier = Modifier
.fillMaxWidth()
.height(80.dp).offset(0.dp,35.dp),
alignment = Alignment.Center,
contentDescription = ""
)
Text(
text = "Login / Sign Up",
Modifier.padding(10.dp).align(CenterHorizontally),
color = textColor, fontSize = 18.sp,
fontWeight = FontWeight.SemiBold
)
}
}
I am getting output as我得到 output 作为
How to resolve this?如何解决这个问题? Inside the current what is missing or
Column
does not support different kind of elements.当前内部缺少什么或
Column
不支持不同类型的元素。
You need to remove the property "Offset" from your image the code should looks like您需要从图像中删除属性“Offset”,代码应该看起来像
@Composable
fun GreetingSectionExperimental(
name: String = "Philipp"
) {
//var text by remember { mutableStateOf(TextFieldValue("")) }
Column(
verticalArrangement = Arrangement.Top,
modifier = Modifier.fillMaxSize()
) {
Image(
painterResource(id = R.drawable.ic_launcher_background),
modifier = Modifier
.fillMaxWidth()
.height(80.dp), //Remove the offset here
alignment = Alignment.Center,
contentDescription = ""
)
Text(
text = "Login / Sign Up",
Modifier.padding(10.dp).align(CenterHorizontally),
color = textColor, fontSize = 18.sp,
fontWeight = FontWeight.SemiBold
)
}
}
Best solution is to use Spacer(modifier = Modifier.height(20.dp))
.最佳解决方案是使用
Spacer(modifier = Modifier.height(20.dp))
。 It will create space between the those Elements this in between this is added.它将在添加的那些元素之间创建空间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.