Compose 布局和修饰符的基础知识

Fundamentals of Compose Layouts and Modifiers - MAD Skills

了解布局和修饰符的基础知识：布局和修饰符如何协同工作、提供哪些开箱即用型 API，以及如何设置界面样式。

1. Layouts

2. Arrangement and Alignment

Arrangement：main axis（主轴）

Alignment：cross axis（交叉轴）

可以单独设置某个 Compose 元素的排列位置。

Box

Box 使用 contentAlignment 参数来排列 content。

Box(
    contentAlignment = Alignment.TopStart
) {
    ...
}

    /** A collection of common [Alignment]s aware of layout direction. */
    companion object {
        // 2D Alignments.
        @Stable val TopStart: Alignment = BiasAlignment(-1f, -1f)
        @Stable val TopCenter: Alignment = BiasAlignment(0f, -1f)
        @Stable val TopEnd: Alignment = BiasAlignment(1f, -1f)
        @Stable val CenterStart: Alignment = BiasAlignment(-1f, 0f)
        @Stable val Center: Alignment = BiasAlignment(0f, 0f)
        @Stable val CenterEnd: Alignment = BiasAlignment(1f, 0f)
        @Stable val BottomStart: Alignment = BiasAlignment(-1f, 1f)
        @Stable val BottomCenter: Alignment = BiasAlignment(0f, 1f)
        @Stable val BottomEnd: Alignment = BiasAlignment(1f, 1f)
        ...
    }
}

Modifier scope safety

3. Material Components

4. Scaffold

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
) {
    val safeInsets = remember(contentWindowInsets) { MutableWindowInsets(contentWindowInsets) }
    Surface(
        modifier =
            modifier.onConsumedWindowInsetsChanged { consumedWindowInsets ->
                // Exclude currently consumed window insets from user provided contentWindowInsets
                safeInsets.insets = contentWindowInsets.exclude(consumedWindowInsets)
            },
        color = containerColor,
        contentColor = contentColor
    ) {
        ScaffoldLayout(
            fabPosition = floatingActionButtonPosition,
            topBar = topBar,
            bottomBar = bottomBar,
            content = content,
            snackbar = snackbarHost,
            contentWindowInsets = safeInsets,
            fab = floatingActionButton
        )
    }
}

5. Lazy Components

• LazyHorizontalGrid

• LazyColumn

• LazyRow

• Staggered grids：

  • LazyVerticalStaggeredGrid

  • LazyHorizontalStaggeredGrid