Flutter 点击MaterialButton后屏幕文本未更新如何解决？

AI 小北

2026-9-25

问题原因

你遇到的是Flutter UI更新的两个典型基础问题：

你当前的页面所有组件都是Stateless 静态组件，这类组件只会在初始化时渲染一次，后续数据变更不会自动触发UI重绘。Flutter要求需要响应数据变化的场景必须使用StatefulWidget，且数据更新后主动调用setState()方法通知框架刷新对应组件。
代码存在变量作用域冲突：你在全局定义了dice变量，又在main函数内重复定义了同名局部dice变量，按钮上的Text读取的是main函数内的局部变量，而rollDice修改的是全局变量，二者本身就不是同一个存储值。

修正后的可运行代码

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white70,
        appBar: AppBar(
          title: const Text('Quick Dice'),
          backgroundColor: Colors.blueGrey,
        ),
        body: const Center(
          child: DiceButton(),
        ),
      ),
    );
  }
}

// 定义Stateful组件承载可变的骰子状态
class DiceButton extends StatefulWidget {
  const DiceButton({super.key});

  @override
  State<DiceButton> createState() => _DiceButtonState();
}

class _DiceButtonState extends State<DiceButton> {
  int _dice = 0;

  void _rollDice() {
    // 调用setState通知框架数据变更，触发重绘
    setState(() {
      _dice = Random().nextInt(6) + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      onPressed: _rollDice,
      child: Text('$_dice'),
    );
  }
}