Flutter文本输入历史记录插件input_history_text_field的使用

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

Flutter文本输入历史记录插件input_history_text_field的使用

input_history_text_field 是一个Flutter插件，它可以在用户输入时自动保存并提供历史记录建议。以下是关于该插件使用的详细介绍和示例代码。

概述 Overview

列表 List

example1 example2
example1 example2

标签 Badge

example1 example2
example1 example2

自定义 Customize

customize

使用说明 Usage

只需要在应用中的组件设置 historyKey，类似于 text_field 的用法。

InputHistoryTextField(
    historyKey: "01",
),

输入内容会自动保存（默认最多保存5条）。历史记录会在用户输入时进行提示，并且可以删除。

input_history_text_field-1 input_history_text_field-2 input_history_text_field-3

示例 Example

简单用法 Simple

只需要设置 historyKey 即可。

InputHistoryTextField(
    historyKey: "01",
),

标签样式 Badge Style

将 listStyle 设置为 ListStyle.Badge 可以改变样式为标签样式。

InputHistoryTextField(
    historyKey: "01",
    listStyle: ListStyle.Badge,
),

badge_style

默认项 Default items

如果有想从一开始就显示或让用户选择的项，可以使用 lockItems。

InputHistoryTextField(
    historyKey: "01",
    lockItems: ['Flutter', 'Rails', 'React', 'Vue'],
),

default_items

修改图标 Change Icon

可以隐藏或修改图标。

InputHistoryTextField(
    historyKey: "01",
    showHistoryIcon: true,
    showDeleteIcon: true,
    historyIcon: Icons.add,
    deleteIcon: Icons.delete,
),

change_icon

渐变透明 Gradually Transmitted

设置 enableOpacityGradient 为 true，可以使输入历史列表逐渐透明。

InputHistoryTextField(
    historyKey: "01",
    enableOpacityGradient: true,
),

gradually_transmitted

行装饰 Lines Decoration

设置 listRowDecoration 可以为输入历史行添加装饰。

InputHistoryTextField(
    historyKey: "01",
    listRowDecoration: BoxDecoration(
        border: Border(
            left: BorderSide(color: Colors.blue, width: 8),
        ),
    ),
),

lines_decoration

列表装饰 List Decoration

设置 listDecoration 可以为输入历史列表添加装饰。

InputHistoryTextField(
    historyKey: "01",
    listDecoration: BoxDecoration(
        color: Colors.cyan,
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20)),
        boxShadow: [
            BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                spreadRadius: 8,
                blurRadius: 8,
                offset: Offset(0, 3)),
        ],
    ),
),

list_decoration

自定义布局 List Layout Builder

如果想要完全自定义布局，可以使用 historyListItemLayoutBuilder。

InputHistoryTextField(
    historyKey: "01",
    historyListItemLayoutBuilder: (controller, value, index) {
        return InkWell(
            onTap: () => controller.select(value.text),
            child: Row(
                children: [
                    Expanded(
                        flex: 1,
                        child: Container(
                            margin: const EdgeInsets.only(left: 10.0),
                            padding: const EdgeInsets.only(left: 10.0),
                            decoration: BoxDecoration(
                                border: Border(
                                    left: BorderSide(
                                        width: 5.0,
                                        color: index % 2 == 0 ? Colors.red : Colors.blue,
                                    ),
                                ),
                            ),
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                    Text(
                                        value.textToSingleLine,
                                        overflow: TextOverflow.ellipsis,
                                        style: TextStyle(fontWeight: FontWeight.bold),
                                    ),
                                    Text(
                                        DateTime.fromMillisecondsSinceEpoch(value.createdTime).toUtc().toString(),
                                        overflow: TextOverflow.ellipsis,
                                        style: TextStyle(fontSize: 10, color: Theme.of(context).disabledColor),
                                    ),
                                ],
                            )),
                    ),
                    IconButton(
                        icon: Icon(Icons.close, size: 16, color: Theme.of(context).disabledColor),
                        onPressed: () {
                            controller.remove(value);
                        },
                    ),
                ],
            ),
        );
    }
),

