右溢出如何处理

Question

我连续创建了 3 个三个容器，它在模拟器上运行完美，但是当我运行应用程序在我的 andriod phone 上时它给我 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)),
                           
                          ]),
                        )),),
                ],
              )),

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

但我想要容器之间有一个 space，为此我使用了 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)),
                                ]),
                              )),
                        ),
                      ],
                    )),
              )),

请帮我解决这个问题。

Answer 1

使用 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)),
                       
                      ]),
                    )),),
            ],
          )),

Answer 2

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

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

Answer 3

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

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.
                ],
            ),
          ),
        ),
      ),

右溢出如何处理

how to handle the right overflowed

android

flutter

emulation

overflowexception