2小时入门Jetpack Compose（下）

往期文章：

《00. 文章合集目录》

《10. 揭秘 Compose 原理》

《11. Google 强推的 Baseline Profiles 国内能用吗？我找 Google 工程师求证了！》

你好，我是朱涛。这是「沉思录」的第五篇文章。

在上一篇博客《2 小时入门 Jetpack Compose（上）》里，我们已经完成了 Splash 页面的 UI 和动画了。

今天这篇博客，让我们来完成：「首页」 + 「详情页」吧。

首页

跟 Splash 页面不一样，ToDoApp 的首页，要复杂不少。从结构上来讲，它主要分为三个部分：

• 第一，页面顶部的 TopBar；
• 第二，页面的主要内容 Content，也就是“待完成的任务列表”；
• 第三,页面右下角的 FloatingActionButton。

看起来确实复杂不少，对吧？不过，借助 Compose 的 Scaffold，我们其实能快速实现这样的页面结构。

// 代码段 1

@Composable
fun HomeScreen() {
    Scaffold(
        scaffoldState = scaffoldState,
        // 1
        topBar = {
            HomeAppBar()
        },
        // 2
        content = {
            HomeContent()
        },
        // 3
        floatingActionButton = {
            HomeFab()
        }
    )
}

// 1
@Composable
fun HomeAppBar() {}

// 2
@Composable
fun HomeContent() {}

// 3
@Composable
fun HomeFab() {}

复制代码

万丈高楼平地起，虽然 HomeScreen 完整的代码有 500 多行，但它最基础的结构，上面的十多行代码就能概括。这都要感谢 Google 官方给我们提供的 Scaffold() 函数：

扫描二维码关注公众号，回复： 14280929 查看本文章

// 代码段 2

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
) {}
复制代码

可以看到，Scaffold() 支持的参数非常多，我们只是用到了它很小的一部分，它不仅支持TopBar、FloatingActionButton，还支持Drawer、BottomBar，这些都是开箱即用的，我们只需要做少许配置即可。这也是 XML 无法比拟的。

整个首页的骨架已经完成了，接下来，我们一起看看各个组件如何实现吧。

TopBar

首先，是首页顶部的 TopBar。

如果你只是想在 TopBar 上展示一个静态的 Title 的话，那是非常容易的。不过，这里我增加了一个快捷的「清空任务」操作。

只要用户点击这个「清空任务」的按钮，就会清空当前所有的任务。为了做到这一点，我们就需要传一个回调进来，这样方便数据层的操作。这也是 Google 推崇的 Hoisting 思想。这里，我们可以看做是“事件提升”。

// 代码段 3

@Composable
fun HomeAppBar(
    onDeleteAllConfirmed : () -> Unit
) {
    HomeTopAppBar(
        onDeleteAllConfirmed = {
            onDeleteAllConfirmed()
        }
    )
}
复制代码

有了 Hosting 奠定基础以后，后面就很容易了，借助 Google 提供的 TopAppBar() 我们轻松就能实现能实现。

// 代码段 4

@Composable
fun HomeTopAppBar(
    onDeleteAllConfirmed: () -> Unit
) {
    TopAppBar(
        // 1，Title：任务列表
        title = {
            Text(
                text = stringResource(id = R.string.list_screen_title),
                color = MaterialTheme.colors.topAppBarContent
            )
        },
        // 2，选项：清空任务
        actions = {
            HomeAppBarActions(
                onDeleteAllConfirmed = onDeleteAllConfirmed
            )
        },
        backgroundColor = MaterialTheme.colors.topAppBarBackground
    )
}

@Composable
fun HomeAppBarActions(
    onDeleteAllConfirmed: () -> Unit
) {
    DeleteAllAction(onDeleteAllConfirmed = { isShowDialog = true })
}
复制代码

可以看到，Title 的展示很简单，只是读取了一下 String 而已。而对应的「清空任务」选项，我们则需要通过 DropdownMenu 来实现。

// 代码段 5

