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

相关推荐
!win !2 天前
不定高元素动画实现方案(下)
前端·javascript·css
Song5593 天前
elpis框架抽离并发布 SDK-NPM 包
前端
Mintopia3 天前
低代码平台如何集成 AIGC 技术?核心技术衔接点解析
前端·javascript·aigc
Mintopia4 天前
Next.js + AI-SDK + DeepSeek:3 分钟建设属于你的 AI 问答 Demo
前端·javascript·next.js
anyup4 天前
历时 10 天+,速度提升 20 倍,新文档正式上线!uView Pro 开源组件库体验再升级!
前端·typescript·uni-app
_AaronWong4 天前
仿 ElementPlus 的函数式弹窗调用
前端·element
用户21411832636024 天前
AI 当 “牛马”!免费云服务器 + 开源插件,7×24 小时写小说,一晚交出 70 章长篇
前端
IT_陈寒4 天前
React 18新特性全解析:这5个隐藏API让你的性能飙升200%!
前端·人工智能·后端
朦胧之4 天前
【NestJS】项目调试
前端·node.js
!win !4 天前
不定高元素动画实现方案(中)
前端·动画