android Jetpack组合约束布局约束未按预期链接

p1iqtdky 于 2023-01-19 发布在 Android

关注(0)|答案(2)|浏览(142)

我在Jetpack Compose中使用constrainAs来约束选项列表。
1.在文本的左边有一个空格，我相信这是由于我将文本框的开头限制在父级，结尾限制在开关的开头，但是我需要文本像第二个选项中所示的那样换行，所以我认为我需要这两个约束。我已经尝试了几个约束，但无法弄清楚如何使文本左对齐并进行换行。该问题在图像中以红色显示。
1.另外，我不知道如何在标题和描述之间保持相同的间距。这在图片中以蓝色显示。我将描述限制在标题的底部，但当它换行时，文本框变大并向上移动，因为文本居中，所以会产生不同的间距。
我附上了一张图片和代码.

@Composable
fun SwitchRow(title: String, description: String, enabled: Boolean) {
    Box(modifier = Modifier
        .height(66.dp)
        .fillMaxWidth()
        .padding(top = 12.dp, start = 16.dp, end = 8.dp, bottom = 12.dp)
    ) {
        ConstraintLayout(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            val (titleText, descriptionText, switch) = createRefs()
            Text(
                text = title,
                modifier = Modifier
                    .padding(bottom = 16.dp)
                    .constrainAs(titleText) {
                        start.linkTo(parent.start)
                        top.linkTo(parent.top)
                    },
                color = MyAppTheme.colors.ice,
                fontSize = 18.sp,
                fontFamily = FontFamily(Font(R.font.barlow_regular, FontWeight.Normal)),
                textAlign = TextAlign.Start
            )
            Text(
                text = description,
                modifier = Modifier
                    .wrapContentSize()
                    .constrainAs(descriptionText) {
                        start.linkTo(parent.start)
                        end.linkTo(switch.start)
                        top.linkTo(titleText.bottom)
                        bottom.linkTo(parent.bottom)
                        width = Dimension.fillToConstraints
                    },
                color = MyAppTheme.colors.chalk,
                fontSize = 14.sp,
                fontFamily = FontFamily(Font(R.font.barlow_regular, FontWeight.Normal)),
                maxLines = 2,
                textAlign = TextAlign.Start
            )

            val checkedState = remember { mutableStateOf(true) }
            Switch(modifier = Modifier
                .background(color = Color.Gray)
                .constrainAs(switch) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                },
                enabled = enabled,
                checked = checkedState.value,
                onCheckedChange = { checkedState.value = it },
                colors = SwitchDefaults.colors(
                    checkedThumbColor = MyAppTheme.colors.envy,
                    checkedTrackColor = MyAppTheme.colors.darkerEnvy,
                    uncheckedThumbColor = MyAppTheme.colors.navy,
                    uncheckedTrackColor = MyAppTheme.colors.darkerNavy,
                ),
            )
        }
    }
}

android

来源：https://stackoverflow.com/questions/75151651/jetpack-compose-constraint-layout-constraints-not-linking-as-expected

2条答案

按热度按时间

li9yvcax1#

第一节第一节第一节第一节第一次
我复制并粘贴到我的编辑器的代码，它给了我很多错误，我无法解决。所以我不能让你的副本和过去的答案...对不起。
但是！仔细看！
您需要考虑的唯一内容是Row（）和Columns（）
把这种心态插入到你的思维方式中，它会让你的生活变得轻松。如果你熟悉Web开发，就像CSS一样（因为我看到你写了证明内容）。
请看下面这张照片。

正如您在上图中所看到的，行有两个主要属性，即按照您所说的那样调整内容。并且您可以使用ctrl + space列出所有属性
第一个是horizontalArrangement =，第二个是verticalAlignment =，如下面的代码所示。

Row(
                horizontalArrangement = Arrangement.Start,  // the properties you are looking for  in a Row()
                verticalAlignment = Alignment.CenterVertically, // // the properties you are looking for  in a Row()
            )

这是非常令人困惑的，因为一个列也有非常相似的属性来证明它的内容！

Column(
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                )

第一个是verticalArrangement =，第二个是horizontalAlignment =，它们是不同的词，所以在处理这个设计时要集中注意力，这样你就不会混淆你自己了！
我在每一行和每一列都包含了边界的属性，这样你就可以看到我的思维方式。
专业提示！使用一个懒惰的列以便窗口大小可以是动态的给你的使用.
在你玩这个之后，你会更容易制作。

