Flutter自动补全标签插件flutter_autocomplete_label的使用

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

Flutter自动补全标签插件 flutter_autocomplete_label 的使用

flutter_autocomplete_label 是一个高度可定制的自动完成标签(tag)字段的小部件,支持多种功能如设置标签源、预设选中的标签等。

主要功能

  • 支持设置标签源
  • 支持预设选中的标签
  • 支持创建文本输入框
  • 支持创建可选标签列表
  • 支持创建已确认标签列表
  • 支持设置可选标签列表的垂直方向
  • 以及其他更多功能

flutter_autocomplete_label 示例

示例代码

以下是一个完整的示例demo,展示了如何使用 flutter_autocomplete_label 插件:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_autocomplete_label/autocomplete_label.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AutocompleteLabel Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'AutocompleteLabel Example Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final AutocompleteLabelController<String> _autocompleteLabelController =
      AutocompleteLabelController<String>(source: [
    "Android",
    "iOS",
    "Flutter",
    "Windows",
    "Web",
    "Fuchsia",
    "Dart",
    "Golang",
    "Java",
    "Python",
    "Ruby",
    "c/c++",
    "Kotlin",
    "Swift",
    "HTML",
    "CSS",
    "JavaScript",
    "PHP",
    "GitHub",
    "Google",
    "Facebook",
    "KnowlGraph",
    "Twitter",
    "Tiktok",
    "StackOverflow",
    "WeiXin",
    "Alibaba",
    "youtube",
  ]);

  bool _keepAutofocus = false;

  [@override](/user/override)
  void dispose() {
    _autocompleteLabelController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          Switch(
            value: _keepAutofocus,
            onChanged: (value) {
              setState(() {
                _keepAutofocus = value;
              });
            },
          )
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(
          child: Row(
            children: [
              Expanded(
                flex: 1,
                child: AutocompleteLabel<String>(
                  keepAutofocus: _keepAutofocus,
                  onChanged: (values) => print("$values"),
                  autocompleteLabelController: _autocompleteLabelController,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何使用 flutter_autocomplete_label 插件的示例代码。这个插件允许你在 Flutter 应用中实现自动补全标签的功能。首先,确保你已经在 pubspec.yaml 文件中添加了该插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_autocomplete_label: ^最新版本号  # 请替换为实际的最新版本号

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

接下来是一个完整的示例代码,展示了如何使用 flutter_autocomplete_label 插件:

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

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

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

class AutoCompleteLabelDemo extends StatefulWidget {
  @override
  _AutoCompleteLabelDemoState createState() => _AutoCompleteLabelDemoState();
}

class _AutoCompleteLabelDemoState extends State<AutoCompleteLabelDemo> {
  final List<String> suggestions = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Elderberry',
    'Fig',
    'Grape',
    'Honeydew',
    'Kiwi',
    'Lemon'
  ];

  final TextEditingController _controller = TextEditingController();
  List<String> _selectedLabels = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AutoComplete Label Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AutoCompleteLabelField<String>(
              suggestions: suggestions,
              onSubmitted: (label) {
                setState(() {
                  _selectedLabels.add(label);
                  _controller.clear();
                });
              },
              onDeleted: (label) {
                setState(() {
                  _selectedLabels.remove(label);
                });
              },
              controller: _controller,
              itemBuilder: (context, label) {
                return ListTile(
                  title: Text(label),
                );
              },
              selectedLabels: _selectedLabels,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Type to add a label',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _controller.clear();
                    setState(() {
                      // Optionally, you can also clear selected labels here if needed
                      // _selectedLabels.clear();
                    });
                  },
                ),
              ),
            ),
            SizedBox(height: 16),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: List.generate(
                _selectedLabels.length,
                (index) => Chip(
                  label: Text(_selectedLabels[index]),
                  onDeleted: () {
                    setState(() {
                      _selectedLabels.removeAt(index);
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖引入:在 pubspec.yaml 中添加 flutter_autocomplete_label 依赖。
  2. 主函数:创建一个基本的 Flutter 应用。
  3. 数据准备:定义一个 suggestions 列表,其中包含可能的自动补全建议。
  4. 状态管理:使用 StatefulWidget 来管理选中的标签和文本控制器。
  5. 界面构建
    • 使用 AutoCompleteLabelField 小部件来创建自动补全标签输入框。
    • 配置 suggestionsonSubmittedonDeleted 回调来处理用户输入和删除操作。
    • 使用 itemBuilder 来自定义建议项的显示方式。
    • 使用 selectedLabels 来显示已选中的标签。
    • 使用 InputDecoration 来美化输入框。
  6. 已选中标签显示:使用 WrapChip 小部件来显示已选中的标签,并提供删除功能。

这个示例代码展示了如何使用 flutter_autocomplete_label 插件来创建一个带有自动补全功能的标签输入框,并显示用户已选中的标签。你可以根据需要进一步自定义和扩展这个示例。

回到顶部