Flutter中点击ElevatedButton无响应问题求助

问题现象 #

点击生成按钮（ElevatedButton）后界面无更新，控制台无报错，但onPressedGenerater函数内的number变量能正常打印输出（见测试截图）。

问题根源 #

在onPressedGenerater函数中，你重新声明了局部变量Set<int> number = {}，这会覆盖类的成员变量number。你在setState里修改的只是这个局部变量，而非类的成员变量，所以setState无法触发界面更新——因为组件依赖的类成员变量根本没变化。

修复代码 #

修改onPressedGenerater函数，移除局部变量的声明，直接操作类的成员变量number，同时优化部分代码规范：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:randome/HomeScreen/setting_screen.dart';
import 'package:randome/constant/color.dart';

class Homescreen extends StatefulWidget {
  const Homescreen({Key? key}) : super(key: key);

  @override
  State<Homescreen> createState() => _HomescreenState();
}

class _HomescreenState extends State<Homescreen> {
  final rand = Random();
  Set<int> number = {};
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: PRIMARY_COLOR,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Header(),
              Middle(number: number),
              Bottom(onPressed: onPressedGenerater),
            ],
          ),
        ),
      ),
    );
  }
  
  void onPressedGenerater() {
    setState(() {
      number.clear();
      // 用while循环确保生成4个不重复的随机数，逻辑更简洁
      while (number.length < 4) {
        number.add(rand.nextInt(1500));
      }
      print(number);
    });
  }
}

class Header extends StatelessWidget {
  const Header({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Text(
        "랜덤숫자 생성기",
        style: TextStyle(
            color: Colors.white, fontSize: 30.0, fontWeight: FontWeight.w700),
      ),
      IconButton(
          onPressed: () async {
            await Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => Settingscreen()));
          },
          icon: Icon(Icons.settings, color: RED_COLOR)),
    ]);
  }
}

class Middle extends StatelessWidget {
  final Set<int> number;
  const Middle({required this.number, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: number
            .toList()
            .asMap()
            .entries
            .map(
              (x) => Padding(
                padding: EdgeInsets.only(bottom: x.key == 2 ? 0 : 16.0),
                child: Row(
                  children: x.value
                      .toString()
                      .split("")
                      // 过滤空字符串，避免加载不存在的图片资源
                      .where((y) => y.isNotEmpty)
                      .map(
                        (y) => Image.asset(
                          "asset/img/$y.png",
                          height: 70.0,
                          width: 50.0,
                        ),
                      )
                      .toList(),
                ),
              ),
            )
            .toList(),
      ),
    );
  }
}

class Bottom extends StatelessWidget {
  final VoidCallback onPressed;

  const Bottom({required this.onPressed, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: ElevatedButton(
          style: ElevatedButton.styleFrom(primary: RED_COLOR),
          onPressed: onPressed,
          child: Text("생성하기")),
    );
  }
}

额外优化说明 #

1. 类名规范：遵循Dart大驼峰命名规则修正所有类名，符合语言规范。
2. 生成逻辑简化：替换原有的双重循环为while循环，更简洁地确保生成4个不重复随机数。
3. 图片加载优化：增加空字符串过滤，避免因数字转字符串拆分出空字符导致加载不存在的图片资源。
4. 代码精简：简化导航跳转代码，去掉冗余的类型声明。

内容的提问来源于stack exchange，提问作者박진혁