右边溢出怎么处理

问题描述

我连续创建了 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(),fontSize: remainingtextfontsize,Text("Hours",]),)),),new Container(
                      decoration: Boxdecoration(
                          color: Color(int.parse(presentcolor)),width: 100,child: Center(
                          child: Column(children: <Widget>[
                            Text("Presents",Text("20",new Container(
                      decoration: Boxdecoration(
                          color: Color(int.parse(absentcolor)),child: Center(
                          child: Column(children: <Widget>[
                            Text("Absents",Text("0",],

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

但我想在容器之间留一个空间，为此我使用了 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))),child: Padding(
                              padding: EdgeInsets.only(top: 15),child: Center(
                                child: Column(children: <Widget>[
                                  Text("Last total working hours",style: TextStyle(
                                          color: fontcolor,new Container(
                          decoration: Boxdecoration(
                              color: Color(int.parse(presentcolor)),child: Center(
                                child: Column(children: <Widget>[
                                  Text("Presents",new Container(
                          decoration: Boxdecoration(
                              color: Color(int.parse(absentcolor)),child: Center(
                                child: Column(children: <Widget>[
                                  Text("Absents",

请帮我解决这个问题。

解决方法

使用 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(),fontSize: remainingtextfontsize,Text("Hours",]),)),),new Container(
                  decoration: BoxDecoration(
                      color: Color(int.parse(presentcolor)),width: 100,child: Center(
                      child: Column(children: <Widget>[
                        Text("Presents",Text("20",new Container(
                  decoration: BoxDecoration(
                      color: Color(int.parse(absentcolor)),child: Center(
                      child: Column(children: <Widget>[
                        Text("Absents",Text("0",],

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

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

因为您对宽度进行了硬编码。我认为最简单的方法是将整个东西包裹在一个合适的盒子里并缩小尺寸。如果所需的宽度不可用，这将使按钮的尺寸变小。像这样：

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

android android emulation overflowexception