Flutter开发：如何从一个Widget控制另一个Widget的状态

问题解决方法 #

你当前代码失效的核心原因是回调函数没有执行：你在按钮点击逻辑中写的是collapseContainer;，没有加函数调用的括号，自然不会触发父组件的状态更新，把这行改成collapseContainer();即可生效。

完整的规范实现方案 #

1. 父组件侧代码

clickedCenterFAB 状态归持有AnimatedContainer的父组件所有，在父组件中实现收起容器的方法，传给子组件UploadPage：

// 父组件State中定义状态与收起方法
bool clickedCenterFAB = false;

void _collapseContainer() {
  setState(() {
    clickedCenterFAB = false;
  });
}

// 构建AnimatedContainer时传入方法
AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  height: clickedCenterFAB ? MediaQuery.of(context).size.height : 10.0,
  // 注：原代码width误用了size.height，这里修正为size.width更符合全屏展开的预期
  width: clickedCenterFAB ? MediaQuery.of(context).size.width : 10.0,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(clickedCenterFAB ? 0.0 : 300.0),
    color: Colors.blue,
  ),
  child: clickedCenterFAB ? UploadPage(_collapseContainer) : null
)

2. UploadPage子组件侧代码

Flutter中State子类可以直接通过widget.属性名访问父组件传入的参数，不需要单独在State中存储变量，类型上用VoidCallback代替泛用的Function，类型更安全：

class UploadPage extends StatefulWidget {
  // 指定无参无返回值的回调类型，避免参数不匹配的问题
  final VoidCallback collapseContainer;
  const UploadPage(this.collapseContainer, {super.key});

  @override
  _UploadPageState createState() => _UploadPageState();
}

class _UploadPageState extends State<UploadPage> {
  ...
  CustomButton(
    () {
      final inputText = _controller.text.trim();
      if (inputText.isNotEmpty) {
        final currentUser = FirebaseAuth.instance.currentUser;
        // 增加用户非空判断，避免未登录场景下的空异常
        if (currentUser != null) {
          DatabaseServices().uploadPost(
            currentUser.uid,
            inputText,
            !_isChecked
          );
          // 加括号执行父组件传入的回调方法
          widget.collapseContainer();
        }
      }
    },
    'Post',
    Colors.white,
  ),
}

额外优化建议 #

• 建议为CustomButton的回调参数指定明确的类型（比如final VoidCallback onTap），避免传入不符合预期的函数
• 展开AnimatedContainer时可以额外增加键盘弹出的适配，避免输入框被键盘遮挡

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