Layout

Jetpack Compose 提供了多种选项，用于在容器内对齐和排列 UI 元素，比如 Column、Row、Box。

Arrangement

Arrangement 用于控制子项在主轴方向上的间距，因此在 Column 中会看到 verticalArrangement 参数，而在 Row 中会看到 horizontalArrangement 参数。

Column

verticalArrangement：指定 Column 内部子项的垂直排列方式。它可以设置为：Top（默认）、Bottom、Center、SpaceBetween、SpaceEvenly、SpaceAround。

Row

horizontalArrangement：指定 Row 内部子项的水平排列方式。它可以设置为：Start、End、Center、SpaceBetween、SpaceEvenly、SpaceAround。

Surface

在 Jetpack Compose 中，Surface 是一个非常核心且常用的 UI 组件，用来提供：

• 背景颜色
• 阴影（elevation）
• 圆角（shape）
• 边框
• 点击效果

Surface(
    modifier = Modifier.size(100.dp),
    color = Color.Cyan,
    contentColor = colorResource(id = R.color.black),
    shadowElevation = 1.dp,
    border = BorderStroke(1.dp, Color.Green)
) {
    Text(text = "Stewed Noodles!")
}

Surface 是一个带主题风格的容器。Compose 里所有 Material 组件（Button、Card、Dialog）其实内部都是基于 Surface 构建的。

Scaffold

Scaffold 是 Compose UI 的基础结构组件，它提供了一个包含常用元素的布局，例如 TopAppBar、BottomAppBar 和 FloatingActionButton。它的主要目的，是通过提供一个标准化的布局结构来简化开发过程，并且允许你在此基础上进行轻松的自定义。

@OptIn(ExperimentalMaterial3Api::class) // Add this annotation here
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContent {
        Scaffold(
            topBar = {
                TopAppBar(title = {Text("TopAppBar Title")})
            },
            bottomBar = {
                BottomAppBar(contentColor = Color.Cyan) {

                }
            },
            floatingActionButton = {
                FloatingActionButton(onClick = {}) { }
            }
        ) {
        }
    }
}
}

运行的效果，如下所示

TopAppBar

位于界面顶部，通常包含应用标题、导航按钮以及其他相关操作项。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyTopAppBar() {
    TopAppBar(
        title = {Text(text = "TopAppBar Title")},
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = Color.Cyan,
            titleContentColor = Color.Blue ),
        navigationIcon = {
            IconButton(onClick = {

            }) {
                Icon(painter = painterResource(R.drawable.baseline_menu_24), contentDescription = "Menu")
            }
        },
        actions = {
            IconButton(onClick = {

            }) {
                Icon(painter = painterResource(R.drawable.outline_10k_24), contentDescription = "Setting")
            }
        }
    )
}

运行效果图

BottomAppBar

位于界面底部，通常用于放置导航图标和其他与当前界面相关的操作按钮。

@Composable
fun MyBottomAppBar(){
    BottomAppBar(
        containerColor = Color.Cyan,
        contentColor = Color.Black
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier.fillMaxSize()
        ) {
            IconButton(onClick = {

            }) {
                Icon(painter = painterResource(R.drawable.outline_add_home_24), contentDescription = "Home")
            }
            IconButton(onClick = {

            }) {
                Icon(painter = painterResource(R.drawable.outline_alarm_24), contentDescription = "Alarm")
            }
            IconButton(onClick = {

            }) {
                Icon(painter = painterResource(R.drawable.outline_archive_24), contentDescription = "Archive")
            }
        }
    }
}

运行效果

FloatingActionButton

一个悬浮的圆形按钮，用于触发主要用户操作，例如新增项目或跳转到应用的重要功能区域。

@Composable
fun MyFloatingActionButton() {
    FloatingActionButton(
        onClick = {},
        containerColor = Color.Green,
        contentColor = Color.White
    ) {
        IconButton(onClick = {

        }) {
            Icon(painter = painterResource(R.drawable.outline_add_home_24), contentDescription = "Home")
        }
    }
}

运行效果