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。

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

相关推荐
袁煦丞5 小时前
Reader断点续传高手:cpolar内网穿透实验室第609个成功挑战
前端·程序员·远程工作
快乐是Happy5 小时前
使用 vue+electron+vite 搭建一个属于自己的桌面端应用
前端
该用户已不存在5 小时前
Windows 开发环境这么难配,为什么还有那么多人在用?
前端·windows·后端
gnip5 小时前
深度封装tree公共组件
前端·javascript·vue.js
mon_star°5 小时前
《浪浪山小妖怪》知识竞赛来袭!测测你是几级影迷?
前端·css·html
Jolyne_5 小时前
H5的Form表单项不够灵活怎么办?来看看这篇通用组件封装思路分享
前端
Ares-Wang5 小时前
JavaScript》》JS》》ES6》》 foreach 、for in 、for of
前端·javascript·es6
coding随想5 小时前
浏览器如何检测用户环境光变化:揭秘Ambient Light Events(环境光事件)
前端
ZSQA5 小时前
Hbuilder X cli项目使用本地的node执行编译。
前端