使用Jetpack Compose构建可折叠Card

使用Jetpack Compose构建可折叠Card

为何在Android应用开发中使用扩展卡片

扩展卡片在Android应用开发中广受欢迎，它们可以让开发者打造干净紧凑的用户界面，同时可以轻松展开，显示额外的内容。

通过巧妙地使用扩展卡片，开发者可以为用户提供流畅、直观的体验，用户可以在无需切换到新屏幕或环境的情况下访问更详细的信息。

这在移动应用中特别有用，因为屏幕空间有限，用户通常处于快速移动中。通过采用扩展卡片呈现信息，开发者可以减少点击和滑动次数，从而提升用户体验。

扩展卡片是增强用户体验、使应用脱颖而出的绝佳方式。

扩展卡片的明显用途和采用案例包括但不限于：

• 展示电子商务应用中产品的额外细节
• 在新闻应用中展示新闻文章的附加信息
• 为待办事项列表应用中的任务提供更多详细信息
• 在应用中展示功能的附加选项或设置
• 在健身应用中显示用户活动摘要，并可展开以获取更多详情
• 在食品订购应用中展示餐厅或食品项目的详细信息
• 在财务应用中提供用户账户信息摘要，可展开以获得更多详情。

这只是展开式卡片在Android应用开发中的几个应用示例。

逐步教程：在Compose中创建可展开卡片

Jetpack Compose是使用Kotlin构建本机Android应用程序的现代UI工具包。它提供了一种更直观、更声明式的方式来构建UI组件，使开发人员能够轻松创建漂亮、响应式的用户界面。本教程将使用Jetpack Compose创建一个可展开的卡片。

步骤1：为卡片创建一个组合函数

第一步是创建一个代表卡片的组合函数。我们定义一个名为ExpandableCard的组合函数。

此函数将接受两个参数：卡片的标题和一个布尔值，用于确定卡片是否展开。

我们使用mutableStateOf创建一个名为expanded的布尔变量，用于跟踪卡片是否展开。我们将其初始化为false。

以下是这个函数的代码示例：

@Composable
fun ExpandableCard(title: String) {
var expanded by remember { mutableStateOf (false) }

  Card(
    shape = RoundedCornerShape(8.dp),
    elevation = 8.dp,
    modifier = Modifier
      .fillMaxWidth()
      .padding(16.dp)
)
  ) {
    // Card content goes here, at this state a column to hold items
  }
}

此函数创建了一个具有圆角形状和投影阴影的卡片元素。

我们使用Card组合创建了一个容器，其中包含了高度、圆角和其他材料设计特征。我们将其修饰符设置为fillMaxWidth，使其占据父元素的整个宽度。

上面核心的一个方面在这一行：

var expanded by remember { mutableStateOf(false) }

让我们进行一些解释：

在Jetpack Compose中，状态是一个关键的概念，用于保存在组合函数的生命周期内可以发生变化的数据。

在这段代码中，var expanded是一个可变变量，表示ExpandableCard的当前状态。它用于确定卡片当前是展开还是折叠。

by remember { mutableStateOf(false) } 表达式使用可变状态持有器初始化了expanded 变量。

remember 函数用于缓存状态值，使其在组合函数的重新组合中保持持久。

mutableStateOf 函数用于创建一个可保存布尔值的状态持有器。在这种情况下，状态的初始值设置为"false"，这意味着卡片最初是折叠的。

每当expanded变量的值发生变化时，Jetpack Compose会自动重新组合组合函数，从而更新UI以反映新状态。

我们还将卡片的宽度设置为填充可用空间，并添加一些填充以进行间距设置。我们稍后将添加卡片的内容。

步骤2：添加展开按钮

接下来，我们需要添加一个按钮，用户可以点击以展开或折叠卡片。我们将使用一个包裹卡片内容的Clickable组合来实现这一点。下面是ExpandableCard函数的更新代码：