改性剂的X1 M5 N1 X性质解决了这个问题。
我给了左列85%和切换按钮15%的百分比，你会看到在代码中修改它，如果你需要这样做。
我为您创建了一个最简单的例子，我可以使适合您的需要，您可以为您修改，如果您遇到任何更多的问题，随时评论和询问。

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.lilmokeq.ui.theme.LilMokeQTheme

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

@Composable
fun NotificationCenter() {
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 12.dp, start = 16.dp, end = 8.dp, bottom = 12.dp)
            .background(color = Color.White)
    ) {
        item {
            // create a row with a X icon on the left and a title
            // right next to it with a little padding
            Row(
                horizontalArrangement = Arrangement.Start,  // the properties you are looking for  in a Row()
                verticalAlignment = Alignment.CenterVertically, // // the properties you are looking for  in a Row()
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = Color.White)
                    .border(1.dp, Color.Black)

            ) {
                IconButton(
                    onClick = { /*TODO*/ }, modifier = Modifier.clip(CircleShape)
                ) {
                    Icon(
                        imageVector = Icons.Default.Close,
                        contentDescription = "Close",
                        tint = Color.Black
                    )
                }
                Text(
                    text = "Notifications Preferences",
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold,
//                    fontFamily = FontFamily(Font(R.font.roboto)), // for some reason i have a problem with this line
                    modifier = Modifier.padding(start = 8.dp)
                )
            }

            Spacer(modifier = Modifier.height(8.dp))
            Card(
                elevation = 8.dp,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 8.dp, end = 8.dp)
                    .background(color = Color.White)
            ) {
                // create a row that will contain two columns , the left column will contain the text "Your Account" and under it the text "important notifications about your account" and the right column will contain a switch button.
                Row(
                    horizontalArrangement = Arrangement.SpaceAround,
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.border(1.dp, Color.Black)
                ) {
                    Column(
                        // the left column
                        verticalArrangement = Arrangement.Top,
                        horizontalAlignment = Alignment.Start, // useful to justify content
                        modifier = Modifier
                            .background(color = Color.White)
                            .border(1.dp, Color.Black)
                            // set a width to the column
                            .weight(0.85f)

                    ) {
                        Text(
                            text = "Your Account",
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier.padding(start = 8.dp)
                        )
                        Text(
                            text = "important notifications about your account" + " and your account settings" + " and more information about" + "interesting stuff" + "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis  ",
                            fontSize = 14.sp,
                            fontWeight = FontWeight.Normal,
                            modifier = Modifier.padding(start = 8.dp, end = 8.dp)

                        )
                    }
                    Column(
                        // the right column
                        horizontalAlignment = Alignment.End,
                        modifier = Modifier
                            .background(color = Color.White)
                            .border(1.dp, Color.Black)
                            // set a width to the column
                            .weight(0.15f)

                    ) {
                        Switch(
                            checked = true,
                            onCheckedChange = { /*TODO*/ },
                            modifier = Modifier
                                .padding(end = 8.dp)
                                .border(1.dp, Color.Black)
                        )
                    }
                } // end of row
            } // end of card
            Spacer(modifier = Modifier.height(8.dp))
            Card(
                elevation = 8.dp,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 8.dp, end = 8.dp)
                    .background(color = Color.White)
            ) {
                // create a row that will contain two columns , the left column will contain the text "Your Account" and under it the text "important notifications about your account" and the right column will contain a switch button.
                Row(
                    horizontalArrangement = Arrangement.SpaceAround,
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.border(1.dp, Color.Black)
                ) {
                    Column(
                        // the left column
                        verticalArrangement = Arrangement.Top,
                        horizontalAlignment = Alignment.Start, // useful to justify content
                        modifier = Modifier
                            .background(color = Color.White)
                            .border(1.dp, Color.Black)
                            // set a width to the column
                            .weight(0.85f)

                    ) {
                        Text(
                            text = "Second notification",
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier.padding(start = 8.dp)
                        )
                        Text(
                            text = "important notifications about your account" + " and your account settings" + " and more information about" + "interesting stuff" + "lorem ipsum dolor sit amet, consectetur adipiscing elit,",
                            fontSize = 14.sp,
                            fontWeight = FontWeight.Normal,
                            modifier = Modifier.padding(start = 8.dp, end = 8.dp)

                        )
                    }
                    Column(
                        // the right column
                        horizontalAlignment = Alignment.End,
                        modifier = Modifier
                            .background(color = Color.White)
                            .border(1.dp, Color.Black)
                            // set a width to the column
                            .weight(0.15f)

                    ) {
                        Switch(
                            checked = true,
                            onCheckedChange = { /*TODO*/ },
                            modifier = Modifier
                                .padding(end = 8.dp)
                                .border(1.dp, Color.Black)
                        )
                    }
                } // end of row
            } // end of card

        }

    }
}

