0

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

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

这是模拟器上的输出

在此处输入图像描述

这是安卓的输出 在此处输入图像描述

代码：

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

请帮我解决这个问题。

4

3 回答 3

2

使用 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)),
                       
                      ]),
                    )),),
            ],
          )),
于 2021-07-20T12:07:37.783 回答
1

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

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

于 2021-07-20T12:34:07.273 回答
1

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

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.
                ],
            ),
          ),
        ),
      ),
于 2021-07-20T13:00:44.820 回答