如何使用 FocusNode() 在顫動中專注於 DropdownButtonFormField？

Question

我想使用FocusScope.of(context).nextFocus()或FocusScope.of(context).requestFocus(_myNextNode)關注Form 中TextFormField 的DropdownButtonFormField 。

問題是 DropdownButtonFormField 不提供focusNode屬性。

我看到focusNode在DropdownButton 中可用。

示例應用程序代碼：

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: 'ListeTile Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() {
    return HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> {
  var _formKey = GlobalKey<FormState>();
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(),
        body: Form(
            key: _formKey,
            child: Column(children: <Widget>[
              TextFormField(
                onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
              ),
              DropdownButtonFormField(
                value: dropdownValue,
                items: <String>['One', 'Two', 'Free', 'Four']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
                onChanged: (String newValue) {
                  setState(() {
                    dropdownValue = newValue;
                  });
                },
              )
            ])),
      ),
    );
  }
}

你知道怎么做嗎？

Answer 1

盡管DropdownButtonFormField小部件沒有focusNode屬性，但您可以使用Focus和一個Listener包裝此小部件以實現所需的結果。 下面的示例工作代碼：

FocusNode _node = new FocusNode();

  @override
  Widget build(BuildContext context) {

    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(),
            body: Form(
                key: _formKey,
                child: Column(children: <Widget>[
                  TextFormField(
                    onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
                  ),
                  Focus(
                      focusNode: _node,
                      onFocusChange: (bool focus) {
                        setState((){});
                      },
                      child: Listener(
                          onPointerDown: (_) {
                            FocusScope.of(context).requestFocus(_node);
                          },
                          child: DropdownButtonFormField(
                            value: dropdownValue,
                            items: <String>['One', 'Two', 'Free', 'Four']
                                .map<DropdownMenuItem<String>>((String value) {
                              return DropdownMenuItem<String>(
                                value: value,
                                child: Text(value),
                              );
                            }).toList(),
                            onChanged: (String newValue) {
                              setState(() {
                                dropdownValue = newValue;
                              });
                            },
                            iconSize: 50,
                            style: TextStyle(color: _node.hasFocus ? Colors.black : Colors.white70, fontSize: 24),

                            hint: Text('Select',
                              style: TextStyle(color: _node.hasFocus ? Colors.white : Colors.white70),
                            ),

                          )

                      )
                  )]))));

這導致：當您在textfield輸入一些文本並點擊 tab 時，它會將焦點轉移到dropdownbuttonformfield第一項上。 然后您可以使用鍵盤的 Tab 鍵瀏覽其中的其他項目。 在突出顯示的項目上點擊 Enter 將使該項目在下拉列表中被選中。

此解決方案源自此討論。

希望這能回答你的問題。