flutter - 如何将焦点转移到 Flutter 中的下一个自定义文本字段？

Question

根据:How to shift focus to next textfield in flutter? ，我使用 FocusScope.of(context).nextFocus() 来转移焦点。但当您使用可重用的文本字段类时，这不起作用。仅当您直接在 Column 中使用 TextField 类时，它才有效。

import 'package:flutter/material.dart';

void main() {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final focus = FocusScope.of(context);
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              CustomTextField(
                textInputAction: TextInputAction.next,
                onEditingComplete: () => focus.nextFocus(),
              ),
              const SizedBox(height: 10),
              CustomTextField(
                textInputAction: TextInputAction.done,
                onEditingComplete: () => focus.unfocus(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CustomTextField extends StatelessWidget {
  final TextInputAction textInputAction;
  final VoidCallback onEditingComplete;

  const CustomTextField({
    this.textInputAction = TextInputAction.done,
    this.onEditingComplete = _onEditingComplete,
  });

  static _onEditingComplete() {}

  @override
  Widget build(BuildContext context) {
    return TextField(
      textInputAction: textInputAction,
      onEditingComplete: onEditingComplete,
    );
  }
}

在此代码中，如果我单击键盘中的“下一步”，它不会将焦点转移到下一个文本字段。请帮我解决这个问题。

Answer 1

那是因为上下文没有任何可以捕获焦点的东西。将您的代码替换为:

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final focus = FocusScope.of(context);
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          CustomTextField(
            textInputAction: TextInputAction.next,
            onEditingComplete: () => focus.nextFocus(),
          ),
          SizedBox(height: 10),
          CustomTextField(
            textInputAction: TextInputAction.done,
            onEditingComplete: () => focus.unfocus(),
          ),
        ],
      ),
    );
  }
}