列中的行 - 行中的小部件是不可见的答案

【问题标题】：Row inside a column - Widgets in Row are invisible列中的行 - 行中的小部件是不可见的
【发布时间】：2020-11-21 15:06:24
【问题描述】：

我设计了一个注册表单，其中前两个字段是名字和姓氏。这两个字段都将在一行中。下面给出了字段的自定义小部件

class LabelFormField extends StatelessWidget {
  final String label;

  const LabelFormField({this.label});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          label,
          style: TextStyle(
              color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold),
        ),
        SizedBox(
          height: 4.0,
        ),
        TextField(
          textAlign: TextAlign.start,
          decoration: new InputDecoration(
              contentPadding:
                  EdgeInsets.symmetric(horizontal: 4.0, vertical: 0),
              hintStyle: TextStyle(fontSize: 18.0),
              border: new OutlineInputBorder(
                borderSide: BorderSide(
                  width: 0,
                  style: BorderStyle.none,
                ),
                borderRadius: const BorderRadius.all(
                  const Radius.circular(10.0),
                ),
              ),
              filled: true,
              fillColor: Colors.grey[200]),
        )
      ],
    );
  }
}

我将这个自定义小部件用作

Column(                
 children: <Widget>[
                    Row(
                      children: <Widget>[
                        LabelFormField(
                          label: 'First Name',
                        ),
                        SizedBox(
                          width: 16.0,
                        ),
                        LabelFormField(
                          label: 'Last Name',
                        )
                      ],
                    ),
                  ],
                ),

你可以看到ScreenShot它应该是该字段的位置。

【问题讨论】：

Row 小部件想要确定其非灵活子项的固有大小，以便知道它为灵活子项留出了多少空间。但是，TextField 没有固有宽度。它只知道如何将自己的大小调整到其父容器的全宽。尝试将其包装在 Flexible 或 Expanded 中，以告诉 Row 您希望 TextField 占用剩余空间：来自：stackoverflow.com/questions/45986093/…

标签： android flutter widget row

【解决方案1】：

一个简单的解决方案是用 Flexible 或 Expanded 包装您的自定义字段，看起来像

  Column(
         children: <Widget>[
               Row(
                  children: <Widget>[
                    Expanded(
                      child: LabelFormField(
                        label: 'First Name',
                      ),
                    ),
                    SizedBox(
                      width: 16.0,
                    ),
                    Expanded(
                      child: LabelFormField(
                        label: 'Last Name',
                      ),
                    )
                  ],
                ),
              ],
            ),

通过这样做，您为两个自定义小部件（占据了行的整个宽度）提供了相等的空间，而之前的行不知道您的自定义小部件的大小希望这能解决您的问题！

【讨论】：