Flutter新手开发按钮顺序游戏，无法渲染FineGioco结束组件如何解决？

问题根源 #

你遇到的问题核心有2点：

1. Flutter组件只有被加入到build方法返回的Widget树中才会被渲染，你只实例化了FineGioco对象，没有把它放到ButtonControl的build返回节点里，所以永远不会显示。
2. 缺少标记游戏结束的状态变量，无法控制结束页的展示逻辑，另外最后一个按钮的部分状态修改没有放在setState中，不会触发界面刷新。

修复方案 #

只需修改button_control.dart文件即可，步骤如下：

1. 新增游戏结束的状态标记
2. 修改最后一个按钮的点击逻辑，点击后标记游戏结束
3. 在build方法中根据状态判断展示按钮区还是结束提示

修改后的完整button_control.dart代码 #

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

class ButtonControl extends StatefulWidget {
  @override
  _ButtonControlState createState() => _ButtonControlState();
}

class _ButtonControlState extends State<ButtonControl> {
  final FineGioco testoFineGioco = FineGioco('Hai FINITO IL GIOCO');
  // 新增游戏结束状态标记
  bool _isGameFinished = false;
  bool settaVisibilita1 = true;
  bool settaVisibilita2 = false;
  bool settaVisibilita3 = false;
  bool settaVisibilita4 = false;
  bool settaVisibilita5 = false;
  bool settaVisibilita6 = false;
  bool settaVisibilita7 = false;
  bool settaVisibilita8 = false;
  bool settaVisibilita9 = false;
  bool settaVisibilita10 = false;
  bool settaVisibilita11 = false;
  bool settaVisibilita12 = false;
  bool settaVisibilita13 = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        // 游戏未结束时展示按钮区
        if (!_isGameFinished) ...[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Visibility(
                  visible: settaVisibilita1,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita1 = false;
                          settaVisibilita2 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                  visible: settaVisibilita2,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita2 = false;
                          settaVisibilita3 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                  visible: settaVisibilita3,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita3 = false;
                          settaVisibilita4 = true;
                        });
                      },
                      child: const Text('Premimi'))),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Visibility(
                  visible: settaVisibilita4,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita4 = false;
                          settaVisibilita5 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                  visible: settaVisibilita5,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita5 = false;
                          settaVisibilita6 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                  visible: settaVisibilita6,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita6 = false;
                          settaVisibilita7 = true;
                        });
                      },
                      child: const Text('Premimi'))),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Visibility(
                  visible: settaVisibilita7,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita7 = false;
                          settaVisibilita8 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                  visible: settaVisibilita8,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita8 = false;
                          settaVisibilita9 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                  visible: settaVisibilita9,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita9 = false;
                          settaVisibilita10 = true;
                        });
                      },
                      child: const Text('Premimi'))),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Visibility(
                  visible: settaVisibilita10,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita10 = false;
                          settaVisibilita11 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                  visible: settaVisibilita11,
                  child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          settaVisibilita11 = false;
                          settaVisibilita12 = true;
                          settaVisibilita13 = true;
                        });
                      },
                      child: const Text('Premimi'))),
              Visibility(
                visible: settaVisibilita13,
                child: Visibility(
                  visible: settaVisibilita12,
                  child: ElevatedButton(
                      onPressed: () {
                        // 所有状态修改都放到setState中，同时标记游戏结束
                        setState(() {
                          settaVisibilita12 = false;
                          _isGameFinished = true;
                        });
                      },
                      child: const Text('Premimi')),
                ),
              )
            ],
          ),
        ],
        // 游戏结束时展示结束提示
        if (_isGameFinished)
          testoFineGioco
      ],
    );
  }
}

补充优化建议 #

你现在用13个单独的bool变量控制按钮显示逻辑其实有点冗余，后续熟练了可以用一个int类型的当前步骤变量来控制，代码会精简很多。

内容的提问来源于stack exchange，提问作者Mattia Betti