@Composable
fun ExpandableCard(title: String) {

    var expanded by remember { mutableStateOf(false) }

    Card(
        shape = RoundedCornerShape(8.dp),
        elevation = 8.dp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable(
                onClick = { expanded = !expanded }
            )
    ) {
        Column(
            // 卡片内容放在这里，包括标题和示例内容
        )
    }
}

我们添加了一个包裹卡片内容的Column组合。在Card上，我们添加了一个clickable修饰符。我们将使用这个修饰符来切换卡片的展开状态。

让我们详细解释一下这个clickable修饰符：

.clickable {
    onClick { expanded = !expanded }
}

.clickable 修饰符用于使一个组合函数变得可点击。在这种情况下，Card组合被设置为可点击，以便当用户点击它时触发特定操作。

onClick 方法是一个lambda表达式，在用户点击Card时执行。它通过使用"!“运算符来取反当前值，从而切换"expanded” 变量的值。这意味着如果"expanded" 是true，它将变为false，如果它是false，它将变为true。

expanded 变量用于确定卡片当前是展开还是折叠。当用户点击卡片时，onClicklambda被执行，“expanded” 的值被切换，从而更新卡片的状态。结果，组合函数被重新组合，UI更新以反映卡片的新状态。

因此，这段代码为卡片设置了切换功能，允许根据"expanded" 变量的当前状态展开或折叠。

步骤3：为卡片添加内容

现在我们有了一个可点击的列作为卡片，我们可以添加卡片的内容。这可以是Jetpack Compose UI元素的任意组合，比如文本、图片或按钮。以下是内容可能的示例：

@Composable
fun ExpandableCard(title: String) {

var expanded by remember { mutableStateOf (false) }

  Card(
    shape = RoundedCornerShape(8.dp),
    elevation = 8.dp,
    modifier = Modifier
      .fillMaxWidth()
      .padding(16.dp)
      .clickable (
                  onClick { expanded = !expanded }
      )
  ) {
    Column(
    ) {
      Text(
        text = title,
        style = MaterialTheme.typography.h4,
        modifier = Modifier.padding(8.dp)
      )
      if (expanded) {
        Text(
          text = "Content Sample for Display on Expansion of Card",
          style = MaterialTheme.typography.body1,
          modifier = Modifier.padding(8.dp)
        )
      }
    }
  }
}

在这个示例中，我们为卡片的标题添加了一个Text元素，并在卡片的内容中添加了另一个条件性的Text元素。只有在卡片展开时，我们才会显示内容。

步骤4：切换展开状态

最后，我们需要添加逻辑，以便在用户点击卡片时切换卡片的展开状态。我们可以通过使用 !expanded 来更新expanded参数来实现这一点。以下是函数的最终代码：

@Composable
fun ExpandableCard(title: String) {

var expanded by remember { mutableStateOf (false) }

  Card(
    shape = RoundedCornerShape(8.dp),
    elevation = 8.dp,
    modifier = Modifier
      .fillMaxWidth()
      .padding(16.dp)
      .clickable {
                  onClick { expanded = !expanded }
      }
  ) {
    Column(
    ) {
      Text(
        text = title,
        style = MaterialTheme.typography.h4,
        modifier = Modifier.padding(8.dp)
      )
      if (expanded) {
        Text(
          text = "Content Sample for Display on Expansion of Card",
          style = MaterialTheme.typography.body1,
          modifier = Modifier.padding(8.dp)
        )
      }
    }
  }
}

当用户点击卡片时，我们调用这个函数来反转当前展开值。

重申一下，expanded 变量用于确定卡片当前是展开还是折叠。

当用户点击卡片时，onClick lambda被执行，expanded 的值被切换，从而更新卡片的状态。

结果，组合函数被重新组合，UI更新以反映卡片的新状态。

结论

在本教程中，我们探讨了在Jetpack Compose中创建可展开卡片所需的步骤。

我们首先创建了一个卡片的组合函数，然后添加了展开按钮和卡片内容，最后添加了切换卡片展开状态的逻辑。