Flutter如何跨类访问变量实现点击按钮更换背景图片

Flutter采用单向数据流设计，不建议直接跨类访问其他类的私有变量，你可以通过回调函数配合ValueNotifier实现需求，既不用把代码写在同一个类里，也能做到仅更新背景区域不重建整个页面，修改步骤如下：

步骤1：改造子组件，新增回调参数 #

给你的background组件新增点击触发的回调参数，点击按钮时直接调用父组件传入的回调即可，无需处理状态修改逻辑：

// 注意Dart类名规范请用大驼峰，这里统一改成Background
class Background extends StatefulWidget {
  // 定义点击切换背景时触发的回调
  final VoidCallback onSwitchBg;
  const Background({super.key, required this.onSwitchBg});

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

class BackgroundG extends State<Background> {
  @override
  Widget buildbottom() {
    return Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          CircleAvatar(
            radius: 25,
            backgroundColor: Colors.white,
            child: IconButton(
              icon: Image.asset('images/icon2.png'),
              // 点击时调用传入的回调
              onPressed: () => widget.onSwitchBg(),
            ),
          ),
        ]);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          SizedBox(height: 100),
          buildbottom(),
        ],
      ),
    );
  }
}

步骤2：改造父组件，实现局部更新 #

将背景路径改为ValueNotifier类型，配合ValueListenableBuilder包裹背景区域，做到仅背景部分刷新，同时在调用子组件时传入切换逻辑的回调：

class CustomMainPageState extends State<SecondRoute> {
  Color myColor = Color(0xff5D6592);
  // 用ValueNotifier包裹路径，实现局部监听更新
  final ValueNotifier<String> _imagepath1 = ValueNotifier("images/image3.jpg");
  final String _imagepath2 = "images/image4.jpg";
  

  Widget build(BuildContext context) => ValueListenableBuilder<String>(
    // 监听背景路径变化
    valueListenable: _imagepath1,
    builder: (context, currentPath, child) {
      return Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                // 直接使用回调返回的当前路径
                image: AssetImage(currentPath), fit: BoxFit.cover)),
        child: Scaffold(
          // 你的其他Scaffold内容
          // 调用子组件的位置传入切换逻辑
          body: Background(
            onSwitchBg: () {
              // 这里写你自己的切换逻辑，示例为两张图互换
              if(_imagepath1.value == "images/image3.jpg") {
                _imagepath1.value = _imagepath2;
              } else {
                _imagepath1.value = "images/image3.jpg";
              }
            },
          ),
        ),
      );
    }
  );
}

这种实现方式下，点击按钮只会触发ValueListenableBuilder包裹的背景区域更新，页面其他部分不会重建，完全满足你的性能要求。

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