时间戳

首页 > 解决方案 > Flutter DropdownButtonFormField 不显示在行中

flutter - Flutter DropdownButtonFormField 不显示在行中

问题描述

我在行内并排添加一个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 以便 Dropdown 的高度与 TextFormField 相同，因为当前代码显示的下拉列表具有较小的高度。

标签： flutterflutter-layout

解决方案

试试这样，

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因此将其包裹在 a中Container并width为此设置Container

希望这可以帮助..

推荐阅读