一统天下 flutter - widget 文本类: Autocomplete - 自动完成

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 文本类: Autocomplete - 自动完成

示例如下:

lib\widget\text\autocomplete.dart

/*
 * Autocomplete - 自动完成
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class AutocompleteDemo extends StatefulWidget {
  const AutocompleteDemo({Key? key}) : super(key: key);

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

class _AutocompleteDemoState extends State<AutocompleteDemo> {

  static const List<String> _options = <String>[
    'aaaaaa',
    'aaabbb',
    'aabbcc',
    '111111',
    '111222',
    '112233',
  ];

  static const List<_MyUser> _options2 = <_MyUser>[
    _MyUser(name: 'aaaaaa', email: 'aaaaaa@xxxxxx.com'),
    _MyUser(name: 'aaabbb', email: 'aaabbb@xxxyyy.com'),
    _MyUser(name: 'aabbcc', email: 'aabbcc@xxyyzz.com'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title"),),
      backgroundColor: Colors.orange,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          /// 自动完成的可选数据是 String 类型的数据
          Autocomplete<String>(
            /// 根据用户的输入,构造可选数据的数据源
            optionsBuilder: (TextEditingValue textEditingValue) {
              /// 获取用户的输入内容
              log('input: ${textEditingValue.text}');
              /// 用户输入的内容为空时,则可选数据为空
              if (textEditingValue.text == '') {
                return const Iterable<String>.empty();
              }
              /// 根据用户的输入,返回符合要求的可选数据列表
              return _options.where((String option) {
                return option.contains(textEditingValue.text.toLowerCase());
              });
            },
            /// 从可选数据列表框中选中某一项时的回调
            onSelected: (String selection) {
              log('onSelected: $selection');
            },
            /// 可选数据列表框的最大高度
            optionsMaxHeight: 100,
            /// 初始的输入内容
            initialValue: const TextEditingValue(text: "1"),
          ),

          /// 自动完成的可选数据是 _MyUser 类型的数据
          Autocomplete<_MyUser>(
            /// 根据用户的输入,构造可选数据的数据源
            optionsBuilder: (TextEditingValue textEditingValue) {
              log('input: ${textEditingValue.text}');
              if (textEditingValue.text == '') {
                return const Iterable<_MyUser>.empty();
              }
              return _options2.where((_MyUser user) {
                return user.toString().contains(textEditingValue.text.toLowerCase());
              });
            },
            /// 自定义可选数据列表框的显示内容和样式等
            ///   options 是 optionsBuilder 筛选出的可选数据
            ///   onSelected 用于选中某一项时触发回调
            optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<_MyUser> onSelected, Iterable<_MyUser> options) {
              return Align(
                alignment: Alignment.centerLeft,
                child: Material(
                  child: ListView.builder(
                    itemBuilder: (BuildContext context, int index) {
                      var user = options.elementAt(index);
                      return ListTile(
                        onTap: () {
                          /// 回调,Autocomplete 的 onSelected() 会收到此回调
                          onSelected.call(user);
                        },
                        title: Text('name:${user.name}, email:${user.email}'),
                      );
                    },
                    itemCount: options.length,
                  ),
                ),
              );
            },

            /// 从可选数据列表框中选中某一项后,可以通过这里格式化选中的内容
            displayStringForOption: (_MyUser user) => "selected: " + user.toString(),
            /// 自定义 Autocomplete 的样式和行为等
            fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
              return TextFormField(
                controller: textEditingController,
                focusNode: focusNode,
                onFieldSubmitted: (String value) {
                  /// 调用 onFieldSubmitted() 之后才能走到 Autocomplete 的 optionsBuilder()
                  onFieldSubmitted();
                },
                /// 用于定义 Autocomplete 的样式
                decoration: const InputDecoration(
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(width: 2, color: Colors.red),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(width: 5, color: Colors.green),
                  ),
                ),
              );
            },

            /// 从可选数据列表框中选中某一项时的回调
            onSelected: (_MyUser user) {
              log('onSelected: ${user.toString()}');
            },
          ),
        ],
      ),
    );
  }
}

class _MyUser {
  const _MyUser({
    required this.name,
    required this.email,
  });

  final String name;
  final String email;

  @override
  String toString() {
    return '$name, $email';
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-04-26 16:58  webabcd  阅读(149)  评论(0编辑  收藏  举报