Flutter 将 TextFormField 与 DropdownButton 对齐

Question

我有以下代码，可呈现 ListTile 和 TextFormField 以及 ListTitle 和 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

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

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,
      ),
    ),
  ),
),

Answer 2

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

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

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

3。比较

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

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

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

Flutter 将 TextFormField 与 DropdownButton 对齐

Flutter Align TextFormField with DropdownButton

flutter

flutter-web