Flutter:DropdownButton菜单在聚焦时不会自动打开

时间:2020-04-17 08:38:38

标签: flutter flutter-web flutter-widget dropdownbutton

我正在开发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),
              )
            ],
          ),
        ),
      ),
    );
  }
}

0 个答案:

没有答案