Flutter 如何跨dart文件调用组件函数控制Visibility显示隐藏Row

解决方案 #

你要实现的是子组件触发父组件的状态更新，属于Flutter最基础的父子组件通信场景，不用额外做全局变量文件，按下面步骤改代码即可： #

第一步：修正Visibility控件的作用范围

你现在的代码里Visibility包裹了整个弹窗，修改_isVisible会隐藏整个弹窗，不符合你「只隐藏底部评分按钮Row」的需求，先调整位置：

1. 删掉SafeArea下包裹整个Stack的Visibility组件
2. 给底部包含评分、Noter按钮的Row外层套Visibility，绑定_isVisible参数：

// 父组件AnimeMovieDialog的底部代码修改为
Visibility(
  visible: _isVisible,
  child: Row(children: [
    // 你原来的评分组件、Noter按钮的代码全部保留放在这里
  ]),
)

第二步：给子组件CardAnimeMovie添加回调参数

子组件点击后需要通知父组件更新状态，所以给子组件加一个回调函数参数：

class CardAnimeMovie extends StatefulWidget {
  // 新增回调参数，点击卡片时触发
  final VoidCallback onCardTap;
  // 新增构造函数
  const CardAnimeMovie({super.key, required this.onCardTap});

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

第三步：子组件点击时调用回调

修改CardAnimeMovie里GestureDetector的onTap逻辑：

GestureDetector(
  onTap: () {
    // 调用父组件传过来的回调函数，不用自己写ratechange方法
    widget.onCardTap();
  },
  // 其余布局代码全部保留不变
)

第四步：父组件调用子组件时传入回调

修改AnimeMovieDialog里渲染CardAnimeMovie的代码，传入父组件的状态更新函数：
如果你需要点击切换显隐就传_change方法，需要点击直接隐藏就传_close方法：

ListView(
  children: [
    CardAnimeMovie(onCardTap: _change),
    CardAnimeMovie(onCardTap: _change),
    // 剩下的所有CardAnimeMovie都按上面的格式传参即可
  ],
)

补充说明

你之前用全局变量的方法不生效的原因是：Flutter的UI刷新依赖setState触发，直接修改全局变量不会通知框架重绘UI，所以不会生效。

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