Flutter标签输入插件chips的使用

Flutter标签输入插件chips的使用

在您的Flutter应用中添加可定制且易于使用的标签输入插件（Chip组件），以实现流畅的用户输入和展示。

您可以查看一个使用Widgetbook的实时演示：https://adbonnin.github.io/flutter_chips

Pub

开始使用

在您的库中添加以下导入：

import 'package:chips/chips.dart';

然后只需添加一个带有值的ChoiceChips组件：

ChipsChoice(
  values: ['Apple', 'Banana'],
)

完整示例

以下是一个完整的示例代码，展示了如何使用ChipsChoice和ChipsInputField组件来实现标签输入功能。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chips Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化标签值列表
  var _values = ['Apple', 'Apricot', 'Banana', 'Kiwi'];
  // 初始化选中的标签集合
  var _selected = {'Banana'};

  // 更新标签值的方法
  void _onChanged(List<String> values) {
    setState(() => _values = values);
  }

  // 更新选中的标签集合的方法
  void _onSelectionChanged(Set<String> selected) {
    setState(() => _selected = selected);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(16),
        alignment: Alignment.center,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 显示标签选择器
            ChipsChoice(
              values: _values,
              selected: _selected,
              onChanged: _onChanged,
              onSelectionChanged: _onSelectionChanged,
            ),
            const SizedBox(height: 24),
            // 显示标签输入框
            ChipsInputField(
              values: _values,
              onChanged: _onChanged,
              fromText: (text) => text,
            )
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter中，Chips 是一种常见的UI元素，通常用于显示标签、过滤选项、选择项等。Flutter 提供了 Chip 和 InputChip 等组件来实现标签输入功能。如果你想实现一个标签输入的功能，可以使用 InputChip 结合 TextField 或 Wrap 来实现。

以下是一个简单的示例，展示如何使用 InputChip 和 TextField 来实现标签输入功能：

import 'package:flutter/material.dart';

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

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

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

class _ChipInputDemoState extends State<ChipInputDemo> {
  List<String> tags = [];
  final TextEditingController _textController = TextEditingController();

  void _addTag(String tag) {
    if (tag.isNotEmpty && !tags.contains(tag)) {
      setState(() {
        tags.add(tag);
      });
      _textController.clear();
    }
  }

  void _removeTag(String tag) {
    setState(() {
      tags.remove(tag);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Wrap(
            spacing: 8.0,
            children: tags.map((tag) {
              return InputChip(
                label: Text(tag),
                onDeleted: () => _removeTag(tag),
              );
            }).toList(),
          ),
          TextField(
            controller: _textController,
            decoration: InputDecoration(
              labelText: 'Enter a tag',
            ),
            onSubmitted: _addTag,
          ),
        ],
      ),
    );
  }
}
回到顶部