使用Jetpack Compose构建可折叠Card

使用Jetpack Compose构建可折叠Card_第1张图片

使用Jetpack Compose构建可折叠Card

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

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

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

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

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

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

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

这只是展开式卡片在Android应用开发中的几个应用示例。
使用Jetpack Compose构建可折叠Card_第2张图片

逐步教程:在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" 变量的当前状态展开或折叠。
使用Jetpack Compose构建可折叠Card_第3张图片

步骤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中创建可展开卡片所需的步骤。

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

你可能感兴趣的:(jetpack,compose,android)