为什么我的作品会相互重叠，我该如何阻止这种情况？ （Android Studio 中的 Jetpack Compose 应用程序）

Question

我有这个 Jetpack Compose 应用程序，我有 2 个主要的 compose，每个都有自己的元素，并且一个与另一个重叠。谁能帮我从上到下排列一下？

-> mainGame 撰写与标题撰写重叠[在此处输入图像描述] [[[]()]()]()()

我尝试做一个随机生成器应用程序，数字越大越好

Answer 1

在 Jetpack Compose 中，您在代码中定义可组合项的顺序决定了它们在屏幕上的堆叠顺序。

为了确保一个可组合项不会无意中与另一个可组合项重叠，您应该在可组合函数中正确构建它们。

根据您的描述，您似乎有两个主要可组合项：

mainGame

和

header

。如果您希望标题出现在上方并且不被

mainGame

重叠，则需要正确地构造它们，通常采用垂直排列，如“列”。

以下是如何构建这些可组合项的基本示例：

@Composable
fun MyApp() {
    Column {
        Header()
        MainGame()
    }
}

@Composable
fun Header() {
    // Define the UI elements for the header
}

@Composable
fun MainGame() {
    // Define the UI elements for the main game
}

在此结构中，

Header

将放置在顶部，

MainGame

将放置在其下方。这样，

Header

就不会被

MainGame

重叠。

如果您对布局有更具体的要求，例如固定标题大小、可滚动内容或特定对齐方式，则可以使用其他 Compose 布局可组合项，例如

Box

、

Spacer

、

ScrollableColumn

（或

LazyColumn

了解更多高效处理大型列表），等等。

例如，如果您希望

MainGame

可以滚动，同时保持

Header

固定，您可以执行以下操作：

@Composable
fun MyApp() {
    Column {
        Header()
        LazyColumn {
            item { MainGame() }
        }
    }
}

在此示例中，

LazyColumn

用于有效处理可滚动内容。