代码之家 › 专栏 › 技术社区 › Antony Lajes

可组合项目离开宽度视图

android-jetpack-compose material-ui android-studio kotlin

Antony Lajes · 技术社区 · 1 年前

我正在创建一个用于研究的应用程序,但我遇到了一个“错误”。我寻求帮助,在这里和其他网站上看到了一些帖子,但对我来说什么都不管用。

当正文文本“更大”时,可组合行中的最后一个项目将从宽度视图中消失,如您所见。我可以点击该项目,但它是不可见的:


import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Checkbox
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.cleanarchtodo.ui.theme.CleanArchToDoTheme

@Composable
fun ToDoCard(
    modifier: Modifier = Modifier,
    text: String = "",
    checked: Boolean = false,
    onCheckedChange: () -> Unit,

    ) {
    ElevatedCard(
        modifier = modifier
            .fillMaxWidth()
            .padding(
                vertical = 4.dp,
                horizontal = 12.dp
            ),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 8.dp
        )
    ) {
        Row(modifier = Modifier
            .fillMaxWidth(),
            verticalAlignment = Alignment.Top,
            horizontalArrangement = Arrangement.Start
        ) {
            Checkbox(
                checked = checked,
                onCheckedChange = { onCheckedChange() }
            )
            Text(
                text = text,
                fontSize = 20.sp,
                maxLines = 3,
                overflow = TextOverflow.Ellipsis
            )
            Spacer(modifier = Modifier.weight(1f))
            IconButton(
                onClick = { }
            ) {
                Icon(
                    imageVector = Icons.Default.Delete,
                    contentDescription = "Delete ToDo"
                )
            }
        }
    }
}

@Preview(
    showBackground = true
)
@Composable
fun PreviewToDoCard() {
    CleanArchToDoTheme {
        ToDoCard(
            text = "Buy bananas Buy bananas Buy bananas",
            onCheckedChange = {}
        )
    }
}

有人能帮我吗?

2 回复 | 直到 1 年前

lyrjie 1 年前

Text 小部件的大小会增加以适应其内部文本的大小,直到超出父宽度为止。对于像您的情况一样非常长的文本,右侧的按钮没有空间
要解决此问题,您可以添加 Modifier.weight(1f) 到您的文本,因此它占用了所有可用空间,但被布置在包括按钮在内的所有其他元素之后。同样使用这种方法,您可以放弃 Spacer(Modifier.weight(1f) 之后 文本 ,因为新 文本 基本上结合了这两个功能

@Composable
fun ToDoCard(
    modifier: Modifier = Modifier,
    text: String = "",
    checked: Boolean = false,
    onCheckedChange: () -> Unit,

    ) {
    ElevatedCard(
        modifier = modifier
            .fillMaxWidth()
            .padding(
                vertical = 4.dp,
                horizontal = 12.dp
            ),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 8.dp
        )
    ) {
        Row(modifier = Modifier
            .fillMaxWidth(),
            verticalAlignment = Alignment.Top,
            horizontalArrangement = Arrangement.Start
        ) {
            Checkbox(
                checked = checked,
                onCheckedChange = { onCheckedChange() }
            )
            Text(
                text = text,
                fontSize = 20.sp,
                maxLines = 3,
                overflow = TextOverflow.Ellipsis,
                textAlign = TextAlign.Start,
                modifier = Modifier.weight(1f),
            )
            IconButton(
                onClick = { }
            ) {
                Icon(
                    imageVector = Icons.Default.Delete,
                    contentDescription = "Delete ToDo"
                )
            }
        }
    }

Thracian 1 年前

这是因为 Row 和 Column 当测量可堆肥时,使用总空间——其他孩子使用的空间。自从 Text 可以用整个剩余空间进行测量 IconButton 在0和maxWidth之间测量0的maxWidth,它得到0的宽度。

解决方案是使用 Modifier.weight(1f, fill = false) 测量 文本 最后的有重量的堆肥是在其他堆肥之后测量的。但自从你使用 Spacer 使用Modifier.weight空间将平分。

为此,你可以这样改变它。

@Composable
fun ToDoCard(
    modifier: Modifier = Modifier,
    text: String = "",
    checked: Boolean = false,
    onCheckedChange: () -> Unit,

    ) {
    ElevatedCard(
        modifier = modifier
            .fillMaxWidth()
            .padding(
                vertical = 4.dp,
                horizontal = 12.dp
            ),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 8.dp
        )
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            verticalAlignment = Alignment.Top,
            horizontalArrangement = Arrangement.Start
        ) {
            Row(
                modifier = Modifier.weight(1f, false)
            ) {
                Checkbox(
                    checked = checked,
                    onCheckedChange = { onCheckedChange() }
                )
                Text(
                    text = text,
                    fontSize = 20.sp,
                    maxLines = 3,
                    overflow = TextOverflow.Ellipsis
                )
                Spacer(modifier = Modifier.weight(1f))
            }
            IconButton(
                onClick = { }
            ) {
                Icon(
                    imageVector = Icons.Default.Delete,
                    contentDescription = "Delete ToDo"
                )
            }
        }
    }
}

通过如上所述进行更改,行优先度量 图标按钮 则测量内部行,因为内部使用的间隔符会填充。当文本较小时,它会增加宽度以匹配外部行。