ios设备中的布局出现问题,iOS设备中的布局混乱

时间:2018-09-29 09:37:48

标签: dart flutter

我在布局上遇到了一个很奇怪的问题。我已经创建了一个在所有android设备上都可以正常运行的屏幕,但是当我在iOS设备上运行相同的代码时,它被弄糟了,正在附加android和iOS的屏幕截图。这是此屏幕的代码。我在column小部件中有card的另一个屏幕中也面临着同样的问题。请帮我解决一下这个。

class _AddMoneyState extends State<AddMoney> {

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final Size size = MediaQuery.of(context).size;
return Scaffold(
  appBar: new AppBar(
    title: new Text('Add Money',
    style: const TextStyle(color: Colors.white),),
  ),
  body: new Container(
    child: new ListView(
      children: <Widget>[
        new Container(
          width: double.infinity,

          height: 150.0,
          padding: const EdgeInsets.all(10.0),
          child: new Card(
            elevation:5.0,

            child: new Center(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new SizedBox(height: 30.0,),
                  new Text('ADD MONEY',
                    style: const TextStyle(color: Colors.blueGrey,
                        fontSize: 20.0),),

                  new Container(
                    width: 100.0,

                    child: new TextField(

                      keyboardType: TextInputType.number,
                      textAlign: TextAlign.center,
                      decoration: const InputDecoration(
                          hintText: 'Enter amount'
                      ),
                    ),
                  ),

                  new SizedBox(height:10.0),
                  new Text('USD', style:
                    const TextStyle(color: Colors.blue,
                    fontSize: 20.0),),

                ],
              ),
            ),

          ),
        ),
        new SizedBox(height: 5.0,),
        new Container(
          width: double.infinity,
          height: 350.0,
          padding: const EdgeInsets.all(10.0),
          child: new Card(
            elevation:5.0,
            child: new Center(
              child: new Column(
                children: <Widget>[
                  new SizedBox(height: 10.0,),
                  new Text('CARD / BANK',
                  style: const TextStyle(fontSize: 16.0),),

                  new Text('DETAILS',
                      style: const TextStyle(fontSize: 16.0)),
                  new Container(
                    padding: const EdgeInsets.only(left: 60.0, right: 60.0),
                    child: new Form(
                      key: _formKey,
                      child: new Column(

                        children: <Widget>[
                          new Theme(
                            data: theme.copyWith(primaryColor: Colors.blue),
                            child: new TextFormField(
                                keyboardType: TextInputType.number,
                                style: const TextStyle(color: Colors.black),
                                decoration: new InputDecoration(
                                    labelText: 'CARD NUMBER',
                                    labelStyle: const TextStyle(color: Colors.grey,
                                    fontSize: 12.0)
                                ),
                                validator: (val) {
                                  return val.isEmpty
                                      ? "Please enter card number"
                                      : null;
                                },
                                onSaved: (String value) {
                                  this.card_number = value;
                                  // this._data.email = value;
                                }
                            ),
                          ),
                          new Theme(
                            data: theme.copyWith(primaryColor: Colors.blue),
                            child: new TextFormField(
                                keyboardType: TextInputType.number,
                                style: const TextStyle(color: Colors.black),
                                decoration: new InputDecoration(
                                    labelText: 'CVV/SECURITY CODE',
                                    labelStyle: const TextStyle(color: Colors.grey,
                                        fontSize: 12.0)
                                ),
                                validator: (val) {
                                  return val.isEmpty
                                      ? "Please enter card number"
                                      : null;
                                },
                                onSaved: (String value) {
                                  this.card_number = value;
                                  // this._data.email = value;
                                }
                            ),
                          ),
                          new Row(
                            children: <Widget>[
                              new Flexible(
                                child: new Theme(
                                  data: theme.copyWith(primaryColor: Colors.blue),
                                  child: new TextFormField(
                                    keyboardType: TextInputType.number,
                                      style: const TextStyle(color: Colors.black),
                                      decoration: new InputDecoration(
                                          labelText: 'MONTH',
                                          labelStyle: const TextStyle(color: Colors.grey,
                                              fontSize: 12.0)
                                      ),
                                      validator: (val) {
                                        return val.isEmpty
                                            ? "Please enter month"
                                            : null;
                                      },
                                      onSaved: (String value) {
                                        this.card_number = value;
                                        // this._data.email = value;
                                      }
                                  ),
                                ),
                              ),
                              new SizedBox(width: 10.0,),
                              new Flexible(
                                child: new Theme(
                                  data: theme.copyWith(primaryColor: Colors.blue),
                                  child: new TextFormField(
                                      keyboardType: TextInputType.number,
                                      style: const TextStyle(color: Colors.black),
                                      decoration: new InputDecoration(
                                          labelText: 'YEAR',
                                          labelStyle: const TextStyle(color: Colors.grey,
                                              fontSize: 12.0)
                                      ),
                                      validator: (val) {
                                        return val.isEmpty
                                            ? "Please enter month"
                                            : null;
                                      },
                                      onSaved: (String value) {
                                        this.card_number = value;
                                        // this._data.email = value;
                                      }
                                  ),
                                ),
                              ),
                            ],
                          ),



                        ],
                      ),
                    ),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(left: 40.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        new Checkbox(value: isCheck, onChanged: (bool value) {
                          setState(() {
                            isCheck = value;
                          });
                        }),
                        new Text("SAVE THIS CARD FOR FASTER CHECKOUT",
                          style: const TextStyle(fontSize: 10.0),),
                      ],
                    ),
                  ),
                  new Container(
                    //width: size.width,
                    child: new RaisedButton(
                      child: new Text(
                        'ADD  MONEY',
                        style: new TextStyle(
                            color: Colors.white
                        ),
                      ),
                      onPressed: (){
                        //sentMoney();
                        //print(Utils.token);
                      },
                      color: Colors.blueAccent,
                    ),
                    margin: new EdgeInsets.only(
                        top: 5.0
                    ),
                     ),
                   ],
                 ),
                ),


              ),
            ),

         ],
        ),
      ),

     );
   }
 }

