FilterChip帮助您实现标签过滤功能

Android

2023-12-27 05:43:55

在 Flutter 中使用 FilterChip 实现多选功能

简介

FilterChip 是 Flutter 中一个常用的 Material Design 组件，它允许用户通过选中或取消选中标签来过滤列表中的项目。FilterChip 具有高度的可定制性和交互性，使其成为实现多选功能的理想选择。

FilterChip 的属性

FilterChip 提供了多种属性，可用于定制其外观和行为，包括：

label： 标签的文本内容
avatar： 标签前面的可选图像或图标
selected： 指示标签是否被选中的布尔值
onSelected： 标签被选中或取消选中时调用的回调函数
selectedColor： 选中标签时的背景颜色
disabledColor： 禁用标签时的背景颜色

FilterChip 的事件

FilterChip 还提供以下事件，可用于监听标签的交互：

onSelected： 标签被选中或取消选中时触发
onTap： 标签被点击时触发

实现多选功能

要使用 FilterChip 实现多选功能，我们需要：

创建一个 List<String> 来存储选中的标签。
创建一个 FilterChipWidget，并将 List<String> 作为参数传递给它。
为 FilterChipWidget 添加一个 onSelectionChanged 事件监听器，以便在用户选中或取消选中标签时更新 List<String>。

示例代码

以下示例代码演示了如何在 Flutter 中使用 FilterChip 实现多选功能：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FilterChip Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> selectedLabels = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FilterChip Example'),
      ),
      body: Column(
        children: [
          FilterChipWidget(
            labels: ['A', 'B', 'C', 'D', 'E'],
            selectedLabels: selectedLabels,
            onSelectionChanged: (labels) {
              setState(() {
                selectedLabels = labels;
              });
            },
          ),
          Text('Selected labels: ${selectedLabels.join(', ')}'),
        ],
      ),
    );
  }
}

class FilterChipWidget extends StatefulWidget {
  final List<String> labels;
  final List<String> selectedLabels;
  final Function(List<String>) onSelectionChanged;

  FilterChipWidget({
    required this.labels,
    required this.selectedLabels,
    required this.onSelectionChanged,
  });

  @override
  _FilterChipWidgetState createState() => _FilterChipWidgetState();
}

class _FilterChipWidgetState extends State<FilterChipWidget> {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: widget.labels.map((label) {
        return FilterChip(
          label: Text(label),
          selected: widget.selectedLabels.contains(label),
          onSelected: (selected) {
            var newSelectedLabels = widget.selectedLabels;
            if (selected) {
              newSelectedLabels.add(label);
            } else {
              newSelectedLabels.remove(label);
            }
            widget.onSelectionChanged(newSelectedLabels);
          },
        );
      }).toList(),
    );
  }
}

高级用法

除了实现多选功能，FilterChip 还可以用于其他更高级的场景，例如：

多级过滤： 创建嵌套的 FilterChip 组以实现多级过滤。
动态标签： 使用 StreamBuilder 或 ChangeNotifier 来动态更新 FilterChip 的标签列表。
自定义外观： 通过自定义 FilterChip 的 shape、elevation 和 shadowColor 等属性来创建独特的外观。