Flutter实现代码提示功能

1.简介

在实现代码提示功能前，我们先来看看什么是代码提示，当我输入关键字String 时，如果输入到 Stri 的时候，编辑器会为我找出所有包含 Stri 的代码关键词，这个时候，我们只要选中需要输入的关键字，它就会为我补充剩余的单词，这个就是代码提示功能，那么在Flutter 中如何实现这一功能呢？

2.RawAutocomplete

Flutter 为我们提供了这一个Widget， 在名字看来，是可以自动完成填充代码的Widget，我们来看看它的参数

类型	属性	介绍
AutocompleteOptionsViewBuilder<T>	optionsViewBuilder	构建选项框视图
AutocompleteOptionToString<T>	displayStringForOption	默认是(T)t.toString() , 取T的其中一个字段显示
AutocompleteOptionsBuilder<T>	optionsBuilder	查找符合的提示选项
AutocompleteFieldViewBuilder?	fieldViewBuilder	构建输入框视图
FocusNode?	focusNode	控制输入框焦点
AutocompleteOnSelected<T>?	onSelected	当选中选项时，会调用

3.示例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  List<String> options = [
    'int',
    'double',
    'String',
    'num',
    'void',
    'extends',
    'class',
    'Widget',
    'StatefulWidget',
    'StatelessWidget',
    'abstract',
    'BuildContext',
  ];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RawAutocomplete<String>(
        onSelected: (s) {
          print('$s');
        },
        optionsViewBuilder: (
          BuildContext context,
          AutocompleteOnSelected<String> onSelected,
          Iterable<String> options,
        ) {
          return Align(
            alignment: Alignment.topLeft,
            child: Material(
              elevation: 0.0,
              child: Container(
                color: Theme.of(context).cardColor,
                constraints: BoxConstraints(maxHeight: 360),
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    String text = options.elementAt(index);
                    return ListTile(
                      onTap: () {
                        onSelected.call(text);
                      },
                      title: Text(text),
                    );
                  },
                  itemCount: options.length,
                ),
              ),
            ),
          );
        },
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text.isEmpty) return [];
          String text = textEditingValue.text;
          if (text.contains(' ')) {
            text = text.split(' ').last;
          }
          return options
              .where((element) => RegExp('(.*)$text(.*)', caseSensitive: false)
                  .hasMatch(element))
              .toList();
        },
        fieldViewBuilder: (BuildContext context,
            TextEditingController textEditingController,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted) {
          return TextFormField(
            controller: textEditingController,
            focusNode: focusNode,
            onFieldSubmitted: (String value) {
              onFieldSubmitted();
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

4.效果如下

image.png

5.更多内容

关于我的更多插件

• r_router路由跳转，可实现路由拦截，路由注册，无Context 跳转、弹对话框
• r_logger日志打印，突破控制台输出最大字数限制
• r_upgrade应用升级，Android可实现通知栏下载进度，热更新，增量更新，跳转到应用商店，跳转网页功能，IOS实现跳转App Store，跳转网页
• r_scan 二维码/条形码扫码，可自定义扫码窗口
• r_calendar 可完全自定义的日历插件，支持多选，连选，单选，切换同步，周/月视图切换等功能
• r_dotted_line_border 可简单实现虚线边框，直接在Container使用
• r_album 实现简单同步相片到Android/IOS相册
• fluct 通过命令行生成资源文件引用等

文章首次发布于：https://rhyme95.cn/archives/611.html