Flutter中无法在_State类访问StatefulWidget类变量的问题

我是Flutter新手，术语表述若有错误还请见谅。我在StatefulWidget类Light的顶部定义了颜色变量originalColor，但没法在对应的_LightState子类里访问它；不过其他类的静态变量testColGray和testCol2能正常访问。我试着在Widget build(BuildContext context)方法里定义originalColor，但这时候这个变量没法在Container里被正常访问使用。

原代码 #

class Light extends StatefulWidget {
  Light({required widget.newColor, required widget.size});
  Color newColor;
  final int size;
  Color originalColor =
      PickerAndSelector.testColGray; 

  @override
  State<Light> createState() => _LightState();
}

class _LightState extends State<Light> {
  String indicator = 'non';
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(6),
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (indicator == 'non') {
              indicator = 'SEL';
              selected = true;
            } else {
              indicator = 'non';
              selected = false;
            }

            print(selected);
          });
          if (selected) originalColor = _PickerAndSelectorState.testCol2;
          // 无法访问originalColor
        },
        child: Container(
          height: widget.size.toDouble(),
          width: widget.size.toDouble(),
          color: selected ? widget.newColor : widget.originalColor,
          child: Text(indicator),
        ),
      ),
    );
  }
}

尝试修改后的代码 #

Widget build(BuildContext context) {
    Color originalColor = PickerAndSelector.testColGray;

    return Padding(
      padding: EdgeInsets.all(6),
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (indicator == 'non') {
              indicator = 'SEL';
              selected = true;
            } else {
              indicator = 'non';
              selected = false;
            }

            print(selected);
          });
          if (selected) originalColor = _PickerAndSelectorState.testCol2;
          // 无法访问originalColor
        },
        child: Container(
          height: widget.size.toDouble(),
          width: widget.size.toDouble(),
          color: selected ? widget.newColor : widget.originalColor,
          child: Text(indicator),
        ),
      ),
    );
  }

问题解决办法 #

1. 正确访问StatefulWidget成员变量 #

在State子类中，必须通过widget.前缀来访问对应StatefulWidget的成员变量。原代码中onTap里直接写originalColor是错误的，需要改为widget.originalColor。

2. 避免在build方法中定义需维护状态的变量 #

build方法会在每次setState后重新执行，若在其中定义originalColor，每次重建都会重置其值，导致之前的修改全部丢失，无法起到状态保存的作用。

3. 修正构造函数语法错误 #

原代码中构造函数Light({required widget.newColor, required widget.size});写法错误，正确的参数初始化应该使用this.前缀，改为Light({required this.newColor, required this.size});。

修正后的完整代码 #

class Light extends StatefulWidget {
  Light({required this.newColor, required this.size});
  Color newColor;
  final int size;
  Color originalColor = PickerAndSelector.testColGray; 

  @override
  State<Light> createState() => _LightState();
}

class _LightState extends State<Light> {
  String indicator = 'non';
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(6),
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (indicator == 'non') {
              indicator = 'SEL';
              selected = true;
            } else {
              indicator = 'non';
              selected = false;
            }
            print(selected);
          });
          // 通过widget.访问StatefulWidget的成员变量
          if (selected) widget.originalColor = _PickerAndSelectorState.testCol2;
        },
        child: Container(
          height: widget.size.toDouble(),
          width: widget.size.toDouble(),
          color: selected ? widget.newColor : widget.originalColor,
          child: Text(indicator),
        ),
      ),
    );
  }
}

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