flutter - Flutter 将 TextFormField 与 DropdownButton 对齐

Question

我有以下代码呈现 aListTile与 aTextFormField和 aListTitle与 a 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

至于我，我宁愿选择用 DropdownDropdownButtonFormField

改变这个

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. 在最后一行，这是我提出的新解决方案

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

Answer 2

用顶部插图填充下拉按钮可能会有所帮助，如下所示。

subtitle: Padding(
  padding: const EdgeInsets.only(top: 19.0),
  child: 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: 1,
    hint: Text(
      "Select Contact Name",
      style: TextStyle(
        color: Colors.black,
      ),
    ),
  ),
),