我正在尝试使用 Flutter 制作计算器应用程序的副本 UI，但我遇到了一些问题答案

【问题标题】：I am trying to make a replica UI of a calculator app using Flutter and I am stuck in a few things我正在尝试使用 Flutter 制作计算器应用程序的副本 UI，但我遇到了一些问题
【发布时间】：2021-05-26 00:19:51
【问题描述】：

我已经能够制作 UI 的主要部分，但仍然很少有元素给我带来问题。

这是应用程序原始 UI 的屏幕截图。

Original Screenshot

这是我到现在为止使用 Flutter 制作的 UI 截图

Screenshot of UI made with the help of flutter

现在请您帮助我了解如何使 '=' 容器像原始屏幕截图中一样转到最右侧。以及我应该如何将第一行对齐到与原始 UI 相同的级别。

这是我为包含所有数字的容器制作的代码。

Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Color(0xFF212121),
                borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0)),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Icon(Icons.remove, color: Colors.grey, size: 40.0,),
                  Buttons(
                    widget1: Text('AC', style: kNumber2TextStyle,),
                    widget2: Icon(Icons.backspace_outlined, size: 25.0, color: Colors.white,),
                    widget3: Text('%', style: kNumberTextStyle,),
                    widget4: Text('÷', style: kButton2TextStyle,),
                  ),
                  Buttons(
                    widget1: Text('7', style: kNumberTextStyle,),
                    widget2: Text('8', style: kNumberTextStyle,),
                    widget3: Text('9', style: kNumberTextStyle,),
                    widget4: Text('x', style: kButtonTextStyle,),
                  ),
                  Buttons(
                    widget1: Text('4', style: kNumberTextStyle,),
                    widget2: Text('5', style: kNumberTextStyle,),
                    widget3: Text('6', style: kNumberTextStyle,),
                    widget4: Text('-', style: kButton2TextStyle,),
                  ),
                  Buttons(
                    widget1: Text('1', style: kNumberTextStyle,),
                    widget2: Text('2', style: kNumberTextStyle,),
                    widget3: Text('3', style: kNumberTextStyle,),
                    widget4: Text('+', style: kButtonTextStyle,),
                  ),
                  Buttons(
                    widget1: Text('.', style: kNumberTextStyle,),
                    widget2: Text('0', style: kNumberTextStyle,),
                    widget3: Text('( )', style: kNumberTextStyle,),
                    widget4: Container(
                      padding: EdgeInsets.all(30.0),
                      color: Color(0xFFFFBE00),
                      child: Text('=', style: kNumberTextStyle,),
                    ),
                  ),
                ],
              ),
            ),
          )

请帮忙！

【问题讨论】：

标签： android flutter user-interface dart flutter-layout

【解决方案1】：

有几种方法可以实现这一点，作为学习曲线，我建议您阅读 flexible / expanded 的工作原理

列和里面的行，每一行都会包含按钮，使用灵活或展开以占据整行，不管显示。

【讨论】：