阅读 622

Flutter实现代码提示功能

1.简介

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

2.RawAutocomplete

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

类型属性介绍
AutocompleteOptionsViewBuilderoptionsViewBuilder构建选项框视图
AutocompleteOptionToStringdisplayStringForOption默认是(T)t.toString() , 取T的其中一个字段显示
AutocompleteOptionsBuilderoptionsBuilder查找符合的提示选项
AutocompleteFieldViewBuilder?fieldViewBuilder构建输入框视图
FocusNode?focusNode控制输入框焦点
AutocompleteOnSelected?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 通过命令行生成资源文件引用等

文章首次发布于:rhyme95.cn/archives/61…

文章分类
前端
文章标签