Flutter智能建议插件get_suggestions的使用

Flutter智能建议插件get_suggestions的使用

Word Suggestions 是一个 Flutter 包，它提供了一个可自定义的 TextField 小部件，该小部件基于用户输入显示单词建议。该小部件设计为在用户输入后短暂延迟显示建议，从而提升用户体验。

特性

  • 基于用户输入的单词建议。
  • 可自定义的 TextField，具有多种样式选项。
  • 为了更好的用户体验，建议会在短暂延迟后显示。
  • 轻松集成到你的 Flutter 应用程序中。

安装

要使用此包，请在你的 pubspec.yaml 文件中添加 get_suggestions 作为依赖项。

dependencies:
  get_suggestions: ^0.1.0 # 替换为最新版本

使用示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 TextFieldWithSuggestions 小部件。

// main.dart

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '单词建议示例',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _textEditingController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('单词建议示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),

        // 这是你需要使用的控件，这个文本框像普通的文本框一样完全可自定义
        child: TextFieldWithSuggestions(
          textFieldController: _textEditingController,
          style: TextStyle(fontSize: 18),
          hintstyling: TextStyle(fontSize: 18, color: Colors.grey),
          maxLines: null,
          border: InputBorder.none,
          contentPadding: EdgeInsets.symmetric(horizontal: 24),
        ),
      ),
    );
  }
}

更多关于Flutter智能建议插件get_suggestions的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter智能建议插件get_suggestions的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


get_suggestions 是一个用于 Flutter 的智能建议插件，它可以帮助你在应用中实现自动补全或建议功能。这个插件通常用于搜索框、输入框等场景，当用户输入时，插件会根据输入内容提供相关的建议选项。

安装

首先，你需要在 pubspec.yaml 文件中添加 get_suggestions 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  get_suggestions: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本用法

  1. 导入插件：

    在你的 Dart 文件中导入 get_suggestions 插件：

    import 'package:get_suggestions/get_suggestions.dart';

  2. 创建建议列表：

    你需要一个包含所有可能建议的列表。这个列表可以是从 API 获取的，也可以是本地的。

    List<String> suggestions = [
  "Apple",
  "Banana",
  "Cherry",
  "Date",
  "Elderberry",
];

  3. 使用 GetSuggestions 组件：

    你可以使用 GetSuggestions 组件来显示建议列表。以下是一个简单的示例：

    class SuggestionExample extends StatefulWidget {
  @override
  _SuggestionExampleState createState() => _SuggestionExampleState();
}

class _SuggestionExampleState extends State<SuggestionExample> {
  final TextEditingController _controller = TextEditingController();
  List<String> filteredSuggestions = [];

  void _onTextChanged(String text) {
    setState(() {
      filteredSuggestions = getSuggestions(text, suggestions);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Get Suggestions Example'),
      ),
      body: Column(
        children: [
          TextField(
            controller: _controller,
            onChanged: _onTextChanged,
            decoration: InputDecoration(
              labelText: 'Search',
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: filteredSuggestions.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(filteredSuggestions[index]),
                  onTap: () {
                    _controller.text = filteredSuggestions[index];
                    setState(() {
                      filteredSuggestions = [];
                    });
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

  4. 实现 getSuggestions 函数：

    getSuggestions 函数用于根据输入文本过滤建议列表。你可以根据需要进行自定义：

    List<String> getSuggestions(String query, List<String> suggestions) {
  return suggestions.where((suggestion) {
    return suggestion.toLowerCase().contains(query.toLowerCase());
  }).toList();
}
回到顶部