custom_layout

API

名称 示例 类型 备注
historyKey key-01 String 应用中唯一的键，用于保存历史记录
limit 5 int 输入历史的最大限制
hasFocusExpand true bool 编辑框聚焦时显示输入历史
showHistoryIcon true bool 是否显示历史记录图标
showDeleteIcon true bool 是否显示删除图标
enableHistory true bool 启用/禁用输入历史
enableSave true bool 启用/禁用保存历史
enableOpacityGradient true bool 使输入历史列表逐渐透明
enableFilterHistory true bool 输入时过滤建议的历史记录
showHistoryList true bool 显示/隐藏输入历史列表
historyIcon Icons.add IconData 历史记录图标的 IconData
historyIconTheme IconTheme IconTheme 历史记录图标的 IconTheme
deleteIcon Icons.delete IconData 删除图标的 IconData
deleteIconTheme IconTheme IconTheme 删除图标的 IconTheme
listOffset Offset(0, 5) Offset 列表的位置
listTextStyle TextStyle(fontSize: 30) TextStyle 列表的文本样式
listRowDecoration BoxDecoration Decoration 输入历史行的装饰
listDecoration BoxDecoration Decoration 输入历史列表的装饰
listStyle ListStyle.List ListStyle 改变样式为 List 或 Badge
textColor Colors.black Color 文本颜色
backGroundColor Colors.grey Color 背景颜色
historyIconColor Colors.white Color 历史记录图标颜色
deleteIconColor Colors.white Color 删除图标颜色
lockItems ['Flutter', 'Rails', 'React', 'Vue'] List 固定显示且不能删除的项
lockTextColor Colors.black Color 固定项的文本颜色
lockBackgroundColor Colors.grey Color 固定项的背景颜色
historyListItemLayoutBuilder Widget Widget 完全自定义布局
InputHistoryController InputHistoryController InputHistoryController 选择或删除输入历史列表

完整示例 Demo

