有没有办法保持键盘焦点？

Question

我有一个 TextField 小部件可以在列表中添加玩家。但是我希望键盘在添加玩家时保持焦点，并且在提交时，我的键盘一直失去焦点..有什么想法吗？

这是我的 TextField 小部件：

TextField(
          textCapitalization: TextCapitalization.words,
          onChanged: (val) => playerName = val.trim(),
          onSubmitted: (val) {
            if (playerName != null && playerName != '') {
              Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
              HapticFeedback.lightImpact();
            }
          },
          maxLength: 19,
          autocorrect: false,
          decoration: new InputDecoration(
              counterText: "",
              border: new OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: const BorderRadius.all(
                  const Radius.circular(30.0),
                ),
              ),
              filled: true,
              contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
              hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
              hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
              fillColor: Colors.white),
        )

顺便说一句，autofocus: true 可以工作，但它有点使键盘失焦并立即将焦点返回……所以看起来不太好。所以如果你有其他想法，请。

Answer 1

我认为你应该尝试使用 FocusNode。

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Define the focus node. To manage the lifecycle, create the FocusNode in
  // the initState method, and clean it up in the dispose method.
  FocusNode myFocusNode;

  @override
  void initState() {
    super.initState();

    myFocusNode = FocusNode();
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    myFocusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
          focusNode: myFocusNode
          textCapitalization: TextCapitalization.words,
          onChanged: (val) => playerName = val.trim(),
          onSubmitted: (val) {
            if (playerName != null && playerName != '') {
              Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
              HapticFeedback.lightImpact();
            }
            myFocusNode.requestFocus();
          },
          maxLength: 19,
          autocorrect: false,
          decoration: new InputDecoration(
              counterText: "",
              border: new OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: const BorderRadius.all(
                  const Radius.circular(30.0),
                ),
              ),
              filled: true,
              contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
              hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
              hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
              fillColor: Colors.white),
        );
  }
}

Answer 2

好吧，您可以使用 FocusNode。 但我有一个解决方法。 我通常设置 autovalidate:true 并且在验证器中总是返回一些文本。 因此，每当用户单击文本字段时，它永远不会失去焦点。 因此，颤振始终将焦点放在文本字段上。 但为此，您必须使用 TextFormField。

但正确的方法是使用 FocusNode。 这是代码。

TextFormField (
autovalidate : true
              validator: (value) {
                return '';
              },
              textCapitalization: TextCapitalization.words,
              onChanged: (val) => playerName = val.trim(),
              onSaved: (val) {
               

             if (playerName != null && playerName != '') {
               Provider.of<PlayerProvider>(context, listen: false).addPlayer(playerName);
                HapticFeedback.lightImpact();
              }
              },
              maxLength: 19,
              autocorrect: false,
              decoration: new InputDecoration(
                  counterText: "",
                  border: new OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(30.0),
                    ),
                  ),
                  errorBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(30.0),
                    ),
                  ),
                  focusedErrorBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(30.0),
                    ),
                  ),
                  filled: true,
                  contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
                hintStyle: GoogleFonts.rubik(color: Colors.grey[500], fontWeight: FontWeight.bold),
               hintText: AppLocalizations.of(context).translate('player_selection_page_hint'),
                  fillColor: Colors.white),
            )

然后你可以用它来调用onSaved方法

_formKey.currentState.save(); // And it will call the onSaved method

这里是_formKey

Form(
    key: _formKey,
child: Widget(),
),

将整个小部件树包装在您的 textformfield 所在的位置。