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.示例代码
代码语言：javascript复制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
