FocusNode - 为什么 requestFocus() 不起作用？

Question

The following is the relevant code. The debugPrint() in the onFieldSubmitted: is running, so the code is getting here, but the focus is not changing. Focus does not change.

 _createItemHeadingWidget() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        controller: _controllerItemHed,
        autofocus: true,
        focusNode: _focusNodeItemHed,
        textInputAction: TextInputAction.next,
        onFieldSubmitted: (v) {
          debugPrint("ItemHeading submitted");
          FocusScope.of(context).requestFocus(_focusNodeItemDetail);
        },
        decoration: InputDecoration(
          labelText: "Item Heading",
          hintText: "Enter item heading",
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
        ),
      ),
    );
  }

  Widget _createItemDetailWidget() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        controller: _controllerItemDetail,
        maxLength: 75,
        focusNode: _focusNodeItemDetail,
        textInputAction: TextInputAction.next,
        onFieldSubmitted: (v) {
          debugPrint("ItemDetail submitted");
          FocusScope.of(context).requestFocus(_focusNodeItemPrice);
        },
        decoration: InputDecoration(
          labelText: "Item Detail",
          hintText: "Enter item detail",
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
        ),
      ),
    );
  }

class DataEntryState extends State<DataEntry> {
  final TextEditingController _controllerItemHed = TextEditingController();
  final TextEditingController _controllerItemDetail = TextEditingController();
  final TextEditingController _controllerItemPrice = TextEditingController();
  final TextEditingController _controllerSeller = TextEditingController();
  final TextEditingController _controllerContactNr = TextEditingController();
  final TextEditingController _controllerLocation = TextEditingController();

  final FocusNode _focusNodeItemHed = FocusNode();
  final FocusNode _focusNodeItemDetail = FocusNode();
  final FocusNode _focusNodeItemPrice = FocusNode();
  final FocusNode _focusNodeSeller = FocusNode();
  final FocusNode _focusNodeContactNr = FocusNode();
  final FocusNode _focusNodeLocation = FocusNode();

Answer 1

After trying many things that did not work, the only solution that I could find is as follows:

  _changeFocus(BuildContext context, FocusNode focusNodeCurrent,
      FocusNode focusNodeNext) {
    focusNodeCurrent.unfocus();
    setState(() => _focusNodeCurrent = focusNodeNext);
  }

debugPrint() showed that in _changeFocus(), unfocus() does work, and that requestFocus() did not work.

In the build :

    if (_focusNodeCurrent != null)
      FocusScope.of(context).requestFocus(_focusNodeCurrent);

Other relevant code (some of which is probably redundant) :

 TextFormField _createItemHeadingWidget(BuildContext context) {
    FocusScope.of(context).reparentIfNeeded(_focusNodeItemHed);
    return TextFormField(
      controller: _controllerItemHed,
      maxLength: 50,
      keyboardType: TextInputType.text,
      autofocus: _dataRec == null,
      focusNode: _focusNodeItemHed,
      textInputAction: TextInputAction.next,
      onFieldSubmitted: (v) {
        _changeFocus(context, _focusNodeItemHed, _focusNodeItemDetail);
      },
      decoration: InputDecoration(
        labelText: "Item Heading",
        hintText: "Enter item heading",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
      ),
    );
  }

Answer 2

firstFieldFocusNode.nextFocus();

对我有用

Answer 3

Doing setState() to solve this problem didn't seem to me like the optimum solution, so I kept testing. After a lot of further testing which mainly involved removing everything that I could from the app, I eventually replaced the creation of MaterialApp with creation of Scaffold. This fixed the problem. Now it appears to work as intended. All that is required is to do is:

 _changeFocus(BuildContext context, FocusNode focusNodeNew) {
    FocusScope.of(context).requestFocus(focusNodeNew);
  }

I presume that the reason I was initially creating a MaterialApp is that I copied that from another app when I was initially starting to learn Flutter. It appears that it's not necessary to create a MaterialApp, but I don't know the reasons for creating a MaterialApp as opposed to creating just the Scaffold.

Whether it is a bug in flutter that causes this behavior, I don't know. It may be just a "feature" of using MaterialApp, or perhaps I was misusing MaterialApp.

Answer 4

这是很好的解释，说明颤振中的焦点是如何工作的： https ： //flutter.dev/docs/cookbook/forms/focus

Answer 5

For anyone else struggling with this I was just playing around and made a demo.

You can switch the focus to the left or right textfields or cancel the focus. The code below is a combination of @Brian Oh 's answers and some new code. Features:

• keeps track of all nodes including no focus and current focus
• changeFocus function only requires nextFocus parameter, doesn't use FocusScope.of(context).requestFocus(_nextFocusNode) and doesn't have to set state

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home(),);
  }
}

