Jetpack Compose —— 深入浅出Scaffold

引言：

        Jetpack Compose是一个现代化的UI工具包，提供了一种简单、声明式的方式来构建Android应用程序界面。其中一个重要的组件是Compose Scaffold，它为我们提供了一个基本的应用程序结构，包括AppBar、底部导航栏和主要内容区域。在本文中，我们将深入探讨Jetpack Compose Scaffold的使用，帮助开发人员更好地理解和应用该组件。

一、Scaffold简介

二、使用Scaffold构建应用程序界面

---

一、Scaffold简介

        Scaffold是Jetpack Compose中的一个重要组件，它提供了一个应用程序的基本布局结构。它通常由顶部AppBar、底部导航栏和主要内容区域组成，通过使用Scaffold，我们可以轻松地创建具有一致性和可扩展性的用户界面，为开发人员提供了构建漂亮、交互式和高度可定制的用户界面的能力。

二、使用Scaffold构建应用程序界面

首先，我们需要导入Compose Scaffold库。在build.gradle文件中添加以下依赖项：

var  compose_ui_version = '1.2.0'
implementation "androidx.compose.material:material:$compose_ui_version"

一旦我们导入了所需的库，我们可以开始构建我们的用户界面。以下是一个简单的示例：

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Preview
@Composable
fun ScaffoldTest(){
    MaterialTheme{
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(text = "My App")
                    },
                    actions = {
                        IconButton(onClick = {
                            println("点击了1")
                        }){
                            Icon( Icons.Default.AccountBox, contentDescription =null )
                        }
                    }
                )
            },
            content = {
                Column {
                    Text(text = "hello,world")
                    Button(onClick = {
                        println("点击了2")
                    }) {
                        Text(text = "Click Me")
                    }
                }
            },
            bottomBar = {
                BottomAppBar {
                    Row() {
                        IconButton(modifier = Modifier.weight(1f),onClick = {
                            println("点击了31")
                        }){
                            Icon(Icons.Default.Settings,contentDescription = null)
                        }
                        IconButton(modifier = Modifier.weight(1f),onClick = {
                            println("点击了32")
                        }){
                            Icon(Icons.Default.AccountBox,contentDescription = null)
                        }
                        IconButton(modifier = Modifier.weight(1f),onClick = {
                            println("点击了33")
                        }){
                            Icon(Icons.Default.Add,contentDescription = null)
                        }
                    }

                }
            }
        )
    }
}

 在这个示例中，我们使用Scaffold构建了一个简单的应用程序界面。顶部AppBar包含标题和操作按钮，主要内容区域包含一些文本和按钮，底部导航栏包含一个设置图标按钮。您可以根据自己的需求定制和扩展这个布局。

~~~~~~~  牛逼  ~~~~~~