Flutter 将 TextFormField 与 DropdownButton 对齐

Question

我有以下代码呈现ListTileaTextFormField和ListTitlea DropdownButton。

           Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                new Expanded(
                    child: ListTile(
                      dense: true,
                      title: Text(
                        "Property Name",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      subtitle: TextFormField(
                        decoration: InputDecoration(
                            labelText: 'Enter the property name'
                        ),
                      ),
                      isThreeLine: true,
                    )
                ),
                new Expanded(
                    child: ListTile(
                      dense: true,
                      title: Text(
                        "Contact Name",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      subtitle: DropdownButton<int>(
                        items: [
                          DropdownMenuItem<int>(
                            value: 1,
                            child: Text(
                              "John Smith",
                            ),
                          ),
                          DropdownMenuItem<int>(
                            value: 2,
                            child: Text(
                              "Jon Doe",
                            ),
                          ),
                        ],
                        onChanged: (value) {
                          setState(() {
                            _value = value;
                          });
                        },
                        value: _value,
                        hint: Text(
                          "Select Contact Name",
                          style: TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      ),
                      isThreeLine: true,
                    )
                ),
              ],
            ),

但它产生以下内容：

有没有办法将联系人姓名的 DropdownButton 底线与属性名称的 ListTile 对齐？有任何想法吗？

Answer 1

1. 使用 DropdownButtonFormField

至于我，我宁愿选择更换 Dropdown同部件DropdownButtonFormField

改变这个

child: ListTile(
  dense: true,
  title: Text(
    "Contact Name",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
  subtitle: DropdownButton<int>( // change this
    items: [
      ...

进入这个

child: ListTile(
  dense: true,
  title: Text(
    "Contact Name",
    style: TextStyle(
      fontWeight: FontWeight.bold,
    ),
  ),
  subtitle: DropdownButtonFormField<int>( // into this
    decoration: InputDecoration(
      isDense: true,
      hasFloatingPlaceholder: true,
      labelText: 'Select Contact Name',
      contentPadding: EdgeInsets.symmetric(vertical: 9),
    ),
    items: [
      ...

2. 删除提示参数

其次，当我们将“选择联系人姓名”移动到label TextInputDecoration 内部时，我们可以删除这些行：

hint: Text(
  "Select Contact Name",
  style: TextStyle(
    color: Colors.black,
  ),
),

3. 比较

我们可以在下图中发现我们已经拥有的三个选项。

1. 第一行是KeykoYume提出的解决方案
2. 在第二行，是 Abhilash Chandran 提出的解决方案
3. 在最后一行，这是我提出的新解决方案

请注意，第三行也可以很好地自动处理溢出