@Composable
fun DeleteAllAction(
    onDeleteAllConfirmed: () -> Unit
) {
    var expanded by remember { mutableStateOf(false) }

    IconButton(
        onClick = { expanded = true }
    ) {
        // 1，更多按钮
        Icon(
            painter = painterResource(id = R.drawable.ic_more),
            contentDescription = stringResource(id = R.string.delete_all_action),
            tint = MaterialTheme.colors.topAppBarContent
        )
        // 2，下拉列表
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // 3，下拉列表，「清空任务」
            DropdownMenuItem(
                onClick = {
                    expanded = false
                    onDeleteAllConfirmed()
                }
            ) {
                Text(
                    modifier = Modifier
                        .padding(start = MEDIUM_PADDING),
                    text = stringResource(id = R.string.delete_all_action),
                    style = Typography.subtitle2
                )
            }
        }
    }
}
复制代码

不过，由于「清空任务」是一个非常危险的操作，为了防止用户误操作，我们需要让用户「二次确认」。这时候，我们需要在 Compose 当中实现一个弹窗才行。

在从前的 View 体系当中，弹窗是非常容易的。这在 Compose 当中也并不难，但实现方式却不太一样。

@Composable
fun TodoAlertDialog(
    title: String,
    msg: String,
    isShowDialog: Boolean,    // 1
    onNoClicked: () -> Unit,  // 2
    onYesClicked: () -> Unit, // 3
) {
    if (isShowDialog) {       // 4
        AlertDialog(
            title = {
                Text(
                    text = title,
                    fontSize = MaterialTheme.typography.h5.fontSize,
                    fontWeight = FontWeight.Bold
                )
            },
            text = {
                Text(
                    text = msg,
                    fontSize = MaterialTheme.typography.subtitle1.fontSize,
                    fontWeight = FontWeight.Normal
                )
            },
            confirmButton = {
                Button(
                    onClick = {
                        onYesClicked()
                        onNoClicked()
                    })
                {
                    Text(text = stringResource(id = R.string.yes))
                }
            },
            dismissButton = {
                OutlinedButton(onClick = { onNoClicked() })
                {
                    Text(text = stringResource(id = R.string.no))
                }
            },
            onDismissRequest = { onNoClicked() }
        )
    }
}

复制代码

请留意上面的注释 1、2、3，这里其实也再次体现了 Hoisting 的思想，这里不仅包含「事件提升」，还包含了「状态提升」的思想。

另外，请留意注释 4，发现了吗？在 Compose 当中，我们是通过控制状态(isShowDialog)来实现弹窗的「展示」与「隐藏」的。这跟我们的 View 体系的 Dialog.show()、Dialog.hide() 的逻辑是不一样的。

至此，我们首页的 TopBar 就算完成了，接下来我们看看「任务列表」如何实现吧。

任务列表

首页的任务列表，它实现起来，其实要比传统的 RecyclerView 简单不少。

首先，我们需要判断一下，当前的任务列表是否为空。

@Composable
fun HomeContent(
    allTasks: RequestState<List<Task>>,
    onSwipeToDelete: (Task) -> Unit,
    gotoTaskDetail: (taskId: Int) -> Unit,
    onUpdateTask: (Task) -> Unit
) {
    if (allTasks is RequestState.Success &&
        allTasks.data.isNotEmpty()
    ) {
        // 不为空
        HomeTasksColumn()
    } else {
        // 空页面
        HomeEmptyContent()
    }
}
复制代码

空页面没什么好讲的，就是画个简单的 UI 页面而已，我们重点看看HomeTasksColumn()。

如果我们只是想要单纯的展示任务列表的话，几行代码就可以搞定了。

@Composable
fun HomeTasksColumn1(
    tasks: List<Task>,
    gotoTaskDetail: (taskId: Int) -> Unit,
    onUpdateTask: (Task) -> Unit,
) {
    LazyColumn {
        itemsIndexed(
            items = tasks,
            key = { _, task ->
                task.id
            }
        ) { index, task ->
            TaskItem(
                task = task,
                gotoTaskDetail = gotoTaskDetail,
                onUpdateTask = onUpdateTask
            )
        }
    }
}
复制代码

如果是从前的 View 体系，我们不仅要写 XML，还要写 LayoutManager、Adapter、数据绑定、更新，哎，想想都觉得烦。

