前言

筛选标签（Filter Chips）是移动应用中常见的交互组件，广泛应用于内容筛选、条件过滤等场景。用户通过点击不同的标签来切换筛选条件，从而快速找到感兴趣的内容。本文将详细介绍如何在Flutter和OpenHarmony平台上实现功能完善的筛选标签组件。

一个优秀的筛选标签组件需要具备清晰的选中状态反馈、流畅的切换动画、以及灵活的布局适配能力。通过本文的学习，开发者将掌握在两个平台上实现专业级筛选功能的核心技术。

Flutter筛选标签实现

状态管理与数据定义

筛选标签需要维护当前选中项的状态，并在状态变化时通知父组件。

class FilterChipsWidget extends StatefulWidget {
  final Function(String) onCategoryChanged;

  const FilterChipsWidget({super.key, required this.onCategoryChanged});

  @override
  State<FilterChipsWidget> createState() => _FilterChipsWidgetState();
}

这里定义了一个接收回调函数的StatefulWidget。onCategoryChanged回调用于在筛选条件变化时通知父组件，这是Flutter中常用的父子组件通信方式。

通过required关键字确保调用者必须提供回调函数，这是Dart空安全特性的体现。这种设计模式使得组件具有良好的复用性，可以在不同页面中使用同一个筛选组件。

筛选状态与选项定义

在State类中定义筛选选项和当前选中状态。

class _FilterChipsWidgetState extends State<FilterChipsWidget> {
  String _selectedFilter = '全部';
  final filters = ['全部', '最新', '热门', '推荐', '评分高'];

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 8)],
      ),

_selectedFilter存储当前选中的筛选项，默认为"全部"。filters列表定义了所有可用的筛选选项。Container配合BoxDecoration创建白色圆角背景和阴影效果，使筛选区域在视觉上与其他内容区分开来。这种卡片式的设计风格在现代应用中非常流行。

FilterChip组件使用

Flutter提供了Material Design风格的FilterChip组件，可以快速实现筛选标签功能。

      child: Wrap(
        spacing: 8,
        children: filters.map((filter) {
          final isSelected = _selectedFilter == filter;
          return FilterChip(
            label: Text(filter),
            selected: isSelected,
            onSelected: (selected) {
              setState(() => _selectedFilter = filter);
              widget.onCategoryChanged(filter);
            },
            selectedColor: const Color(0xFF8B4513).withOpacity(0.2),
            checkmarkColor: const Color(0xFF8B4513),
          );
        }).toList(),
      ),
    );
  }
}

Wrap组件实现自动换行的标签布局，spacing属性控制标签之间的水平间距。FilterChip是Flutter Material库提供的筛选标签组件，内置了选中状态的视觉反馈。selected属性控制选中状态，onSelected回调处理点击事件。selectedColor设置选中时的背景色，checkmarkColor设置选中标记的颜色。通过setState更新状态并调用回调函数通知父组件。

OpenHarmony鸿蒙实现

组件定义与状态声明

鸿蒙平台使用ArkTS语法定义筛选组件。

@Component
struct FilterChipsComponent {
  @State selectedFilter: string = '全部'
  private filters: Array<string> = ['全部', '最新', '热门', '推荐', '评分高']
  onFilterChanged: (filter: string) => void = () => {}

@State装饰器声明响应式状态变量selectedFilter。filters数组定义筛选选项，由于是静态数据不需要@State装饰。onFilterChanged是组件对外暴露的回调函数，用于通知父组件筛选条件的变化。鸿蒙的组件通信方式与Flutter类似，都是通过回调函数实现。

筛选标签布局

使用Flex组件实现自适应的标签布局。

  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.filters, (item: string) => {
          Text(item)
            .fontSize(14)
            .fontColor(this.selectedFilter === item ? '#FFFFFF' : '#666666')
            .backgroundColor(this.selectedFilter === item ? '#8B4513' : '#F5F5F5')
            .borderRadius(20)
            .padding({ left: 16, right: 16, top: 8, bottom: 8 })
            .margin(4)
            .onClick(() => {
              this.selectedFilter = item
              this.onFilterChanged(item)
            })
        })
      }
    }
    .width('90%')
    .padding(12)
    .backgroundColor(Color.White)
    .borderRadius(12)
  }
}

Flex组件配合FlexWrap.Wrap实现自动换行布局。通过三元表达式根据选中状态动态设置文字颜色和背景色，选中项使用品牌色背景和白色文字，未选中项使用灰色背景和深色文字。onClick事件更新选中状态并触发回调。鸿蒙的响应式系统会自动检测@State变量的变化并更新UI。

高级功能扩展

在实际项目中，筛选标签组件还可以扩展更多功能。可以支持多选模式，允许用户同时选择多个筛选条件。可以添加动画效果，使选中状态的切换更加流畅。可以实现筛选条件的持久化，在页面切换后保持用户的选择。对于复杂的筛选场景，还可以支持筛选条件的组合和嵌套。

无论是Flutter还是OpenHarmony，筛选标签的核心逻辑都是状态管理和UI更新。理解这一点后，开发者可以根据具体需求灵活定制筛选组件的功能和样式。

总结

本文详细介绍了Flutter和OpenHarmony平台上筛选标签组件的实现方法。从状态管理、组件通信、到UI构建，每个环节都进行了深入讲解。筛选标签虽然是一个简单的组件，但其中涉及的状态管理和组件通信模式在复杂应用开发中同样适用。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net