ListView 中的新 TextFormField 無法聚焦

Question

我正在嘗試制作用戶可以添加的項目列表。 為了實現這一點，我決定使用一個 ListView 小部件，其中每一行都是一個 TextFormField 小部件。 我希望新添加的項目在繪制后立即獲得焦點。

我遵循了這個食譜： https : //api.flutter.dev/flutter/widgets/Focus-class.html#widgets.Focus.3

哪里有注釋解釋在構建之前調用.requestFocus()應該沒問題。

但是當我用TextFormField小部件替換ActionChip小部件時，新項目沒有獲得焦點。

這是我的代碼：

class SettingsWidget extends StatefulWidget {

  SettingsWidget(this.addIngredientsListener);

  final StreamController<String> addIngredientsListener;
  @override
  SettingsWidgetState createState() => SettingsWidgetState();
}

class SettingsWidgetState extends State<SettingsWidget> {
  final List<Widget> children = new List<Widget>();
  final List<FocusNode> childFocusNodes = new List<FocusNode>();

  @override
  void initState() {
    super.initState();
      widget.addIngredientsListener.stream.listen(_addChild);
    _addChild("init");
    _addChild("init");
  }

  @override
  void dispose() {
    super.dispose();
    childFocusNodes.forEach((node) => node.dispose());
  }

  void _addChild(String caller) {
    setState(() {

    String text = 'CHILD ${children.length}';

    // Calling requestFocus here creates a deferred request for focus, since the
    // node is not yet part of the focus tree.
    FocusNode newNode = FocusNode(debugLabel: 'Child ${children.length}')..requestFocus();
    childFocusNodes
        .add(newNode);

    TextEditingController textController = TextEditingController(
        text: text);

    children.add(
      TextFormField(
        autofocus: false,
        focusNode: newNode,
        controller: textController
    ));

    newNode.requestFocus();
    });
  }

  @override
  Widget build(BuildContext context) {
    Widget widget = ListView.separated(
        padding: const EdgeInsets.all(16.0),
        itemCount: children.length,
        itemBuilder: (context, i) {
          return children[i];
        },
      separatorBuilder: (BuildContext context, int index) => const Divider());
    return widget;
  }
}

我已成功手動請求關注列表中現有的 TextFormFields。 正因為如此，我認為一定有什么東西阻止了新人獲得焦點。

我有一個解決方法，其中手動添加的 TextFormFields 具有autofocus: true而由initState()則沒有。 只是讓我覺得手動請求關注新項目不起作用。

我也在S/O 上看到了這個問題，其中線程等待幾毫秒來調用requestFocus() 。 它也適用於我。

真的沒有比線程睡眠焦點調用更好的選擇了嗎？

版本：

[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Linux, locale en_GB.UTF-8)
    • Flutter version 1.12.13+hotfix.9 at /opt/flutter
    • Framework revision f139b11009 (5 months ago), 2020-03-30 13:57:30 -0700
    • Engine revision af51afceb8
    • Dart version 2.7.2

Answer 1

您確實首先需要解決一些編譯錯誤：

• 刪除沒有右括號的孤獨setState(() {
• 從..requestFocus();刪除多余的點..requestFocus();

之后，再次測試，看看事情是否開始工作。