Flutter标签选择插件flutter_chip_choice的使用

flutter_chip_choice 是一个轻量级的标签选择插件，无需依赖其他库，可以轻松实现单选或多选功能。本文将详细介绍如何在 Flutter 中使用 flutter_chip_choice 插件，并提供完整的代码示例。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 flutter_chip_choice 依赖：

dependencies:
  flutter_chip_choice: ^0.1.0

然后运行以下命令以更新依赖：

flutter pub get

2. 导入包

在需要使用的 Dart 文件中导入 flutter_chip_choice 包：

import 'package:flutter/material.dart';
import 'package:flutter_chip_choice/flutter_chip_choice.dart';

3. 创建标签选择界面

以下是一个完整的示例代码，展示如何使用 flutter_chip_choice 实现单选或多选功能。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Chip Choice 示例'),
        ),
        body: ChipChoiceExample(),
      ),
    );
  }
}

class ChipChoiceExample extends StatefulWidget {
  [@override](/user/override)
  _ChipChoiceExampleState createState() => _ChipChoiceExampleState();
}

class _ChipChoiceExampleState extends State<ChipChoiceExample> {
  // 定义可选项列表
  List<String> options = [
    '选项1',
    '选项2',
    '选项3',
    '选项4',
    '选项5',
  ];

  // 定义已选中的选项
  List<String> selectedOptions = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          // 单选示例
          Text('单选模式', style: TextStyle(fontSize: 18)),
          SizedBox(height: 8),
          FlutterChipChoice<String>(
            options: options,
            value: selectedOptions.isEmpty ? null : selectedOptions.first,
            onChanged: (value) {
              setState(() {
                selectedOptions.clear();
                selectedOptions.add(value);
              });
            },
            itemBuilder: (context, option) => Chip(
              label: Text(option),
              backgroundColor: Colors.blue[100],
              deleteIconColor: Colors.red,
            ),
          ),
          SizedBox(height: 16),

          // 多选示例
          Text('多选模式', style: TextStyle(fontSize: 18)),
          SizedBox(height: 8),
          FlutterChipChoice<String>(
            options: options,
            value: selectedOptions,
            onChanged: (value) {
              setState(() {
                if (selectedOptions.contains(value)) {
                  selectedOptions.remove(value);
                } else {
                  selectedOptions.add(value);
                }
              });
            },
            itemBuilder: (context, option) => Chip(
              label: Text(option),
              backgroundColor: Colors.green[100],
              deleteIconColor: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

yibo5220 1楼•22 天前

更多关于Flutter标签选择插件flutter_chip_choice的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_chip_choice 是一个用于在 Flutter 应用中实现标签选择功能的插件。它允许用户从一组标签中选择一个或多个标签，并且可以自定义标签的外观和行为。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_chip_choice 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_chip_choice: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示了如何使用 flutter_chip_choice 插件：

import 'package:flutter/material.dart';
import 'package:flutter_chip_choice/flutter_chip_choice.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Chip Choice Example'),
        ),
        body: ChipChoiceExample(),
      ),
    );
  }
}

class ChipChoiceExample extends StatefulWidget {
  @override
  _ChipChoiceExampleState createState() => _ChipChoiceExampleState();
}

class _ChipChoiceExampleState extends State<ChipChoiceExample> {
  List<String> _selectedTags = [];

  final List<String> _tags = [
    'Flutter',
    'Dart',
    'Widget',
    'State',
    'Animation',
    'Layout',
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          ChipChoice<String>.multiple(
            value: _selectedTags,
            onChanged: (value) {
              setState(() {
                _selectedTags = value;
              });
            },
            choiceItems: C2Choice.listFrom<String, String>(
              source: _tags,
              value: (index, item) => item,
              label: (index, item) => item,
            ),
            choiceStyle: C2ChipStyle.outlined(),
            choiceActiveStyle: C2ChipStyle.filled(),
          ),
          SizedBox(height: 20),
          Text('Selected Tags: ${_selectedTags.join(', ')}'),
        ],
      ),
    );
  }
}

代码解释

ChipChoice.multiple: 这是一个多选标签组件，允许用户选择多个标签。value 属性用于存储当前选中的标签列表，onChanged 回调在用户选择或取消选择标签时触发。
C2Choice.listFrom: 用于生成标签列表。source 是标签的数据源，value 和 label 分别用于指定标签的值和显示文本。
C2ChipStyle: 用于自定义标签的样式。outlined 表示标签的默认样式为轮廓样式，filled 表示选中标签的样式为填充样式。
Text: 用于显示当前选中的标签。

自定义样式

你可以通过 C2ChipStyle 来进一步自定义标签的样式，例如颜色、边框、圆角等：

ChipChoice<String>.multiple(
  value: _selectedTags,
  onChanged: (value) {
    setState(() {
      _selectedTags = value;
    });
  },
  choiceItems: C2Choice.listFrom<String, String>(
    source: _tags,
    value: (index, item) => item,
    label: (index, item) => item,
  ),
  choiceStyle: C2ChipStyle.outlined(
    backgroundColor: Colors.grey[200],
    borderColor: Colors.grey,
    borderRadius: BorderRadius.circular(20),
  ),
  choiceActiveStyle: C2ChipStyle.filled(
    backgroundColor: Colors.blue,
    borderColor: Colors.blue,
    borderRadius: BorderRadius.circular(20),
  ),
),

单选模式

如果你只需要用户选择一个标签，可以使用 ChipChoice.single：

ChipChoice<String>.single(
  value: _selectedTags.isNotEmpty ? _selectedTags.first : null,
  onChanged: (value) {
    setState(() {
      _selectedTags = [value];
    });
  },
  choiceItems: C2Choice.listFrom<String, String>(
    source: _tags,
    value: (index, item) => item,
    label: (index, item) => item,
  ),
  choiceStyle: C2ChipStyle.outlined(),
  choiceActiveStyle: C2ChipStyle.filled(),
),