[英]how can i select suggestion from textfield using up & down arrow while texting flutter
如何在 flutter 中使用向上和向下箭頭在文本字段中寫入時從建議中獲得 select 文本。 如圖所示
使用自動完成 class
import 'package:flutter/material.dart';
void main() => runApp(const AutocompleteExampleApp());
class AutocompleteExampleApp extends StatelessWidget {
const AutocompleteExampleApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Autocomplete Basic User'),
),
body: const Center(
child: AutocompleteBasicUserExample(),
),
),
);
}
}
@immutable
class User {
const User({
required this.email,
required this.name,
});
final String email;
final String name;
@override
String toString() {
return '$name, $email';
}
@override
bool operator ==(Object other) {
if (other.runtimeType != runtimeType) {
return false;
}
return other is User && other.name == name && other.email == email;
}
@override
int get hashCode => Object.hash(email, name);
}
class AutocompleteBasicUserExample extends StatelessWidget {
const AutocompleteBasicUserExample({Key? key}) : super(key: key);
static const List<User> _userOptions = <User>[
User(name: 'Alice', email: 'alice@example.com'),
User(name: 'Bob', email: 'bob@example.com'),
User(name: 'Charlie', email: 'charlie123@gmail.com'),
];
static String _displayStringForOption(User option) => option.name;
@override
Widget build(BuildContext context) {
return Autocomplete<User>(
displayStringForOption: _displayStringForOption,
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable<User>.empty();
}
return _userOptions.where((User option) {
return option
.toString()
.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (User selection) {
debugPrint('You just selected ${_displayStringForOption(selection)}');
},
);
}
}
代碼取自: https://api.flutter.dev/flutter/material/Autocomplete-class.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.