Flutter字段建议插件field_suggestion的使用

Flutter中的field_suggestion插件可以帮助开发者快速实现输入框的自动补全和建议功能。本文将详细介绍如何安装、配置并使用此插件，以及提供完整的示例代码。

安装

要开始使用field_suggestion插件，请先将其添加到项目的pubspec.yaml文件中：

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

然后运行flutter pub get以下载并安装依赖项。更多详细的安装指南可以参考官方Wiki。

使用方法

基本用法

以下是使用FieldSuggestion的基本示例，它展示了如何为用户名输入框提供基于本地数据源的建议：

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FieldSuggestion Example',
      home: HomePage(),
      theme: ThemeData.dark(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  final boxController = BoxController();
  final textController = TextEditingController();
  
  List<String> suggestions = ['Rasul', 'Andro', 'Onur', 'Ismael', 'Davit'];

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        boxController.close?.call();
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Scaffold(
        appBar: AppBar(title: Text("FieldSuggestion Basic Example")),
        body: Padding(
          padding: const EdgeInsets.all(15),
          child: FieldSuggestion<String>(
            inputDecoration: InputDecoration(
              hintText: 'Username',
            ),
            textController: textController,
            suggestions: suggestions,
            search: (item, input) {
              return item.toLowerCase().contains(input.toLowerCase());
            },
            itemBuilder: (context, index) {
              return GestureDetector(
                onTap: () {
                  setState(() {
                    textController.text = suggestions[index];
                  });
                  textController.selection = TextSelection.fromPosition(
                    TextPosition(offset: textController.text.length),
                  );
                },
                child: Card(
                  child: ListTile(title: Text(suggestions[index])),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个简单的应用界面，其中包含一个带有自动完成功能的文本输入框。当用户开始键入时，插件会根据预定义的suggestions列表显示匹配的结果。

网络请求获取建议

对于需要从服务器获取建议的情况，可以使用FieldSuggestion.network构造函数。下面是一个模拟网络延迟返回用户名建议的例子：

Future<List<String>> future(String input) => Future<List<String>>.delayed(
      Duration(seconds: 1),
      () => strSuggestions
          .where((s) => s.toLowerCase().contains(input.toLowerCase()))
          .toList(),
    );

// 在build方法内使用network方式
FieldSuggestion<String>.network(
  future: (input) => future.call(input),
  boxController: boxControllerNetwork,
  textController: textControllerNetwork,
  inputDecoration: InputDecoration(
    hintText: 'Username',
  ),
  builder: (context, snapshot) {
    if (snapshot.connectionState != ConnectionState.done) {
      return Center(child: CircularProgressIndicator());
    }

    final result = snapshot.data ?? [];
    return ListView.builder(
      itemCount: result.length,
      padding: EdgeInsets.zero,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            setState(() => textControllerNetwork.text = result[index]);
            textControllerNetwork.selection = TextSelection.fromPosition(
              TextPosition(offset: textControllerNetwork.text.length),
            );
            boxControllerNetwork.close?.call();
          },
          child: Card(
            child: ListTile(title: Text(result[index])),
          ),
        );
      },
    );
  },
)

这里我们定义了一个异步函数future来模拟网络请求，并将其传递给FieldSuggestion.network。通过这种方式，你可以轻松地集成任何后端API来动态加载建议内容。

更多功能与自定义

除了上述基本功能外，field_suggestion还支持更多高级特性和自定义选项，如设置不同的样式、处理复杂的模型对象等。具体可查阅官方文档了解更多信息。

此外，如果你有兴趣参与该项目或遇到问题需要帮助，欢迎访问GitHub仓库查看贡献指南或者提交Issue。

希望这篇文章能够帮助你更好地理解和使用field_suggestion插件！如果有任何疑问，欢迎留言交流。