我正在开发flutter
Web应用程序。我正在使用两个flutter小部件,一个是TextField,另一个是DropdownButton。当我单击文本字段并将焦点移到下拉字段上时,通过按键盘Tab键或完成文本字段编辑,我可以将焦点放在DropdownButton上,但下拉菜单无法打开以通过键盘选择值
当我将重点放在DropdownButton小部件上时,我希望此下拉菜单自动打开,在该小部件上我想使用键盘箭头键更改选择。
以下是示例代码,供您参考。您可以通过粘贴到IDE中直接运行代码。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _myActivity;
String _myActivityResult;
final formKey = new GlobalKey<FormState>();
FocusNode _dropdown = new FocusNode();
FocusNode _textField = new FocusNode();
final _dropdownButtonKey = GlobalKey();
TextEditingController textController;
@override
void initState() {
super.initState();
_myActivity = '';
_myActivityResult = '';
textController = TextEditingController.fromValue(TextEditingValue(text: textValue));
_dropdown.addListener(focusChange);
}
focusChange() {
if(_dropdown.hasFocus) {
print('drop down has focus now');
}
}
_saveForm() {
var form = formKey.currentState;
if (form.validate()) {
form.save();
setState(() {
_myActivityResult = _myActivity;
});
}
}
var textValue = '';
String dropdownValue = 'One';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form'),
),
body: Center(
child: Form(
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Focus(
child: TextField(
focusNode: _textField,
style: TextStyle(fontSize: 12.0),
autocorrect: false,
onEditingComplete: (){
_textField.unfocus();
_dropdown.requestFocus();
},
controller: textController,
keyboardType: TextInputType.text,
onChanged: (String newVal) {
setState(() {
textValue = newVal;
});
},
textAlign: TextAlign.start,
),
),
Container(
padding: EdgeInsets.all(16),
child: DropdownButton<String>(
value: dropdownValue,
focusNode: _dropdown ,
key: _dropdownButtonKey,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.deepPurple
),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
_dropdown.nextFocus();
},
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
)
),
Container(
padding: EdgeInsets.all(8),
child: RaisedButton(
child: Text('Save'),
onPressed: _saveForm,
),
),
Container(
padding: EdgeInsets.all(16),
child: Text(_myActivityResult),
)
],
),
),
),
);
}
}