Flutter新手关于Widget布局、组件添加及代码问题咨询

新增组件的实现方式与布局思路 #

你提出的用Column和Row组合搭建布局的思路完全正确，Flutter本身就是基于组件嵌套的树形布局体系，按钮、Text这类组件的添加位置完全由你想要的展示效果决定，核心逻辑如下：

• 若需要在现有骰子图片的水平方向追加元素：直接将组件写入当前Row的children数组即可，需要组件自动占满剩余横向空间时，在外层套Expanded组件即可，避免横向布局溢出。
• 若需要在现有骰子图片的垂直方向追加元素（比如图片上方加标题、下方加操作按钮）：将当前Center的子组件替换为Column，把现有骰子的Row、新增的Text/按钮都放入Column的children数组中即可。
• 多方向的复杂布局完全可以通过Column嵌套Row、Row嵌套Column的方式实现，这是Flutter最基础的线性布局用法，不存在思路错误。

举个在骰子下方加文本和按钮的简单结构示例：

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      // 原有放骰子图片的Row
      Row(/* 你的5个骰子图片组件 */),
      // 新增文本
      const Text('骰子点数总和：15', style: TextStyle(fontSize: 20)),
      // 新增按钮
      ElevatedButton(
        onPressed: (){
          // 后续写掷骰子的逻辑
        },
        child: const Text('开始掷骰子')
      )
    ],
  ),
)

后续你要给Container子组件绑定的关联变量，直接定义在_DiceState类中即可，通过setState修改变量时，关联的组件会自动刷新显示内容。 #

现有代码存在的问题 #

你的代码存在3个可直接修复的问题：

1. 重复嵌套Scaffold：HomeScreen中已经为MaterialApp配置了顶层Scaffold，Dice作为该Scaffold的body内容，不需要再返回一个Scaffold，多余的Scaffold会增加不必要的布局层级，甚至引发组件遮挡、padding异常。修复时直接删除_DiceStatebuild方法中返回的顶层Scaffold，直接返回Center组件即可。
2. 代码括号闭合错位：你贴出的代码中_DiceState类、build方法的闭合括号位置错误，单独放在代码块外的}需要调整到build方法的闭合位置之后，保证类结构完整。
3. 图片组件缺少溢出适配：当前5个Expanded包裹的图片组件没有配置缩放规则，在小宽度设备上容易出现布局溢出报错，建议给每个Image.asset添加fit: BoxFit.contain属性，让图片自动缩放适配可用空间。

修复后的_DiceState代码参考：

class _DiceState extends State<Dice> {
  // 后续可在此处定义和组件绑定的状态变量，比如int leftDice = 1;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/1.png', fit: BoxFit.contain))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/2.png', fit: BoxFit.contain))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/3.png', fit: BoxFit.contain))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/4.png', fit: BoxFit.contain))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/5.png', fit: BoxFit.contain)))
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Hugo Ekman