Jetpack Compose 基本布局(7)

导读大纲

• • 1.1 探索基本布局
  • • 1.1.1 布局介绍
    • 1.1.2 定位和尺寸的修改器
  • 1.2 组合可组合元素
  • • 1.2.1 在布局内组合可组合元素
    • 1.2.2 组织可组合元素的最佳实践
    • 1.2.3 真实世界的场景

1.1 探索基本布局

1. 布局是 Jetpack Compose UI 的支柱
   • 它们提供在屏幕上组织和排列可组合函数(如文本、图片和按钮)的结构
   • 在本节中,我们将介绍三种最常用的基本布局: Column , Row 和 Box

1.1.1 布局介绍

1. Jetpack Compose 中的布局本身就是可组合元素的

   • 它们充当容器元素, 将其他可组合元素作为其子元素
   • 通过在布局中嵌套可组合元素,并使用修改器来控制它们的位置和样式
     1. 可以创建复杂且具有视觉吸引力的UI

2. Column布局

   • 列布局将其子元素从上到下垂直排列,把它想象成 UI 元素的堆叠
   • <1> 两个Text组件和Image组件将垂直堆叠

@Composable
fun MyLayout() {
    Column {                               // <1>
        Text("Item 1")
        Text("Item 2")
        Image(painter = painterResource(id = R.drawable.my_image), contentDescription = null)
    }
}

3. Row布局
   • 行布局则是将其子元素从左到右水平排列,就像将UI元素并排放置一样
   • <1> 这里,图像、文本和按钮可组合元素将水平排列成一行

Row {                        // <1>
    Image(painter = painterResource(id = R.drawable.my_image), contentDescription = null)
    Text("Item 1")
    Button(onClick = { /* ... */ }) {
        Text("Click Me")
    }
}

4. Box布局
   • 方框布局专为重叠元素而设计
     1. 其子元素相互堆叠, 最后一个子元素绘制在最上面
   • <1> 这里,文本组件将显示在图像组件的顶部
     1. 首先进入预览面板,点击各个元素会看到左侧可组合元素也在相应变动
     2. 跟随本教程走的或者有基础的，肯定不会迷路，对于迷茫的小伙伴
        • 这里贴上预览面板-传送门
          
     3. 运行App或者指定的预览元素
        • 如果发现安装App后显示不对, 查看一下所使用的运行配置
          
     4. 这里切换到整个app配置后运行到设备中, 并使用布局检查查看元素
        

@Preview(showBackground = true)
@Composable
fun MyLayout() {
    Box {                                          // <1>
        Image(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = null)
        Text(
            text = "Hello from behind the image!",
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

1.1.2 定位和尺寸的修改器

1. 修改器在自定义布局中可组合元素的布局方式方面起着至关重要的作用

2. 以下是一些用于定位和调整大小的常用修改器

   • padding
     1. 在可组合元素周围添加内间距
   • size
     1. 设置可组合元素的宽度和高度
   • fillMaxWidth , fillMaxHeight
     1. 使可组合元素占据可用的宽度或高度
   • align
     1. 控制可组合元素在其父布局中的对齐方式
        • 例如,Alignment.Center, Alignment.TopStart

Column {
    Text(
        text = "Item 1",
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
    )
    // ...
}

1.2 组合可组合元素

1. 当您开始组合核心组件时,Jetpack Compose 的真正威力就会显现出来
   • 在布局(列、行、方框)中使用文本、图片、按钮等
   • 这样,您就可以创建更复杂、更实用的用户界面元素
     1. 并在整个应用程序中重复使用

1.2.1 在布局内组合可组合元素

1. Product Card
   • <1>在本例中,我们创建一个 ProductCard 可组合元素
     • 用于显示产品图片、名称、描述和 "立即购买"按钮
   • <2> 我们使用 Column 垂直排列元素
     • 并使用嵌套Column来显示文本内容和按钮

@Composable
fun ProductCard(product: Product) {
    Column(                                              // <1>
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .border(1.dp, Color.Gray)
    ) {
        Image(
            painter = painterResource(id = product.imageResourceId),
            contentDescription = product.name,
            modifier = Modifier
                .fillMaxWidth()
                .height(180.dp)
        )
        Column(modifier = Modifier.padding(16.dp)) {    // <2>
            Text(text = product.name, fontWeight = FontWeight.Bold)
            Text(text = product.description)
            Spacer(modifier = Modifier.height(8.dp))
            Button(onClick = { /* Handle purchase */ }) {
                Text("Buy Now")
            }
        }
    }
}

2. User Profile Header
   • <1> UserProfileHeader使用 Row 布局
     1. 来水平显示用户的个人资料图片、姓名和用户名
   • <2> 并使用嵌套的 Column 来显示文本内容

@Composable
fun UserProfileHeader(user: User) {
    Row(                                      // <1>
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
    ) {
        Image(
            painter = painterResource(id = user.profileImageResourceId),
            contentDescription = "Profile picture of ${user.name}",
            modifier = Modifier
                .size(64.dp)
                .clip(CircleShape)
        )
        Spacer(modifier = Modifier.width(16.dp))
        Column {                               // <2>
            Text(text = user.name, fontWeight = FontWeight.Bold)
            Text(text = "@${user.username}")
        }
    }
}

1.2.2 组织可组合元素的最佳实践

1. 分解成更小的可组合函数
   • 将用户界面分成更小的、可重复使用的可组合函数
   • 这将使你的代码更加模块化,更易于测试,并提高可重用性.
2. 为可组合元素取有意义的名称
   • 为可组合元素选择能反映其用途的描述性名称
   • 这样可以提高代码的可读性,使UI的结构更容易理解
3. 使用统一的风格
   • Compose 代码遵循统一的风格规范
   • 这包括命名约定、缩进和代码格式
4. 分离关注点
   • 尽量将用户界面逻辑(展示)与业务逻辑(数据获取、计算)分开
   • 这种关注点分离提高代码的可维护性和可测试性

1.2.3 真实世界的场景

1. List Items
   • 您可以为 LazyColumn 或 LazyRow 中的列表项创建可重用的可组合元素
2. App Bars
   • 设计带有图标、标题和操作的自定义应用栏
3. Dialog Boxes
   • 创建带有自定义内容和按钮的对话框
4. Forms
   • 创建带有输入字段、标签和验证信息的表单
5. Complex Screens
   • 将复杂的屏幕分解成更小的可组合组件