右溢出如何处理答案

【问题标题】：how to handle the right overflowed右溢出如何处理
【发布时间】：2021-09-27 22:38:17
【问题描述】：

我连续创建了 3 个三个容器，它在模拟器上运行良好，但是当我在我的安卓手机上运行应用程序时，它给了我right overflowed by 20 pixels 错误。

我找到了将其包装在 SingleChildScrollView 中的解决方案，但我不想滚动屏幕，我想在不滚动的情况下修复它。

这是模拟器

上的输出

这是 andriod 的输出

代码：

Padding(
              padding: EdgeInsets.only(top: 100),
              
              child: Row(
                
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  
                  new Container(
                    decoration: BoxDecoration(
                        color: Colors.pink,
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                    height: 100,
                    width: 180,
                    child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Last total working hours",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text(totalWorkingHours(),
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                            Text("Hours",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                          ]),
                        )),
                  ),
                  new Container(
                      decoration: BoxDecoration(
                          color: Color(int.parse(presentcolor)),
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      height: 100,
                      width: 100,
                      child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Presents",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text("20",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                           
                          ]),
                        )),
                      ),
                  new Container(
                      decoration: BoxDecoration(
                          color: Color(int.parse(absentcolor)),
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      height: 100,
                      width: 100,
                       child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Absents",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text("0",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                           
                          ]),
                        )),),
                ],
              )),

更新： 感谢您提供的所有解决方案，我尝试了它们并得到了相同的输出，这是快照

但我想要容器之间的空间，我为此使用spacer，但它再次干扰了容器的宽度。

这是更新的代码

Container(
              width: MediaQuery.of(context).size.width,
              child: FittedBox(
                // Scales down if size is not enough.
                fit: BoxFit.scaleDown,
                child: Padding(
                    padding: EdgeInsets.only(top: 100),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        new Container(
                          decoration: BoxDecoration(
                              color: Colors.pink,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 180,
                          child: Padding(
                              padding: EdgeInsets.only(top: 15),
                              child: Center(
                                child: Column(children: <Widget>[
                                  Text("Last total working hours",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: headfontsize,
                                          fontFamily: fontFamily)),
                                  Text(totalWorkingHours(),
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                  Text("Hours",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                ]),
                              )),
                        ),
                        new Container(
                          decoration: BoxDecoration(
                              color: Color(int.parse(presentcolor)),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                          child: Padding(
                              padding: EdgeInsets.only(top: 15),
                              child: Center(
                                child: Column(children: <Widget>[
                                  Text("Presents",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: headfontsize,
                                          fontFamily: fontFamily)),
                                  Text("20",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                ]),
                              )),
                        ),
                        new Container(
                          decoration: BoxDecoration(
                              color: Color(int.parse(absentcolor)),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                          child: Padding(
                              padding: EdgeInsets.only(top: 15),
                              child: Center(
                                child: Column(children: <Widget>[
                                  Text("Absents",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: headfontsize,
                                          fontFamily: fontFamily)),
                                  Text("0",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                ]),
                              )),
                        ),
                      ],
                    )),
              )),

请帮我解决这个问题。

【问题讨论】：

这是因为您对框的大小进行了硬编码。请改用flexible 小部件。
我更喜欢使用 layoutBuilder

标签： android flutter emulation overflowexception

【解决方案1】：

您正在为行中的容器使用硬编码的宽度值。添加所有容器的宽度而不进行填充，我们得到 380px(180+100+100)。因此，即使使用零填充，如果设备的宽度小于 380 像素，该行也会导致溢出。你的模拟器必须比你的设备有更大的宽度，这就是为什么它在设备上而不是在模拟器上溢出。

要解决此问题，请使用具有适当 flex 值而不是硬编码值的灵活小部件。用一个灵活的小部件和适当的 flex 值包装 3 个容器中的每一个。 Click here for a dartpad demonstration。请注意，我更改了您的代码块中未提供的变量值。

【讨论】：

嘿，我用你的答案，但我想要容器之间的空间，我发布了该代码的输出，你能帮我使用 spacer()
@TimeToCode 只使用每个容器的边距属性。我已更新 dartpad 链接以使用边距属性。让我知道这是否适合您。

【解决方案2】：

因为您对宽度进行了硬编码。我认为最简单的方法是将整个东西包裹在一个合适的盒子中并使用比例缩小。如果没有必要的宽度，这将使按钮的大小变小。像这样：

Container(
        width: MediaQuery.of(context).size.width,
        child: FittedBox(
          // Scales down if size is not enough.
          fit: BoxFit.scaleDown,
          child: Padding(
            padding: EdgeInsets.only(top: 100),
            child: Row(
              children: [
                    // Your 3 containers here.
                ],
            ),
          ),
        ),
      ),

【讨论】：

行得通。谢谢！但是你能在容器之间添加空间吗？我该怎么做？
容器有一个叫做'margin'的参数，给你的容器一些marging。边距：EdgeInsets.symmetric(horizontal: 4.0) 像这样。

【解决方案3】：

使用 ListView 代替 Row

Padding(
          padding: EdgeInsets.only(top: 100),
          
          child: ListView(
            children: <Widget>[
              new Container(
                decoration: BoxDecoration(
                    color: Colors.pink,
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                height: 100,
                width: 180,
                child: Padding(
                    padding: EdgeInsets.only(top: 15),
                    child: Center(
                      child: Column(children: <Widget>[
                        Text("Last total working hours",
                            style: TextStyle(
                                color: fontcolor,
                                fontSize: headfontsize,
                                fontFamily: fontFamily)),
                        Text(totalWorkingHours(),
                            style: TextStyle(
                                color: fontcolor,
                                fontSize: remainingtextfontsize,
                                fontFamily: fontFamily)),
                        Text("Hours",
                            style: TextStyle(
                                color: fontcolor,
                                fontSize: remainingtextfontsize,
                                fontFamily: fontFamily)),
                      ]),
                    )),
              ),
              new Container(
                  decoration: BoxDecoration(
                      color: Color(int.parse(presentcolor)),
                      borderRadius: BorderRadius.all(Radius.circular(10))),
                  height: 100,
                  width: 100,
                  child: Padding(
                    padding: EdgeInsets.only(top: 15),
                    child: Center(
                      child: Column(children: <Widget>[
                        Text("Presents",
                            style: TextStyle(
                                color: fontcolor,
                                fontSize: headfontsize,
                                fontFamily: fontFamily)),
                        Text("20",
                            style: TextStyle(
                                color: fontcolor,
                                fontSize: remainingtextfontsize,
                                fontFamily: fontFamily)),
                       
                      ]),
                    )),
                  ),
              new Container(
                  decoration: BoxDecoration(
                      color: Color(int.parse(absentcolor)),
                      borderRadius: BorderRadius.all(Radius.circular(10))),
                  height: 100,
                  width: 100,
                   child: Padding(
                    padding: EdgeInsets.only(top: 15),
                    child: Center(
                      child: Column(children: <Widget>[
                        Text("Absents",
                            style: TextStyle(
                                color: fontcolor,
                                fontSize: headfontsize,
                                fontFamily: fontFamily)),
                        Text("0",
                            style: TextStyle(
                                color: fontcolor,
                                fontSize: remainingtextfontsize,
                                fontFamily: fontFamily)),
                       
                      ]),
                    )),),
            ],
          )),

【讨论】：

嘿，我用了listview，但是它扰乱了容器的高度，所以我去灵活的小部件。