最终结果^
这个播放列表包含了很多信息。观看它可以获得更多关于你的设计和如何实现它们的想法。
https://www.youtube.com/watch?v=cDabx3SjuOY&list=PLQkwcJG4YTCSpJ2NLhDTHhi6XBNfk9WiC&ab_channel=PhilippLackner

赞(0）回复(0）举报 2023-01-19

xwbd5t1u2#

我认为下面的代码变化将解决你的问题，我不使用字体风格和颜色一样，你的。
要左对齐/开始对齐，必须删除.wrapContentSize（）方法。

Box(modifier = Modifier
    .height(66.dp)
    .fillMaxWidth()
    .padding(top = 12.dp, start = 16.dp, end = 8.dp, bottom = 12.dp)
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        val (titleText, descriptionText, switch) = createRefs()
        Text(
            text = title,
            modifier = Modifier
                .constrainAs(titleText) {
                    start.linkTo(parent.start)
                    top.linkTo(switch.top)
                },
            color = Color.Black,
            fontSize = 18.sp,
            textAlign = TextAlign.Start
        )
        Text(
            text = description,
            modifier = Modifier
                .constrainAs(descriptionText) {
                    start.linkTo(parent.start)
                    end.linkTo(switch.start)
                    top.linkTo(titleText.bottom)
                    width = Dimension.fillToConstraints
                },
            color = Color.Red,
            fontSize = 14.sp,
            textAlign = TextAlign.Start
        )

        val checkedState = remember { mutableStateOf(true) }
        Switch(modifier = Modifier
            .background(color = Color.Gray)
            .constrainAs(switch) {
                top.linkTo(parent.top)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            },
            enabled = enabled,
            checked = checkedState.value,
            onCheckedChange = { checkedState.value = it },
            colors = SwitchDefaults.colors(
                checkedThumbColor = Color.Green,
                checkedTrackColor = Color.Gray,
                uncheckedThumbColor = Color.Cyan,
                uncheckedTrackColor = Color.DarkGray,
            ),
        )
    }
}

但我认为你必须改变你的函数约束结构如下代码

@Composable
fun SwitchRow(title: String, description: String, enabled: Boolean) {
    Box(
        contentAlignment = Alignment.TopStart,
        modifier = Modifier
            .height(85.dp)
            .padding(8.dp)
    ) {
        ConstraintLayout(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            val (descriptionText, switch) = createRefs()
            Column(
                horizontalAlignment = Alignment.Start,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 25.dp)
                    .constrainAs(descriptionText) {
                        top.linkTo(parent.top)
                        start.linkTo(parent.start)
                        end.linkTo(switch.start)
                    },
            ) {
                Text(
                    text = title,
                    color = Color.Black,
                    fontSize = 18.sp,
                    textAlign = TextAlign.Start
                )
                Spacer(modifier = Modifier.height(2.dp))
                Text(
                    text = description,
                    color = Color.Red,
                    fontSize = 14.sp,
                    textAlign = TextAlign.Start,
                    maxLines = 2
                )
            }
            val checkedState = remember { mutableStateOf(true) }
            Switch(
                modifier = Modifier
                    .background(color = Color.Gray)
                    .constrainAs(switch) {
                        top.linkTo(parent.top)
                        end.linkTo(parent.end)
                    },
                enabled = enabled,
                checked = checkedState.value,
                onCheckedChange = { checkedState.value = it },
                colors = SwitchDefaults.colors(
                    checkedThumbColor = Color.Green,
                    checkedTrackColor = Color.Gray,
                    uncheckedThumbColor = Color.Cyan,
                    uncheckedTrackColor = Color.DarkGray,
                ),
            )
        }
    }
}

在这两个代码中，你必须根据自己的需要改变填充和间距。

赞(0）回复(0）举报 2023-01-19

我来回答

android Jetpack组合约束布局约束未按预期链接

2条答案

相关问题

热门标签

最新问答