Pixel 6仿真器上的Renderflex溢出错误，而物理设备上没有

Question

我正在尝试创建一个SizedBox，其中包含一个行中的两个按钮。这方面的代码如下：

          SizedBox(
             width: 200,
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: <Widget>[
                 OutlinedButton(
                     style: OutlinedButton.styleFrom(
                       padding: const EdgeInsets.only(
                           left: 20, right: 20, top: 10, bottom: 10),
                       side: const BorderSide(width: 1, color: Colors.blue),
                       shape: const RoundedRectangleBorder(
                           borderRadius:
                               BorderRadius.all(Radius.circular(25))),
                     ),
                     onPressed: (() {}),
                     child: const Text(
                       "Cancel",
                       style: TextStyle(fontSize: 14, color: Colors.blue),
                     )),
                 ElevatedButton(
                     style: ElevatedButton.styleFrom(
                       padding: const EdgeInsets.only(
                           left: 20, right: 20, top: 10, bottom: 10),
                       backgroundColor: Colors.blue,
                       shape: const RoundedRectangleBorder(
                           borderRadius:
                               BorderRadius.all(Radius.circular(22))),
                     ),
                     onPressed: (() {}),
                     child: const Text(
                       "Save",
                       style: TextStyle(fontSize: 14, color: Colors.white),
                     )
                  ),
               ],
             ),
           ) 

在我的手机(S20 Ultra)上，它按预期工作，如下所示：工作布局截图

但是，当我在Pixel 6模拟器上运行它时，它是这样的：溢流布局截图

在仿真器上运行该程序时，我也会得到这个错误，而在我的手机上运行该应用程序时就不会得到这个错误：

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 174 pixels on the right.

The relevant error-causing widget was: 
  Row Row:file:///C:/Users/ayazb/pomodoro_app/lib/screens/homePage.dart:213:22
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#37e84 relayoutBoundary=up3 OVERFLOWING
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=200.0, 0.0<=h<=Infinity)
...  size: Size(200.0, 48.0)
...  direction: horizontal
...  mainAxisAlignment: spaceEvenly
...  mainAxisSize: max
...  crossAxisAlignment: center
...  textDirection: ltr
...  verticalDirection: down

由于某些原因，按钮中的文本在字母之间有很大的差距，这增加了按钮的大小并导致溢出。我不知道为什么按钮中的文本在模拟器上有这个缺口，而在我的手机上却没有。

有人知道怎么解决这个问题吗？

Answer 1

与其硬编码宽度，不如使用LayoutBuilder (推荐的方法，链接到API文档。)或MediaQuery.of(context).size来根据设备屏幕大小缩放小部件。

这样，您将在不同的屏幕大小之间拥有一致的UI。