android 对齐jetpack组合中的行项目

nlejzf6q  于 2023-02-02  发布在  Android
关注(0)|答案(2)|浏览(153)

我想这样划

    • 预期产出**

以及

我试过这段代码

    • 带项目的除数**
@Composable
fun DividerWithItem(
    modifier: Modifier = Modifier,
    index: () -> Int,
    itemName: String,
    lastIndex: () -> Int,
    moreRowContent: @Composable RowScope.() -> Unit,
) {
    Column {
        if (index() == 0) {
            Divider(color = Cloudy, thickness = dimensionResource(R.dimen.separator_height_width))
        }
        Row(
            modifier = modifier,
            horizontalArrangement = Arrangement.spacedBy(4.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text(
                text = itemName,
                modifier = Modifier.padding(vertical = 12.dp),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
            moreRowContent()
        }
        if (index() <= lastIndex()) {
            Divider(color = Cloudy, thickness = 1.dp)
        }
    }
}
    • 血压选项标签**
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyItemScope.BpmOptionsLabel(
    index: () -> Int,
    optionName: String,
    lastIndex: () -> Int
) {
    DividerWithItem(
        modifier = Modifier
            .fillMaxSize()
            .animateItemPlacement(),
        index = index,
        itemName = optionName,
        lastIndex = lastIndex
    ) {
        Image(
            modifier = Modifier.weight(.3f),
            painter = painterResource(R.drawable.ic_menu),
            contentDescription = null,
        )
    }
}
    • 血压选项标签预览**
@Preview(showBackground = true)
@Composable
fun BpmOptionsLabelPreview() {
    LazyColumn {
        item {
            BpmOptionsLabel(
                index = { 0 },
                "Item item item item item m 1",
                lastIndex = { 1 }
            )
        }
    }
}
    • 实际产量**

唯一的问题是TextImage项目位置不正确

sycxhyv7

sycxhyv71#

DividerWithItem中,将weight(1f)应用于Text

Text(
    text = itemName,
    modifier = Modifier.padding(vertical = 12.dp).weight(1f),
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)
moreRowContent()

并在LazyItemScope.BpmOptionsLabel中从Image中删除weight修饰符:

Image(
    //modifier = Modifier.weight(.3f),
    painter = painterResource(R.drawable.ic_menu_gallery),
    contentDescription = null
)

如果要增加图像占用的空间,请使用padding修改器:

Image(
    //...
    modifier = Modifier.padding(horizontal = 20.dp)
)

uhry853o

uhry853o2#

你可以试试这个,只要增加文本的重量,图像就会根据它的大小按照它需要的剩余大小。

@Preview(showBackground = true)
@Composable
fun TextOverflow(){
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        Text(
            modifier = Modifier.weight(1f),
            text = "This is should be long-long text that ever you see today, I even don't know how far this text will be ended, so just enjoy reading while you code.",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Icon(imageVector = Icons.Rounded.MoreHoriz, contentDescription = "")
    }
}

结果:

相关问题