以下是一个完整的示例代码，展示了如何在项目中使用 input_history_text_field 插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Sample"),
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(50),
          child: Column(
            children: <Widget>[
              Text('Enter text and done'),

              /// sample 1
              /// - list
              InputHistoryTextField(
                historyKey: "01",
                listStyle: ListStyle.List,
                decoration: InputDecoration(hintText: 'List type'),
              ),

              /// sample 2
              /// - list with updateHistoryItemDateTime
              InputHistoryTextField(
                historyKey: "02",
                listStyle: ListStyle.List,
                onHistoryItemSelected: (value) => print(value),
                updateSelectedHistoryItemDateTime: true,
                decoration: InputDecoration(
                    hintText: 'List type (update in descending order)'),
              ),

              /// sample 3
              /// - badge
              InputHistoryTextField(
                historyKey: "03",
                listStyle: ListStyle.Badge,
                showHistoryIcon: false,
                backgroundColor: Colors.lightBlue,
                textColor: Colors.white,
                deleteIconColor: Colors.white,
                decoration: InputDecoration(hintText: 'Badge type'),
              ),

              /// sample 4
              /// - lock item
              InputHistoryTextField(
                historyKey: "04",
                listStyle: ListStyle.Badge,
                lockBackgroundColor: Colors.brown.withAlpha(90),
                lockTextColor: Colors.black,
                lockItems: ['Flutter', 'Rails', 'React', 'Vue'],
                showHistoryIcon: false,
                deleteIconColor: Colors.white,
                textColor: Colors.white,
                backgroundColor: Colors.pinkAccent,
                decoration: InputDecoration(hintText: 'Fixed list'),
              ),

              /// sample 5
              /// - customize
              InputHistoryTextField(
                historyKey: "05",
                minLines: 2,
                maxLines: 10,
                limit: 3,
                enableHistory: true,
                hasFocusExpand: true,
                showHistoryIcon: true,
                showDeleteIcon: true,
                historyIcon: Icons.add,
                deleteIcon: Icons.delete,
                enableOpacityGradient: false,
                decoration: InputDecoration(hintText: 'Customize list'),
                listRowDecoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(color: Colors.red, width: 3),
                  ),
                ),
                listDecoration: BoxDecoration(
                  color: Colors.white60,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(4),
                      bottomRight: Radius.circular(4)),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey.withOpacity(0.2),
                        spreadRadius: 2,
                        blurRadius: 2,
                        offset: Offset(0, 3)),
                  ],
                ),
                historyIconTheme: IconTheme(
                  data: IconThemeData(color: Colors.red, size: 12),
                  child: Icon(Icons.add),
                ),
                deleteIconTheme: IconTheme(
                  data: IconThemeData(color: Colors.blue, size: 12),
                  child: Icon(Icons.remove_circle),
                ),
                listOffset: Offset(0, 5),
                listTextStyle: TextStyle(fontSize: 30),
                historyListItemLayoutBuilder: (controller, value, index) {
                  return InkWell(
                    onTap: () => controller.select(value.text),
                    child: Row(
                      children: [
                        Expanded(
                          flex: 1,
                          child: Container(
                              margin: const EdgeInsets.only(left: 10.0),
                              padding: const EdgeInsets.only(left: 10.0),
                              decoration: BoxDecoration(
                                border: Border(
                                  left: BorderSide(
                                    width: 5.0,
                                    color: index % 2 == 0
                                        ? Colors.red
                                        : Colors.blue,
                                  ),
                                ),
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    value.textToSingleLine,
                                    overflow: TextOverflow.ellipsis,
                                    style:
                                        TextStyle(fontWeight: FontWeight.bold),
                                  ),
                                  Text(
                                    value.createdTimeLabel,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                        fontSize: 10,
                                        color: Theme.of(context).disabledColor),
                                  ),
                                ],
                              )),
                        ),
                        IconButton(
                          icon: Icon(
                            Icons.close,
                            size: 16,
                            color: Theme.of(context).disabledColor,
                          ),
                          onPressed: () {
                            controller.remove(value);
                          },
                        ),
                      ],
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过上述代码和说明，您可以轻松地在Flutter项目中集成 input_history_text_field 插件，并根据需要进行自定义配置。希望这些信息对您有所帮助！


更多关于Flutter文本输入历史记录插件input_history_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter文本输入历史记录插件input_history_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 input_history_text_field 插件的示例代码。这个插件可以帮助你在 Flutter 应用中实现文本输入历史记录功能。

首先，确保你已经在 pubspec.yaml 文件中添加了 input_history_text_field 依赖：

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

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

接下来是一个完整的示例代码，展示了如何使用 InputHistoryTextField 组件：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final InputHistoryController _inputHistoryController = InputHistoryController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Input History TextField Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Enter text:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 8),
            Expanded(
              child: InputHistoryTextField(
                controller: _inputHistoryController,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'TextField',
                ),
                historyMenuItemBuilder: (BuildContext context, String history) {
                  return ListTile(
                    title: Text(history),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先创建了一个 InputHistoryController 实例，用于管理输入历史记录。
  2. 在 dispose 方法中，我们调用了 _inputHistoryController.dispose() 以释放资源。
  3. 在 build 方法中，我们使用 InputHistoryTextField 组件来替代普通的 TextField。这个组件接收一个 InputHistoryController 实例，并且可以通过 historyMenuItemBuilder 属性自定义历史记录菜单项的样式。

当你运行这个应用并输入文本时，你可以看到历史记录菜单项随着你的输入而变化。你可以点击菜单项来快速插入之前输入的文本。

请注意，这个示例假设你已经正确安装并导入了 input_history_text_field 插件。如果你在实际应用中遇到问题，请确保检查插件的文档和最新版本，以获取更多信息和可能的更新。

回到顶部