这是logcat:

 flutter: A RenderFlex overflowed by 3.4028234663852886e+38 pixels on 
 the bottom.
 flutter:
 flutter: The overflowing RenderFlex has an orientation of 
 Axis.vertical.
 flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
 flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
 flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
 flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
 flutter: This is considered an error condition because it indicates that there is content that cannot be
 flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
 flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
 flutter: like a ListView.
 flutter: The specific RenderFlex in question is:
 flutter:   RenderFlex#34c92 relayoutBoundary=up1 OVERFLOWING
 flutter:   creator: Column ← Center ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
 flutter:   _InkFeatures-[GlobalKey#0628f ink renderer] ← NotificationListener<LayoutChangedNotification> ←
 flutter:   CustomPaint ← _ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← Padding ← ⋯
 flutter:   parentData: offset=Offset(118.0, 0.0) (can use size)
 flutter:   constraints: BoxConstraints(0.0<=w<=347.0, 0.0<=h<=122.0)
 flutter:   size: Size(111.0, 122.0)
 flutter:   direction: vertical
 flutter:   mainAxisAlignment: center
 flutter:   mainAxisSize: max
 flutter:   crossAxisAlignment: center
 flutter:   verticalDirection: down
 flutter: 

◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢ ◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢ ◤◢◤      颤动:

═══════════════════════════════════════════════ ══════════════════════════════════════════════════ ═══

以下是屏幕截图

enter image description here enter image description here

1 个答案:

答案 0 :(得分:0)

我遇到了问题,我正在覆盖字体,而我使用的字体在android上运行正常,但在iOS上却无法运行。我刚刚在main.dart-

中评论了这一行

//fontFamily: 'DINLightAlternate'

现在它在iOS设备上也可以正常工作。