Flutter/Dart跨类传TextField值到App Bar需点击两次按钮问题求助

• 你在实例化CustomButton时传入的AppBarVar: _textfield.text，只会在MyHomePage执行build方法时取值一次。你在TextField输入内容时没有触发MyHomePage的重绘，所以CustomButton内部持有的widget.AppBarVar一直是初始的空值。
• 第一次点击按钮时，你把旧的空值通过回调传给父组件，触发父组件setState重绘，这时候才会把TextField最新的输入值重新传给CustomButton，所以第二次点击时传递的才是正确的最新值。
• 额外冗余点：CustomButton的onPressed中调用自身的setState完全没有必要，你没有修改CustomButton内部的状态，这行代码可以直接删掉。

推荐使用第一种方案，性能更优、组件耦合度更低：

方案1：调整回调逻辑，无需提前传递输入值 #

不需要把TextField的值提前传给按钮组件，点击时父组件直接读取最新的输入值即可，修改代码如下：

修改main.dart #

// 调整回调方法，不需要接收参数，直接读取controller的最新值
_callback(){
  setState(() {
    AppBarVar = _textfield.text;
  });
}

// 实例化CustomButton时无需传入AppBarVar参数
CustomButton(callback: _callback)

修改customButton.dart #

import 'package:flutter/material.dart';

// 直接改为无状态组件即可，无需管理自身状态
class CustomButton extends StatelessWidget {
  final Function callback;

  const CustomButton({Key? key, required this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: (){
        // 直接调用回调即可，不需要调用自身setState
        callback();
      },
      child: const Text('Send to AppBar'),
    );
  }
}

方案2：监听TextField输入变化，实时更新传参 #

如果你确实需要把值提前传给按钮组件，可以给TextField加onChange回调，每次输入都触发父组件重绘，更新CustomButton的参数：

// 给main.dart中的TextField增加onChanged回调
TextField(
  controller: _textfield,
  keyboardType: TextInputType.text,
  decoration: const InputDecoration(
    hintText: 'Enter Values pass to Appbar'
  ),
  // 每次输入触发setState，更新CustomButton的入参
  onChanged: (_) => setState((){}),
),

该方案每次输入都会触发整页重绘，性能低于方案1，不优先推荐。

内容的提问来源于stack exchange，提问作者ISOs