Jetpack Compose Basic

Compose 简介

Jetpack Compose 是用于构建 Android 界面的新工具包

Compose 使用更少的代码、强大的工具和直观的 Kotlin 功能，可以帮助您简化并加快 Android 界面开发。借助 Compose，您可以通过定义一组函数来构建界面，这些函数称为可组合函数，它们会接受数据并发出界面元素。

Compose 函数

带有 @Composable 注解的 Kotlin 函数是 Compose 函数 在 Compose 中，可组合函数是界面的基本构建块。 可组合函数特点：

• 描述界面中的某一部分。
• 不会返回任何内容。
• 接受一些输入并生成屏幕上显示的内容。
• 可能会发出多个界面元素。

@Composable
private fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

• 此函数不会返回任何内容。用于发出界面的可组合函数无需返回任何内容，因为它们描述所需的屏幕状态，而不是构造界面元素。换言之，可组合函数只描述界面而不构造或创建界面，因此没有要返回的内容。

Compose 函数命名规范

• 必须是名词：DoneButton()
• 不能是动词或动词短语：DrawTextField()
• 不能是名词性介词：TextFieldWithLink()
• 不能是形容词：Bright()
• 不能是副词：Outside()
• 名词可以添加描述性形容词作为前缀：RoundIcon()

详见 Compose 函数命名规范

Compose UI 组件

Column & Row

如需在 Row 中设置子元素的位置，请设置 horizontalArrangement 和 verticalAlignment 实参。

对于 Column，请设置 verticalArrangement 和 horizontalAlignment 实参。

记忆技巧：

Row : horizontalArrangement 指定水平摆放位置；

verticalAlignment 指定竖直位置，比如竖直居中

Column verticalArrangement

当 Column 的大小大于其子元素大小的总和时，可以指定 verticalArrangement 来定义 Column 中的子元素的排列方式。下图显示了不同的垂直排列方式：

同样地，当 Row 的大小大于其子元素大小的总和时，可以指定 horizontalArrangement 来定义 Row 中的子元素的排列方式。下图显示了不同的水平排列方式：

Text 水平位置

@Composable
fun GameStatus(modifier: Modifier = Modifier) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp)
            .size(48.dp),
    ) {
        Text(
            modifier = Modifier
                .fillMaxWidth()
                // 在行末尾
                .wrapContentWidth(Alignment.End),
            text = stringResource(R.string.score, 0),
            fontSize = 18.sp,
        )
    }
}

LazyVerticalGrid 竖直网格

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        // 两列
        columns = GridCells.Fixed(2),
        // 竖直间隔 8dp
        verticalArrangement = Arrangement.spacedBy(8.dp),
        // 水平间隔 8dp
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        // grid 四边边距 8dp
        modifier = modifier.padding(8.dp)
    ) {
        items(DataSource.topics) { topic ->
            TopicCard(topic)
        }
    }
}

Icon vs. Image

圆形图片

RoundedCornerShape

@Composable
fun DogIcon(@DrawableRes dogIcon: Int, modifier: Modifier = Modifier) {
    Image(
        modifier = modifier
            .size(64.dp)
            .padding(8.dp)
            // 圆形 
            .clip(RoundedCornerShape(percent = 50)),
        painter = painterResource(dogIcon),
        // 剪裁
        contentScale = ContentScale.Crop,
        contentDescription = null
    )
}

TIPS:

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
}

既然有默认值，为什么还要传递 Modifier 实参。原因在于可组合项可能会进行重组，这实质上意味着 @Composable 方法中的代码块会再次执行。**如果在代码块中创建了 Modifier 对象，系统可能会重新创建该对象，并且这种方式效率不高。

仅可在 RowScope 和 ColumnScope 中使用的 weight 修饰符，不然会出现无法导包的情况；

API 列表

• Layout

  • Card
  • Box
  • LazyVerticalGrid
  • LazyHorizontalGrid
  • Column
  • Row
  • BoxWithConstraints
  • FlowRow
  • FlowColumn

• Button

  • FilledIconToggleButton
  • IconToggleButton
  • TextButton

• Text

  • Text

• Progress

  • CircularProgressIndicator

• 框架

  • HorizontalPager libs：com.google.accompanist:accompanist-pager
  • Scaffold

• 其他

  • SelectionContainer

文档参考：

horizontalArrangement 取值

Jetpack Compose FlowColumn与FlowRow瀑布流布局