Flutter 将 TextFormField 与 DropdownButton 对齐

Question

我有以下代码，它呈现一个带有 TextFormField 的 ListTile 和一个带有 DropdownButton 的 ListTitle。

           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

至于我，我宁愿选择用 DropdownButtonFormField替换 Dropdown 小部件

改变这个

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。删除提示参数

其次，当我们将 'Select Contact name' 移动到 InputDecoration 内的 label Text 时，我们可以删除这些行:

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

<强>3。对比

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

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

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