将带有约束布局的子可组合函数添加到jetpack compose中的父约束布局中

Question

我计划为我的应用程序使用约束布局。我想将具有约束布局的子可组合项包含到父可组合项中。当我尝试像正常的包含方式一样进行操作时，它不起作用，我尝试如下。我对 jetpack compose 很陌生，任何人都可以帮助我如何实现这一目标。

主要活动.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ConstraintLayoutTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainNavScreen(Modifier)
                }
            }
        }
    }
}

@Composable
fun MainNavScreen(modifier: Modifier) {

    ConstraintLayout(
        modifier = Modifier
            .background(Color.Cyan)
    ) {
        val (
            child,
            doubleUpArrow,
            titleOne,
            titleTwo,
            arrowDown,
        ) = createRefs()

        LazyColumn(){
            items(50){
                Card(
                    modifier
                        .fillMaxSize()
                        .padding(5.dp)
                ) {
                    Text(text = "Card List Items goes here",modifier.padding(10.dp))
                }
            }
        }

        BottomLayout()

    }
}

@Composable
fun BottomLayout() {
    ConstraintLayout(
        modifier = Modifier
            .constrainAs(child) {
                bottom.linkTo(parent.bottom, margin = 10.dp)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
            .background(Color.Red)
            .padding(start = 10.dp, end = 10.dp, top = 10.dp, bottom = 10.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.baseline_keyboard_double_arrow_up_24),
            contentDescription =null,
            modifier = Modifier
                .constrainAs(doubleUpArrow) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }

        )
        Text(
            text = "title one goes",
            modifier = Modifier
                .constrainAs(titleOne){
                    start.linkTo(doubleUpArrow.end, margin = 5.dp)
                    top.linkTo(parent.top)
                    end.linkTo(arrowDown.start, margin = 10.dp)
                }
        )
        Text(
            text = "title two goes",
            modifier = Modifier
                .constrainAs(titleTwo){
                    start.linkTo(doubleUpArrow.end, margin = 5.dp)
                    top.linkTo(titleOne.bottom)
                }
        )
        Image(
            painter = painterResource(id = R.drawable.baseline_keyboard_arrow_down_24),
            contentDescription =null,
            modifier = Modifier
                .constrainAs(arrowDown) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                }

        )

    }
}

Answer 1

您正在使用

createRefs

可组合项中的

MainNavScreen

创建一些约束，然后尝试访问

BottomLayout

可组合项中的引用变量。

这不起作用，因为在父 Composable 中声明的变量不会在子 Composable 中自动可用。可组合项基本上是 Kotlin 函数，因此当您希望嵌套函数从调用函数访问值时，调用函数必须将这些值作为参数传递给嵌套函数。

但是我认为你可能甚至不需要两个

ConstraintLayout

。请尝试按如下方式修改您的代码，并报告是否满足您的要求：

@Composable
fun MainNavScreen(modifier: Modifier) {

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Cyan)
    ) {

        LazyColumn(modifier = Modifier.weight(1f)) {
            items(50){
                Card(
                    modifier
                        .fillMaxWidth()
                        .padding(5.dp)
                ) {
                    Text(text = "Card List Items goes here",modifier.padding(10.dp))
                }
            }
        }

        BottomLayout()
    }
}

通过使用

weight

修改器，

LazyColumn

将填充

BottomBar

上方的所有剩余空间。

然后按如下方式更新您的

BottomBar

：

@Composable
fun BottomLayout() {

    val (
        child,
        doubleUpArrow,
        titleOne,
        titleTwo,
        arrowDown,
    ) = createRefs()

    ConstraintLayout(
        modifier = Modifier
            .background(Color.Red)
            .padding(start = 10.dp, end = 10.dp, top = 10.dp, bottom = 10.dp)
    ) {
        // Images, Texts...
    }
}