如何垂直扩展按钮以匹配颤振中的行高

Question

我正在做一个 flutter 项目，我在 Row 中有一个 TextField 和一个 ElevatedButton.icon。 TextField的高度比ElevatedButton.icon高如图

我想让按钮的高度与 TextField 的高度相同。我试过 CrossAxisAlignment.stretch 但它会将 Row 扩展到整个屏幕。我也试过 FittedBox 但结果并不理想。我的行代码如下。

Row(
  children: [
    const Expanded(
        child: TextField(
      decoration: InputDecoration(
          filled: true,
          labelText: "Enter To Do Task title"),
    )),
    ElevatedButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.add),
      label: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text("Add Task"),
      ),
      style:
          ElevatedButton.styleFrom(shape: const StadiumBorder()),
    )
  ],
);

Answer 1

首先很抱歉我理解错了。这是我编辑过的答案。您应该在 InputDecoration

中使用 contentPadding

Row(
            children: [
              Expanded(
                child: Container(
                    height: MediaQuery.of(context).size.height * 0.15,
                    child: TextFormField(
                      decoration: InputDecoration(
                          contentPadding:
                              const EdgeInsets.symmetric(vertical: 40.0),
                          filled: true,
                          labelText: "Enter To Do Task title"),
                    )),
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.15,
                child: ElevatedButton.icon(
                  onPressed: () {},
                  icon: const Icon(Icons.add),
                  label: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text("Add Task"),
                  ),
                  style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
                ),
              )
            ],
          ),

Answer 2

你只需要增加顶部和底部的内边距：

Row(
  children: [
    const Expanded(
        child: TextField(
      decoration: InputDecoration(
          filled: true,
          labelText: "Enter To Do Task title"),
    )),
    ElevatedButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.add),
      label: const Padding(
        padding: EdgeInsets.symmetric(vertical: 18.0), // here
        child: Text("Add Task"),
      ),
      style:
          ElevatedButton.styleFrom(shape: const StadiumBorder()),
    )
  ],
);

如何垂直扩展按钮以匹配颤振中的行高

How to expand button vertically to match the height of row in flutter

dart

flutter

flutter-layout