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。
kotlin
Box(
contentAlignment = Alignment.TopStart
) {
}
Modifier scope safety


3. Material Components

4. Scaffold
kotlin
@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
-
