Jetpack compose 中的 ConstraintLayout 问题

Question

我正在尝试使用 Jetpack Compose 设置一个约束布局，顶部是应用栏，中间是列表，底部是一些 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。
您也可以使用 Scaffold 中的 bottomBar 来显示按钮。

类似于：

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 中使用它们，但在这种情况下，您必须在 LazyColumn. 中应用 height = Dimension.fillToConstraints 作为约束类似于：

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

Jetpack compose 中的 ConstraintLayout 问题

Issue with ConstraintLayout in Jetpack compose

android

android-constraintlayout

android-jetpack-compose