Flutter DropdownButtonFormField 不显示在行中

Question

我在一行中并排添加一个 DropdownFormField 和 TextFormField。这是构建函数的样子

Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                DropdownButton(
                  hint: new Text('Select Gender'),
                  items: _salutations,
                  value: client.salutation,
                ),
                SizedBox(width: 20),
                new Expanded(
                  child: TextFormField(
                    decoration: InputDecoration(labelText: 'Name'),
                    validator: (value) {
                      return value.isEmpty ? 'Empty name.' : '';
                    },
                  ),
                ),
              ]
            )
          ],
        )
      ),
    );
  }

当前显示该代码是因为它是 DropdownButton。但是，如果我将其更改为 DropdownButtonFormField，只要它在 Row() 中，它就不会显示。这是为什么？

我希望使用 DropdownButtonFormField，这样下拉菜单的高度将与 TextFormField 相同，因为当前代码显示的下拉菜单高度较小。

Answer 1

这样试试，

List<String> valueList = ['A', 'B', 'C', 'D'];

  String _value = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Form(
        key: _formKey,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    height: 50.0,
                    width: 100.0,
                    child: new DropdownButtonFormField<String>(
                      hint: new Text('Select'),
                      items: valueList.map((String value) {
                        return new DropdownMenuItem<String>(
                          value: value,
                          child: new Text(value),
                        );
                      }).toList(),
                    ),
                  ),
                  SizedBox(width: 20),
                  new Expanded(
                    child: Container(
                      height: 50.0,
                      child: TextFormField(
                        decoration: InputDecoration(labelText: 'Name'),
                        validator: (value) {
                          return value.isEmpty ? 'Empty name.' : '';
                        },
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

DropdownButtonFormField 必须在 Row 内有一个宽度，所以将它包装在一个 Container 内并设置 width 容器

希望这可以帮助..