Flutter中setState()无法更新Android模拟器界面问题求助

问题根源 #

你犯了一个Flutter状态管理的常见错误：将需要维护状态的变量leftDiceNumber定义在了build方法内部。每次调用setState()时，Flutter会重新执行build方法，这个变量会被重新初始化为1，你在setState里修改的值直接被覆盖，所以界面完全不会有变化。你尝试的那些Stack Overflow写法针对的是其他场景，对你的问题无效，核心问题是变量的作用域不对。

修复后的代码 #

把leftDiceNumber移到_DicePageState类的成员变量位置，而非build方法内部：

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Text('Dicee'),
          backgroundColor: Colors.red,
        ),
        body: DicePage(),
      ),
    ),
  );
}

class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  // 将变量移到State类的成员位置，初始化值为1
  int leftDiceNumber = 1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Expanded(
            child: TextButton(
              onPressed: () {
                setState(() {
                  leftDiceNumber = 5;
                });
              },
              child: Image.asset('images/dice$leftDiceNumber.png'),
            ),
          ),
          Expanded(
            child: TextButton(
              onPressed: () {
                print('Right button got pressed.');
              },
              child: Image.asset('images/dice2.png'),
            ),
          ),
        ],
      ),
    );
  }
}

修复说明 #

1. 状态变量必须定义在State类的成员作用域内，这样它的值才能在多次build调用之间被保留。
2. 调用setState()时，Flutter会标记当前State为脏状态，触发build方法重新执行，此时会读取成员变量leftDiceNumber的最新值，从而更新界面上的图片。

这样修改后，点击左侧按钮就能看到骰子图片从1切换到5了。

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