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

Question

我正在创建一个简单的用户表单，但我遇到了一个问题，“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"),
                    ),
                  ),

                ),

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

Answer 1

一些说明：

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"),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

2. 没有理由在 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"),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

3. 话虽如此，没有理由使用 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"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

4. 没有理由在 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"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

5. 没有理由使用包含在 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"),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

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