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

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

您可以看到 ScreenShot 该字段所在的位置。

Answer 1

一个简单的解决方案是用灵活或扩展包装您的自定义字段，这看起来像

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

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

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

Row inside a column - Widgets in Row are invisible

android

row

widget

flutter