android - Jetpack compose 中的 ConstraintLayout 问题

Question

我正在尝试使用jetpack compose设置一个约束布局，顶部是appbar，中间是列表，底部是一些xml资源。下面是我的代码

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()
            }
        }

但列表约束似乎存在一些问题。它没有正确设置，即使我使用了 appBar 的从上到下和 btnBackHome 的从下到上。

当我删除顶部或底部的约束之一，只保留一个像

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)
                }
            }

然后指定的约束有效，但我仍然需要设置顶部和底部。另外，我尝试将顶部和底部都设置为高度为零，但这使得列表高度为 0，并且似乎忽略了约束。

Answer 1

移动TopAppBar在 Scaffold .
您也可以使用 bottomBar在 Scaffold显示按钮。
就像是:

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")
            }
        }
        //....
    }
}

作为按钮的替代品，您可以在 ConstraintLayout 中使用它们。但在这种情况下，您必须申请 height = Dimension.fillToConstraints作为 LazyColumn. 中的约束
就像是:

   LazyColumn(
        modifier = Modifier
            .constrainAs(listView) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(btnBackHome.top)
                height = Dimension.fillToConstraints
            }
            .fillMaxWidth()
    )