compose的使用入门：打造丝滑的可展开列表

2024-02-19 07:22:45

前言

在移动应用程序中，可展开列表是一个非常常见的UI元素。它可以帮助我们组织和展示大量信息，同时还可以通过折叠和展开列表项来控制信息的可见性。在Compose中，我们可以使用Expandable和LazyColumn组件来创建一个基本的可展开列表。

基本的可展开列表

创建一个基本的可展开列表非常简单，只需要几行代码。首先，我们需要创建一个Expandable组件，并为它指定一个初始状态，true表示展开，false表示折叠。然后，我们需要创建一个LazyColumn组件，并为它指定一个列表数据源。最后，我们需要在LazyColumn组件的item属性中使用Expandable组件来渲染每个列表项。

@Composable
fun SimpleExpandableList(
    listData: List<String>
) {
    var expanded = remember { mutableStateOf(false) }

    Expandable(
        expanded = expanded.value,
        onToggleClick = { expanded.value = !expanded.value }
    ) {
        LazyColumn {
            listData.forEach { item ->
                item {
                    Text(text = item)
                }
            }
        }
    }
}

交互式可展开列表

基本的可展开列表虽然可以满足基本的需求，但它还缺乏一些交互性。例如，我们无法通过点击列表项来展开或折叠它。为了实现这种交互性，我们需要在Expandable组件的onToggleClick属性中添加一个点击事件监听器。

@Composable
fun InteractiveExpandableList(
    listData: List<String>
) {
    var expanded = remember { mutableStateOf(false) }

    Expandable(
        expanded = expanded.value,
        onToggleClick = { expanded.value = !expanded.value }
    ) {
        LazyColumn {
            listData.forEach { item ->
                item {
                    Text(
                        text = item,
                        modifier = Modifier.clickable { expanded.value = !expanded.value }
                    )
                }
            }
        }
    }
}

现在，我们就可以通过点击列表项来展开或折叠它了。但是，这种交互方式还是有点生硬，我们希望列表项在展开或折叠时能够有一个动画效果。

带有动画的可展开列表

为了给可展开列表添加动画效果，我们需要使用Compose的AnimatedVisibility组件。AnimatedVisibility组件可以根据一个布尔值来显示或隐藏一个视图，并且支持各种动画效果。

@Composable
fun AnimatedExpandableList(
    listData: List<String>
) {
    var expanded = remember { mutableStateOf(false) }

    Expandable(
        expanded = expanded.value,
        onToggleClick = { expanded.value = !expanded.value }
    ) {
        LazyColumn {
            listData.forEach { item ->
                item {
                    AnimatedVisibility(
                        visible = expanded.value,
                        enter = fadeIn(),
                        exit = fadeOut()
                    ) {
                        Text(text = item)
                    }
                }
            }
        }
    }
}

现在，当我们展开或折叠列表项时，就会看到一个淡入淡出的动画效果。

高度可定制的可展开列表

上面的可展开列表已经可以满足大多数的需求了，但是我们还可以对它进行进一步的定制，以满足不同的需求。例如，我们可以自定义列表项的背景颜色、字体颜色、边框颜色等等。

@Composable
fun CustomizableExpandableList(
    listData: List<String>
) {
    var expanded = remember { mutableStateOf(false) }

    Expandable(
        expanded = expanded.value,
        onToggleClick = { expanded.value = !expanded.value }
    ) {
        LazyColumn {
            listData.forEach { item ->
                item {
                    AnimatedVisibility(
                        visible = expanded.value,
                        enter = fadeIn(),
                        exit = fadeOut()
                    ) {
                        Text(
                            text = item,
                            modifier = Modifier
                                .background(Color.White)
                                .padding(16.dp)
                                .border(1.dp, Color.Black)
                        )
                    }
                }
            }
        }
    }
}