标签: android-jetpack-compose-layout

我有一个文本和一个图标可组合项。我希望图标粘在可组合项的右侧。这是我的代码：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp)
) {
    Text(
        text = subjectName,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        textAlign = TextAlign.Center,
    )
    Icon(
        painter = painterResource(id = R.drawable.ic_arrow_drop_down),
        contentDescription = null
    )
}

对应的UI是：

这看起来不错，但是当文本太长并且出现溢出时，图标会像这样脱离屏幕：

相反，我想让它看起来像这样：

我尝试给Text可组合项一个weight(1f)修饰符，以便将图标放在第一位。现在，溢出的文本看起来很好，但是当文本较短时，图标仍然放置在末尾，因为文本占据了整个剩余宽度：

我如何在这里获得所需的 UI（图 1 和 3）？

我连续有两个文本：

Row {
    Text(
        "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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        maxLines = 1,
        style = MaterialTheme.typography.h4,
        modifier …

是否有一种简单的方法，无需借助手动布局或约束布局，即可将列/行的子项相对于彼此对齐，而与列/行内容对齐无关？

这就是我想要实现的目标：拥有一个将其内容向右对齐的列。但孩子们彼此之间居中对齐。

@Composable
fun TopAppBar(
    name: String,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(20.dp, 0.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Icon(
            imageVector = Icons.Default.ArrowBack,
            contentDescription = "Back",
            tint = Color.Black,
            modifier = Modifier.size(24.dp)
        )
        Text(
            text = name,
            overflow = TextOverflow.Ellipsis,
            fontWeight = FontWeight.Bold,
            fontSize = 20.sp,
            maxLines = 1
        )

        Row {
            Icon(
                painter = painterResource(id = R.drawable.ic_bell),
                contentDescription = null,
                tint = Color.Black,
                modifier = Modifier
                    .padding(8.dp, 8.dp)
                    .size(24.dp)
            )
            Icon(
                painter …

我想使用 chainStyle.Packed 将标题和描述文本链接到以图像为中心的位置，如何在 jetpack compose 中实现此目的。

当我使用createVerticalChain()其相对于父容器的创建链时，这不是我想要的，有没有办法实现这一点？

我有一个RecyclerView托管使用 Jetpack Compose 渲染的项目。物品的高度各不相同。从列表顶部滚动到底部时，滚动很流畅。但是，当滚动回顶部时，当屏幕顶部出现的下一个项目的高度与屏幕顶部的先前项目的高度不同时，列表中的项目会跳转。

每个的布局高度ComposeView设置为WRAP_CONTENT。以前的 XML 布局在两个方向上都能平滑滚动。

我正在使用 Compose 1.2.0 和 RecyclerView 1.3.0-beta01。

有没有办法让两个方向平滑滚动？

更新：我在这里报告了一个错误，并在这里提供了一个演示该问题的示例项目。

I've been trying to build a list with a Card in it formatted like this:

The difficulty here is that the title e.g. "Bread" and ingredient name e.g. "Flour" can be very long and thus I want to have an ellipsis to keep things manageable i.e. "My Long Flour name" will be displayed as "My Long Flou..." or as much space as is allowed. The picture size and the gram and percent widths are constant .dp values.

Ellipsis worked fine …

我想删除 中特定子项目的侧边填充LazyColum。我在这篇文章的帮助下用 xml 解决了这个问题。我在jetpack compose中有同样的场景。我正在使用Material 3compose_bom = "2022.11.00"的BOM 版本。

    Card(shape = RoundedCornerShape(6.dp),) {
        Column(modifier.background(Color.White)) {
            LazyColumn(
                contentPadding = PaddingValues(all =16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                item {
                    Text(
                        text = "Device Header",
                        modifier = Modifier.padding(top = 10.dp),
                        style = headerTextStyle
                    )
                }

                item {
                    Divider() // remove padding from side in here
                }
            }
        }
    }