Flutter标签编辑插件material_tag_editor的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter标签编辑插件material_tag_editor的使用

material_tag_editor是一个用于在Flutter应用中创建和编辑标签的简单组件。它允许用户输入多个标签,并且可以通过分隔符(如逗号或空格)来区分不同的标签。此外,它还支持自定义标签样式、添加删除功能等特性。

更新说明

从版本0.0.6开始,修复了TagEditor命名参数的拼写错误,将delimeters改为delimiters。这是一项破坏性更改,请确保在升级后更新您的代码以匹配新的参数名称。

使用方法

添加依赖

首先,在pubspec.yaml文件中添加material_tag_editor作为依赖项:

dependencies:
  material_tag_editor: ^latest_version # 替换为最新版本号

然后执行flutter pub get来安装该包。

导入库

接下来,在Dart文件顶部导入这个库:

import 'package:material_tag_editor/tag_editor.dart';

使用组件

以下是如何使用TagEditor组件的基本示例:

TagEditor(
  length: values.length, // 标签列表长度
  delimiters: [',', ' '], // 分隔符数组
  hasAddButton: true, // 是否显示添加按钮
  inputDecoration: const InputDecoration(
    border: InputBorder.none,
    hintText: 'Hint Text...',
  ),
  onTagChanged: (newValue) {
    setState(() {
      values.add(newValue);
    });
  },
  tagBuilder: (context, index) => _Chip(
    index: index,
    label: values[index],
    onDeleted: onDelete,
  ),
)

这里我们创建了一个TagEditor实例,并指定了几个重要的属性:

  • length: 当前已有的标签数量。
  • delimiters: 用来分割输入文本成不同标签的字符集合。
  • hasAddButton: 是否展示一个“添加”按钮。
  • inputDecoration: 自定义输入框外观。
  • onTagChanged: 当新标签被添加时触发此回调函数。
  • tagBuilder: 定义如何构建每个单独的标签项,默认推荐使用Material Design风格的Chip小部件。

示例代码

下面给出一个完整的例子,演示了如何在一个页面中集成TagEditor并实现基本功能:

import 'package:flutter/material.dart';
import 'package:material_tag_editor/tag_editor.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Tag Editor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Material Tag Editor Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> _values = [];
  final FocusNode _focusNode = FocusNode();
  final TextEditingController _textEditingController = TextEditingController();

  void _onDelete(int index) {
    setState(() {
      _values.removeAt(index);
    });
  }

  /// 模拟通过TextEditingController操作TextField
  void _onPressedModifyTextField() {
    final text = 'Test';
    _textEditingController.text = text;
    _textEditingController.value = _textEditingController.value.copyWith(
      text: text,
      selection: TextSelection(
        baseOffset: text.length,
        extentOffset: text.length,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ''),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ListView(
            children: <Widget>[
              TagEditor(
                length: _values.length,
                controller: _textEditingController,
                focusNode: _focusNode,
                delimiters: [',', ' '],
                hasAddButton: true,
                resetTextOnSubmitted: true,
                textStyle: const TextStyle(color: Colors.grey),
                onSubmitted: (outstandingValue) {
                  setState(() {
                    _values.add(outstandingValue);
                  });
                },
                inputDecoration: const InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Hint Text...',
                ),
                onTagChanged: (newValue) {
                  setState(() {
                    _values.add(newValue);
                  });
                },
                tagBuilder: (context, index) => _Chip(
                  index: index,
                  label: _values[index],
                  onDeleted: _onDelete,
                ),
                inputFormatters: [
                  FilteringTextInputFormatter.deny(RegExp(r'[/\\]'))
                ],
              ),
              const Divider(),
              ElevatedButton(
                onPressed: _onPressedModifyTextField,
                child: const Text('Use Controller to Set Value'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _Chip extends StatelessWidget {
  const _Chip({
    required this.label,
    required this.onDeleted,
    required this.index,
  });

  final String label;
  final ValueChanged<int> onDeleted;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Chip(
      labelPadding: const EdgeInsets.only(left: 8.0),
      label: Text(label),
      deleteIcon: const Icon(
        Icons.close,
        size: 18,
      ),
      onDeleted: () {
        onDeleted(index);
      },
    );
  }
}

在这个例子中,我们创建了一个包含TagEditor的小部件,并设置了相关的配置选项。同时,我们还提供了一个按钮来演示如何通过TextEditingController直接修改输入框内容。希望这段代码可以帮助您更好地理解和使用material_tag_editor插件!


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用material_tag_editor插件的示例代码。这个插件允许你创建一个标签编辑器,用户可以在其中添加、删除和编辑标签。

首先,你需要在你的pubspec.yaml文件中添加material_tag_editor依赖:

dependencies:
  flutter:
    sdk: flutter
  material_tag_editor: ^x.y.z  # 请替换为最新版本号

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

接下来是一个完整的示例代码,展示如何在Flutter应用中使用material_tag_editor

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tag Editor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TagEditorScreen(),
    );
  }
}

class TagEditorScreen extends StatefulWidget {
  @override
  _TagEditorScreenState createState() => _TagEditorScreenState();
}

class _TagEditorScreenState extends State<TagEditorScreen> {
  final TextEditingController _controller = TextEditingController();
  List<String> _tags = ['Flutter', 'Dart', 'Material Design'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tag Editor Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            MaterialTagEditor(
              initialTags: _tags,
              onTagsChanged: (newTags) {
                setState(() {
                  _tags = newTags;
                });
              },
              textController: _controller,
              onTagAdded: (newTag) {
                print("Added tag: $newTag");
              },
              onTagDeleted: (deletedTag) {
                print("Deleted tag: $deletedTag");
              },
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Tags',
                helperText: 'Press enter to add a tag',
              ),
            ),
            SizedBox(height: 16.0),
            Text('Current Tags: $_tags.join(", ")'),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

解释

  1. 依赖添加

    • pubspec.yaml文件中添加material_tag_editor依赖。
  2. 应用入口

    • MyApp是一个无状态的小部件,它定义了应用程序的主题和主页。
  3. 主屏幕

    • TagEditorScreen是一个有状态的小部件,它维护一个标签列表和文本控制器。
  4. 标签编辑器

    • MaterialTagEditor小部件用于显示和编辑标签。
    • initialTags属性设置初始标签列表。
    • onTagsChanged回调函数在标签列表更改时被调用。
    • textController用于控制输入文本。
    • onTagAddedonTagDeleted回调函数分别在添加和删除标签时被调用。
    • decoration属性定义了输入装饰,包括边框、标签文本和辅助文本。
  5. 显示当前标签

    • 一个简单的Text小部件用于显示当前标签列表。
  6. 资源清理

    • dispose方法中释放文本控制器资源。

通过这个示例,你可以轻松地在Flutter应用中使用material_tag_editor插件来创建和管理标签。

回到顶部