如何修复“A RenderFlex 右侧溢出 40 像素”。在颤振？答案

【问题标题】：How to fix "A RenderFlex overflowed by 40 pixels on the right." in Flutter?如何修复“A RenderFlex 右侧溢出 40 像素”。在颤振？
【发布时间】：2021-05-23 05:29:32
【问题描述】：

我正在创建一个简单的用户表单，但是我遇到了一个问题，即'A RenderFlex 在右侧溢出了 4o 像素。如何解决此渲染问题？

我尝试使用 overflow: TextOverflow.ellipsis, 修复它，方法是将代码行放在 TextFormField 下，但由于无法识别代码中的 overflow 单词而出现错误。

 Widget build(BuildContext context){
  final halfMediaWidth = MediaQuery.of(context).size.width / 2.0;
    return Form(
    key: _formKey,
     autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  alignment: Alignment.topCenter,
                  width: halfMediaWidth,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                    decoration : InputDecoration(labelText: "No"),
                    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                    keyboardType: TextInputType.number,
                    
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.topCenter,
                  width: halfMediaWidth,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "ID"),
                    ),
                  ),

                ),

              ],
            ),
          ),
         
        ],
      ),
    
    );
  }

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

一些备注：

没有理由使用halfMediaWidth，你可以使用Expanded。

@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(
                    alignment: Alignment.topCenter,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "No"),
                        keyboardType: TextInputType.number,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.topCenter,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "ID"),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

没有理由在Row 中使用对齐，您已经在使用CrossAxisAlignment.start。

@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "No"),
                        keyboardType: TextInputType.number,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "ID"),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

话虽如此，没有理由使用Container。

@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "No"),
                      keyboardType: TextInputType.number,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "ID"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

没有理由在Column 中使用对齐，您可以使用crossAxisAlignment。

@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "No"),
                      keyboardType: TextInputType.number,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "ID"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

没有理由使用 Container 包裹在 Row 中。

@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration : InputDecoration(labelText: "No"),
                    keyboardType: TextInputType.number,
                  ),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration : InputDecoration(labelText: "ID"),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

使用重构的代码，看看它是否仍然给你错误。

【讨论】：