Compose 迷人的地方在于，它强大的动画 Api。简单的几行代码，我们就可以实现一些炫酷的效果。比如，这个进场的动效。

如果让你在 RecyclerView 上完美实现一个类似的效果，你要花多长时间？3 天？还是 3 小时？如果是在 Compose 当中，我只需要 1 分钟。

@Composable
fun HomeTasksColumn1(
    tasks: List<Task>,
    gotoTaskDetail: (taskId: Int) -> Unit,
    onUpdateTask: (Task) -> Unit,
) {
    LazyColumn {
        itemsIndexed(
            items = tasks,
            key = { _, task ->
                task.id
            }
        ) { index, task ->
            val size = remember(tasks) {
                tasks.size
            }
            // 省略部分代码
            AnimatedVisibility(
                visible = true,
                enter = slideInHorizontally(
                    animationSpec = tween(
                        durationMillis = 300
                    ),
                    // index 越大，初始偏移越大
                    initialOffsetX = { -(it * (index + 1) / (size + 2)) }
                ),
                exit = shrinkVertically(
                    animationSpec = tween(
                        durationMillis = 300
                    )
                )
            ) {
                TaskItem(
                    task = task,
                    gotoTaskDetail = gotoTaskDetail,
                    onUpdateTask = onUpdateTask
                )
            }
        }
    }
}

复制代码

我只能说，Compose 真的太强了。

OK，「进场动效」有了，如果我们想实现「侧滑删除」的功能呢？

嗯…… 给我一首歌的时间吧~

@Composable
fun HomeTasksColumn(
    tasks: List<Task>,
    onSwipeToDelete: (Task) -> Unit,
    gotoTaskDetail: (taskId: Int) -> Unit,
    onUpdateTask: (Task) -> Unit,
) {
    LazyColumn {
        itemsIndexed(
            items = tasks,
            key = { _, task ->
                task.id
            }
        ) { index, task ->
            val size = remember(tasks) {
                tasks.size
            }

            // 省略部分

            AnimatedVisibility(
                visible = itemAppeared && !isDismissed,
                enter = slideInHorizontally(
                    animationSpec = tween(
                        durationMillis = 300
                    ),
                    initialOffsetX = { -(it * (index + 1) / (size + 2)) }
                ),
                exit = shrinkVertically(
                    animationSpec = tween(
                        durationMillis = 300
                    )
                )
            ) {
                // 1，变化
                SwipeToDismiss(
                    state = dismissState,
                    directions = setOf(DismissDirection.EndToStart),
                    dismissThresholds = { FractionalThreshold(fraction = 0.2f) },
                    background = { SwipeBackground(degrees = degrees) },
                    dismissContent = {
                        TaskItem(
                            task = task,
                            gotoTaskDetail = gotoTaskDetail,
                            onUpdateTask = onUpdateTask
                        )
                    }
                )
            }
        }
    }
}

复制代码

请留意注释 1，「侧滑删除」这个功能，官方已经帮我们封装好了，只需要使用 SwipeToDismiss()即可。

不过，我们怎么会满足于这种默认效果呢？

让我们来做个炫酷的「侧滑动效」吧~

这个效果看着好像挺麻烦，但这在 Compose 当中只是小菜一碟。

@Composable
fun HomeTasksColumn(
    tasks: List<Task>,
    onSwipeToDelete: (Task) -> Unit,
    gotoTaskDetail: (taskId: Int) -> Unit,
    onUpdateTask: (Task) -> Unit,
) {
    LazyColumn {
        itemsIndexed(
            items = tasks,
            key = { _, task ->
                task.id
            }
        ) { index, task ->
            // 省略部分

            // 1，变化
            val degrees by animateFloatAsState(
                if (dismissState.targetValue == DismissValue.Default)
                    0f
                else
                    -180f
            )

            // 省略部分

            AnimatedVisibility() {
            }
        }
    }
}
复制代码

在我们手指拖动 Item 的时候，垃圾桶图标会做一个「倾倒动画」，这本质上就是一个旋转动画而已。一个 animateFloatAsState{} 就能搞定了。

不过，在侧滑的过程中，我们还希望 Toast 提示用户，什么时候可以松手，这该怎么办呢？

