Jetpack Compose - 内容是否可以在其边界框之外可见

Question

我有一个设计，其中有一个永远存在的、部分透明的顶部栏，然后是内容。

内容需要能够滚动，并且滚动时需要在顶栏下方可见（因此它是部分可见的）

该应用程序还需要可以通过手机进行导航。使内容在导航时始终对齐的最简单方法是使用脚手架。当内容向上滚动时它就会消失，它看起来就像内容边界框是顶部 -> 顶部栏的底部和底部 -> 页面的底部。

感觉应该有一个修饰符，这意味着即使内容滚动到框的顶部，内容仍然可以在屏幕上看到，只是其父级已经结束。

我编写了一个非常简单的测试应用程序来显示该问题。这应该很容易运行并演示我所看到的问题。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                ) {
                    var contentFocusRequester = FocusRequester()

                    Scaffold(
                        topBar = {
                            var borderThickness = if(focusBoxNumber == 0) 10.dp else 0.dp
                            Box(modifier = Modifier
                                .background(Color(0, 38, 150, 153))
                                .height(250.dp)
                                .fillMaxWidth()
                                .clickable {  }
                                .focusProperties { down = contentFocusRequester }
                                .border(BorderStroke(borderThickness, Color.Red))
                            ){}
                        }
                    ) { paddingValues ->
                        Box(modifier = Modifier
                            .focusRequester(contentFocusRequester)
                            .padding(top = paddingValues.calculateTopPadding())
                        ) {
                            Page2()
                        }
                    }
                }
            }

        }
    }
}

@Composable
fun Page2() {
    Column(
        modifier = Modifier
            .onFocusChanged { if (!it.hasFocus) focusBoxNumber = 0 }
            .verticalScroll(rememberScrollState())
    ) {
        for (number in 1..5) {
            FocusablePageDivider(number = number)
        }
    }
}

@Composable
fun FocusablePageDivider(number: Int) {
    var borderThickness = if(focusBoxNumber == number) 10.dp else 0.dp
    Box (modifier = Modifier
        .padding(bottom = 100.dp)
        .border(BorderStroke(borderThickness, Color.Red))
        .fillMaxWidth()
        .height(250.dp)
        .background(Color.Blue)
        .onFocusChanged { if (it.isFocused) focusBoxNumber = number }
        .clickable { }
    )
}

Answer 1

您正在使用修改器

padding(top = paddingValues.calculateTopPadding())`

确保

content

的顶部边缘放置在 TopAppBar 的底部边缘下方。最简单的方法可能是删除它，但是，您会收到 linter 警告，因为您 应该将 paddingValues 应用于

content

可组合项。如果您使用

BottomNavigation

，使用此方法也可能会产生副作用。

如果您想避免 linter 警告，您可以在 Scaffold

content

参数中提供 TopAppBar，而不是

topBar

参数。使用

Box

将 TopAppBar 堆叠在实际内容之上。

Scaffold(
    topBar = {}
) { paddingValues ->

    Box(modifier = Modifier.fillMaxSize()) {
        MyContent()
        TopAppBar(
            title = { Text("App") },
            backgroundColor = Color.Transparent.copy(alpha = 0.1f),
        )
    }
}

如果需要，您可以向

MyContent

可组合项添加顶部填充，以便在滚动之前，内容将位于 TopAppBar 下方。