class Home extends StatefulWidget {
  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {

  FocusNode currentFocusNode;
  FocusNode leftFocusNode;
  FocusNode rightFocusNode;
  FocusNode noFocusNode;

  @override
  void initState() {
    super.initState();
    currentFocusNode = FocusNode();
    leftFocusNode = FocusNode();
    rightFocusNode = FocusNode();
    noFocusNode = FocusNode();
  }

  @override
  void dispose() {
    //currentFocusNode.dispose();
    //leftFocusNode.dispose();
    //rightFocusNode.dispose();
    //noFocusNode.dispose();
    super.dispose();
  }

  changeFocus(FocusNode focusNodeNext) {
    currentFocusNode.unfocus();
    focusNodeNext.requestFocus();
    currentFocusNode = focusNodeNext;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.fromLTRB(0, 40, 0, 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [

            Column(
              children: <Widget>[
                Container( width: 50, child: TextField(
                  focusNode: leftFocusNode,
                ),),
                RaisedButton(
                  child: Text('^ Focus ^'),
                  onPressed: () => changeFocus(leftFocusNode),
                ),
              ],
            ),

            Column(
              children: <Widget>[
                Container( width: 50, child: TextField(
                  focusNode: rightFocusNode,
                ),),
                RaisedButton(
                  child: Text('^ Focus ^'),
                  onPressed: () => changeFocus(rightFocusNode),
                ),
              ],
            ),

            RaisedButton(
              child: Text('  Cancel Focus'),
              onPressed: () => changeFocus(noFocusNode),
            ),

          ],
        ),
      ),
    );
  }
}

EDIT:

I used this code in another app and got an error

A FocusNode was used after being disposed.

according to this github link you should't call dispose. I've commented out the dispose calls made to focus nodes above and the error disappeared.

Answer 6

Use

FocusScope.of(context).unfocus();

instead of

FocusScope.of(context).requestFocus(new FocusNode());

Answer 7

The following is the relevant code. The debugPrint() in the onFieldSubmitted: is running, so the code is getting here, but the focus is not changing. Focus does not change.

 _createItemHeadingWidget() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        controller: _controllerItemHed,
        autofocus: true,
        focusNode: _focusNodeItemHed,
        textInputAction: TextInputAction.next,
        onFieldSubmitted: (v) {
          debugPrint("ItemHeading submitted");
          FocusScope.of(context).requestFocus(_focusNodeItemDetail);
        },
        decoration: InputDecoration(
          labelText: "Item Heading",
          hintText: "Enter item heading",
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
        ),
      ),
    );
  }

  Widget _createItemDetailWidget() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        controller: _controllerItemDetail,
        maxLength: 75,
        focusNode: _focusNodeItemDetail,
        textInputAction: TextInputAction.next,
        onFieldSubmitted: (v) {
          debugPrint("ItemDetail submitted");
          FocusScope.of(context).requestFocus(_focusNodeItemPrice);
        },
        decoration: InputDecoration(
          labelText: "Item Detail",
          hintText: "Enter item detail",
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
        ),
      ),
    );
  }

class DataEntryState extends State<DataEntry> {
  final TextEditingController _controllerItemHed = TextEditingController();
  final TextEditingController _controllerItemDetail = TextEditingController();
  final TextEditingController _controllerItemPrice = TextEditingController();
  final TextEditingController _controllerSeller = TextEditingController();
  final TextEditingController _controllerContactNr = TextEditingController();
  final TextEditingController _controllerLocation = TextEditingController();

  final FocusNode _focusNodeItemHed = FocusNode();
  final FocusNode _focusNodeItemDetail = FocusNode();
  final FocusNode _focusNodeItemPrice = FocusNode();
  final FocusNode _focusNodeSeller = FocusNode();
  final FocusNode _focusNodeContactNr = FocusNode();
  final FocusNode _focusNodeLocation = FocusNode();

Answer 8

Using FocusScope.of(context).nextFocus() has worked for me

Custom Widget Code I Used

CupertinoTextFormFieldRow customTextField(
  String pretext, String supportText,
  TextEditingController controller, Function(String) validatorFun) {
  return CupertinoTextFormFieldRow(
    controller: controller,
    prefix: Text(pretext),
    placeholder: supportText,
    validator: (val) => validatorFun(val!),
    textInputAction: TextInputAction.next,
    onEditingComplete: () {
      FocusScope.of(context).nextFocus();
    },
  );
}```