如何为一行设置负偏移量

Question

我正在尝试将 -16.dp 的偏移量设置为填充为 16.dp 的列中的行

只是为了演示，我有一列的起始和结束填充为 16.dp，我在列上方放置了一行，该行填充了屏幕的整个宽度，但偏移量为 -16.dp 的列内的同一行未填充整个宽度。

但不起作用，请您建议我在这里做错了什么

提前致谢 R

    Column {
            AnimatedVisibility(visible = homeScreenState.notify is AutoRefreshing || homeScreenState.notify is ManualRefreshing) {
                LinearProgressIndicator(
                    modifier.fillMaxWidth(),
                )
            }
            Row(
                modifier = Modifier
                    .background(
                        brush = Brush.horizontalGradient(
                            colors = listOf(
                                Color.White,
                                Color.Black
                            )
                        )
                    )
                    .defaultMinSize(minHeight = 42.dp)
                    .fillMaxWidth()
            ) {

            }
            Column(
                modifier = modifier
                    .background(
                        brush = Brush.horizontalGradient(
                            colors =
                            listOf(
                                md_theme_night_dream_start,
                                md_theme_night_dream_end
                            )
                        )
                    )
                    .verticalScroll(rememberScrollState())
                    .padding(
//                        vertical = 16.dp,
//                        horizontal = dimensionResource(id = R.dimen.margin_horizontal_small),
                        top = 16.dp,
                        start = 16.dp,
                        bottom = 16.dp,
                        end = 16.dp
                    )
            )
            {
                Row(
                    modifier = Modifier
                        .background(
                            brush = Brush.horizontalGradient(
                                colors = listOf(
                                    Color.White,
                                    Color.Black
                                )
                            )
                        )
                        .defaultMinSize(minHeight = 42.dp)
                        .fillMaxWidth()
                        .offset(x = -16.dp)
                ) {

                }

Answer 1

您在

Modifier.offset()

之后分配

Modifier.background()

，因为它应用于

offset

之后的修饰符，而不是背景，或

Row

内的可组合项，您将无法对背景产生任何效果，但行内的可组合项将应按其应有的方式进行偏移。

如果您在

Text

中添加

Row

或任何可组合项，将会更清楚地看到

offset

和

background

的顺序变化会改变链中可组合项和修饰符的影响方式。

@Preview
@Composable
fun Test() {
    Column {
        Row(
            modifier = Modifier
                .background(
                    brush = Brush.horizontalGradient(
                        colors = listOf(
                            Color.White,
                            Color.Black
                        )
                    )
                )
                .defaultMinSize(minHeight = 42.dp)
                .fillMaxWidth()
        ) {

        }
        Column(
            modifier = Modifier
                .background(
                    brush = Brush.horizontalGradient(
                        colors =
                        listOf(
                            Color.Red,
                            Color.Green
                        )
                    )
                )
                .verticalScroll(rememberScrollState())
                .padding(
//                        vertical = 16.dp,
//                        horizontal = dimensionResource(id = R.dimen.margin_horizontal_small),
                    top = 16.dp,
                    start = 16.dp,
                    bottom = 16.dp,
                    end = 16.dp
                )
        )
        {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .border(2.dp, Color.Blue)
                    .offset(x = (-16).dp)
                    .background(
                        brush = Brush.horizontalGradient(
                            colors = listOf(
                                Color.White,
                                Color.Black
                            )
                        )
                    )
                    .border(3.dp, Color.Magenta)
                    .defaultMinSize(minHeight = 42.dp)

            ) {
                Text("Hello World", modifier = Modifier.background(Color.White))
            }
        }
    }
}

结果为

如您所见，行内的

Text

向左移动了 16.dp。偏移之前的蓝色边框是它应该在的位置，因为它在偏移之前，并且偏移应用于洋红色边框和背景，因为它们在偏移之后。