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

Question

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

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',
                        )
                      ],
                    ),
                  ],
                ),

您可以在该字段所在的位置看到屏幕截图。

Answer 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',
                      ),
                    )
                  ],
                ),
              ],
            ),

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