1.簡(jiǎn)介
在實(shí)現(xiàn)代碼提示功能前沪悲，我們先來看看什么是代碼提示，當(dāng)我輸入關(guān)鍵字String 時(shí)阱表，如果輸入到 Stri 的時(shí)候殿如，編輯器會(huì)為我找出所有包含 Stri 的代碼關(guān)鍵詞，這個(gè)時(shí)候最爬，我們只要選中需要輸入的關(guān)鍵字涉馁，它就會(huì)為我補(bǔ)充剩余的單詞，這個(gè)就是代碼提示功能爱致，那么在Flutter 中如何實(shí)現(xiàn)這一功能呢烤送？
2.RawAutocomplete
Flutter 為我們提供了這一個(gè)Widget， 在名字看來糠悯，是可以自動(dòng)完成填充代碼的Widget帮坚，我們來看看它的參數(shù)
| 類型 | 屬性 | 介紹 |
|---|---|---|
| AutocompleteOptionsViewBuilder<T> | optionsViewBuilder | 構(gòu)建選項(xiàng)框視圖 |
| AutocompleteOptionToString<T> | displayStringForOption | 默認(rèn)是(T)t.toString() , 取T的其中一個(gè)字段顯示 |
| AutocompleteOptionsBuilder<T> | optionsBuilder | 查找符合的提示選項(xiàng) |
| AutocompleteFieldViewBuilder? | fieldViewBuilder | 構(gòu)建輸入框視圖 |
| FocusNode? | focusNode | 控制輸入框焦點(diǎn) |
| AutocompleteOnSelected<T>? | onSelected | 當(dāng)選中選項(xiàng)時(shí)妻往，會(huì)調(diào)用 |
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.更多內(nèi)容
關(guān)于我的更多插件
-
r_router路由跳轉(zhuǎn)，可實(shí)現(xiàn)路由攔截试和，路由注冊(cè)讯泣，無Context 跳轉(zhuǎn)、彈對(duì)話框 -
r_logger日志打印阅悍，突破控制臺(tái)輸出最大字?jǐn)?shù)限制 -
r_upgrade應(yīng)用升級(jí)好渠，Android可實(shí)現(xiàn)通知欄下載進(jìn)度，熱更新节视，增量更新拳锚，跳轉(zhuǎn)到應(yīng)用商店，跳轉(zhuǎn)網(wǎng)頁功能肴茄，IOS實(shí)現(xiàn)跳轉(zhuǎn)App Store晌畅，跳轉(zhuǎn)網(wǎng)頁 -
r_scan二維碼/條形碼掃碼，可自定義掃碼窗口 -
r_calendar可完全自定義的日歷插件寡痰，支持多選抗楔，連選，單選拦坠，切換同步连躏，周/月視圖切換等功能 -
r_dotted_line_border可簡(jiǎn)單實(shí)現(xiàn)虛線邊框，直接在Container使用 -
r_album實(shí)現(xiàn)簡(jiǎn)單同步相片到Android/IOS相冊(cè) -
fluct通過命令行生成資源文件引用等
文章首次發(fā)布于：https://rhyme95.cn/archives/611.html
