一統天下 flutter - widget 文本類: Autocomplete - 自動完成
示例如下:
lib\widget\text\autocomplete.dart
/*
* Autocomplete - 自動完成
*/
import 'package:flutter/material.dart';
import '../../helper.dart';
class AutocompleteDemo extends StatefulWidget {
const AutocompleteDemo({Key? key}) : super(key: key);
@override
_AutocompleteDemoState createState() => _AutocompleteDemoState();
}
class _AutocompleteDemoState extends State<AutocompleteDemo> {
static const List<String> _options = <String>[
'aaaaaa',
'aaabbb',
'aabbcc',
'111111',
'111222',
'112233',
];
static const List<_MyUser> _options2 = <_MyUser>[
_MyUser(name: 'aaaaaa', email: '[email protected]'),
_MyUser(name: 'aaabbb', email: '[email protected]'),
_MyUser(name: 'aabbcc', email: '[email protected]'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("title"),),
backgroundColor: Colors.orange,
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
/// 自動完成的可選數據是 String 類型的數據
Autocomplete<String>(
/// 根據用戶的輸入，構造可選數據的數據源
optionsBuilder: (TextEditingValue textEditingValue) {
/// 獲取用戶的輸入內容
log('input: ${textEditingValue.text}');
/// 用戶輸入的內容爲空時，則可選數據爲空
if (textEditingValue.text == '') {
return const Iterable<String>.empty();
}
/// 根據用戶的輸入，返回符合要求的可選數據列表
return _options.where((String option) {
return option.contains(textEditingValue.text.toLowerCase());
});
},
/// 從可選數據列表框中選中某一項時的回調
onSelected: (String selection) {
log('onSelected: $selection');
},
/// 可選數據列表框的最大高度
optionsMaxHeight: 100,
/// 初始的輸入內容
initialValue: const TextEditingValue(text: "1"),
),
/// 自動完成的可選數據是 _MyUser 類型的數據
Autocomplete<_MyUser>(
/// 根據用戶的輸入，構造可選數據的數據源
optionsBuilder: (TextEditingValue textEditingValue) {
log('input: ${textEditingValue.text}');
if (textEditingValue.text == '') {
return const Iterable<_MyUser>.empty();
}
return _options2.where((_MyUser user) {
return user.toString().contains(textEditingValue.text.toLowerCase());
});
},
/// 自定義可選數據列表框的顯示內容和樣式等
/// options 是 optionsBuilder 篩選出的可選數據
/// onSelected 用於選中某一項時觸發回調
optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<_MyUser> onSelected, Iterable<_MyUser> options) {
return Align(
alignment: Alignment.centerLeft,
child: Material(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
var user = options.elementAt(index);
return ListTile(
onTap: () {
/// 回調，Autocomplete 的 onSelected() 會收到此回調
onSelected.call(user);
},
title: Text('name:${user.name}, email:${user.email}'),
);
},
itemCount: options.length,
),
),
);
},
/// 從可選數據列表框中選中某一項後，可以通過這裏格式化選中的內容
displayStringForOption: (_MyUser user) => "selected: " + user.toString(),
/// 自定義 Autocomplete 的樣式和行爲等
fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
return TextFormField(
controller: textEditingController,
focusNode: focusNode,
onFieldSubmitted: (String value) {
/// 調用 onFieldSubmitted() 之後才能走到 Autocomplete 的 optionsBuilder()
onFieldSubmitted();
},
/// 用於定義 Autocomplete 的樣式
decoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Colors.red),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 5, color: Colors.green),
),
),
);
},
/// 從可選數據列表框中選中某一項時的回調
onSelected: (_MyUser user) {
log('onSelected: ${user.toString()}');
},
),
],
),
);
}
}
class _MyUser {
const _MyUser({
required this.name,
required this.email,
});
final String name;
final String email;
@override
String toString() {
return '$name, $email';
}
}