[英]Issue with ConstraintLayout in Jetpack compose
I am trying to setup a constraint layout with appbar at top, list in middle and some xml resource at bottom using jetpack compose.我正在尝试使用jetpack compose设置一个约束布局,顶部是appbar,中间是列表,底部是一些xml资源。 below is my code
下面是我的代码
ConstraintLayout(
modifier = Modifier
.fillMaxWidth()
){
val (appbar, listView, btnBackHome) = createRefs()
TopAppBar(
modifier = Modifier
.constrainAs(appbar){
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
},
title = { Text(text = "My Custom AppBar") }
)
LazyColumn(
modifier = Modifier
.constrainAs(listView) {
top.linkTo(appbar.bottom)
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(btnBackHome.top)
}
.fillMaxWidth()
//.fillMaxHeight()
) {
items(listOfPersons.value) { item ->
MySimpleListItem(itemViewPerson = item)
}
}
AndroidViewBinding(
DummyResourceFileBinding::inflate,
modifier = Modifier
.constrainAs(btnBackHome) {
bottom.linkTo(parent.bottom)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
) {
btnBackHomeNormalView.setOnClickListener {
Toast.makeText(context, "click me", Toast.LENGTH_SHORT).show()
}
context.supportFragmentManager.beginTransaction()
.replace(R.id.fragmentView, DummyPlaceHolderFragment.newInstance("", ""))
.commit()
}
}
but there seems to be some issue with list constraints.但列表约束似乎存在一些问题。 its not properly setting up, even if i have used both top to bottom of appBar and bottom to top of btnBackHome.
它没有正确设置,即使我使用了 appBar 的从上到下和 btnBackHome 的从下到上。
when i remove one of constraints either top or bottom, and keep only one like当我删除顶部或底部的约束之一,只保留一个像
LazyColumn(
modifier = Modifier
.constrainAs(listView) {
top.linkTo(appbar.bottom)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.fillMaxWidth()
//.fillMaxHeight()
) {
items(listOfPersons.value) { item ->
MySimpleListItem(itemViewPerson = item)
}
}
then the specified constrain works, but still i need to set both top and bottom.然后指定的约束有效,但我仍然需要设置顶部和底部。 Also, i have tried setting both top and bottom with height being zero, but that makes the list taking 0 height and it seems to ignore constraints.
另外,我尝试将顶部和底部都设置为高度为零,但这使得列表高度为 0,并且似乎忽略了约束。
Move the TopAppBar
in a Scaffold
.在
Scaffold
中移动TopAppBar
。
Also you can use the bottomBar
in the Scaffold
to display the buttons.您也可以使用
Scaffold
中的bottomBar
来显示按钮。
Something like:就像是:
Scaffold(
topBar = {
TopAppBar( title= {Text(text = "My Custom AppBar")})
},
bottomBar = {
Row(modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center) {
//Buttons...
}
}
) { innerPadding ->
ConstraintLayout(
modifier = Modifier
.fillMaxWidth()
.padding(innerPadding)
) {
val (listView) = createRefs()
LazyColumn(
modifier = Modifier
.constrainAs(listView) {
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(btnBackHome.top)
}
.fillMaxWidth()
) {
items(itemsList) { item ->
Text("item")
}
}
//....
}
}
As alternative for the buttons you can use them in the ConstraintLayout
but in this case you have to apply height = Dimension.fillToConstraints
as constrain in the LazyColumn.
作为按钮的替代方案,您可以在
ConstraintLayout
中使用它们,但在这种情况下,您必须应用height = Dimension.fillToConstraints
作为LazyColumn.
Something like:就像是:
LazyColumn(
modifier = Modifier
.constrainAs(listView) {
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(btnBackHome.top)
height = Dimension.fillToConstraints
}
.fillMaxWidth()
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.