其实也不难，我们看看代码：

@Composable
fun HomeTasksColumn(
    tasks: List<Task>,
    onSwipeToDelete: (Task) -> Unit,
    gotoTaskDetail: (taskId: Int) -> Unit,
    onUpdateTask: (Task) -> Unit,
) {
    LazyColumn {
        itemsIndexed(
            items = tasks,
            key = { _, task ->
                task.id
            }
        ) { index, task ->
            // 省略部分

            // 1
            val isDeleteEnable by remember(degrees) {
                derivedStateOf { degrees == -180f }
            }

            val context = LocalContext.current

            // 2
            DisposableEffect(key1 = isDeleteEnable) {
                if (isDeleteEnable) {
                    showToast(context, "松手后删除！")
                }
                onDispose {}
            }

            // 省略部分

            AnimatedVisibility() {
            }
        }
    }
}
复制代码

如果你读了我的博客《揭秘 Compose 原理》的话，你应该就能理解我们为什么要这么写了。App 运行期间，Composable 方法是会被反复调用的，我们需要 isDeleteEnable 来标记用户是否触发了「侧滑删除」的阈值。这里我们使用了 derivedStateOf 来优化 Compose 的性能。（之前的博客提到过的哈。）

另外，为了防止 Recompose 的时候一直弹 Toast，我们使用了 DisposableEffect 这个 SideEffect Handler。这也是「函数式编程」领域的老概念了。

OK，任务列表完成以后，首页基本上就没什么难度了，FloatingActionButton 的代码我就不贴了。

接下来，我们来看看「详情页」怎么写。

详情页

有了「首页」的经验以后，「详情页」的实现就简单了，借助 Scaffold() 我们可以轻松实现页面的骨架。

@Composable
fun TaskDetailScreen() {
    Scaffold(
        topBar = {
            TaskDetailAppBar()
        },
        content = {
            TaskDetailContent()
        }
    )
}
复制代码

这次我就不再介绍 TopBar 的实现了，我们直接看 TaskDetailContent()吧。

可以看到，整个「详情页」的结构其实很简单，它只有两排：

• 第一排，包含一个 TextField、CheckBox；
• 第二排，还是一个 TextField。

@Composable
fun TaskDetailContent() {
    Column() {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField()
            Checkbox()
        }

        Divider()
        TextField()
    }
}
复制代码

OK，搞清楚它的结构以后，剩下的就是完善 UI 的细节了：

@Composable
fun TaskDetailContent(
    modifier: Modifier = Modifier,
    title: String,
    onTitleChange: (String) -> Unit,
    description: String,
    onDescriptionChange: (String) -> Unit,
    isDone: Boolean,
    isDoneChange: (Boolean) -> Unit,
) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
            .padding(all = MEDIUM_PADDING)
    ) {

        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(8F),
                value = title,
                onValueChange = { onTitleChange(it) },
                label = { Text(stringResource(id = R.string.enter_title)) },
                placeholder = { Text(text = stringResource(id = R.string.title)) },
                textStyle = MaterialTheme.typography.body1,
                singleLine = true,
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Transparent
                )
            )

            Checkbox(
                modifier = Modifier.weight(1F),
                checked = isDone,
                onCheckedChange = isDoneChange
            )
        }

        Divider(
            modifier = Modifier.height(SMALL_PADDING),
            color = MaterialTheme.colors.background
        )

        TextField(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp),
            value = description,
            onValueChange = { onDescriptionChange(it) },
            label = { Text(stringResource(id = R.string.enter_description)) },
            placeholder = { Text(text = stringResource(id = R.string.description)) },
            textStyle = MaterialTheme.typography.body1,
        )
    }
}
复制代码

是不是很简单？

结束语

恭喜你！你已经完成课程的 80% 的内容了。

接下来你需要做的，就是跟我文章里的步骤，一行行的敲代码了。读我的博客只需要 10 分钟，只有真正花 2 小时写代码，你才可能：「2 小时入门 Jetpack Compose」！

关于源代码，请关注我的公众号“朱涛的自习室”，从菜单里选择“资源-->源码”即可获取。

OK，感谢你的阅读，我们下次再见？