Flutter中如何让TextField与搜索IconButton高度相等？

我正在开发一款Flutter应用，需要让TextField和IconButton的高度完全一致。当前代码运行后两者高度不匹配，尝试过两种方案但都不理想：

• 手动给TextField添加contentPadding：虽能临时生效，但需要反复调试数值，且无法确保在所有设备上都适配
• 用SizedBox固定高度：运行后仍未达到预期的对齐效果

原始代码 #

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: SafeArea(
              child: Row(
                children: [
                  const Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        fillColor: Colors.yellow,
                        filled: true,
                        hintText: "Input here...",
                        isCollapsed: true,
                        border: OutlineInputBorder(
                          borderSide: BorderSide(
                            width: 0,
                            style: BorderStyle.none,
                          ),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Ink(
                    decoration: const BoxDecoration(
                      color: Colors.yellow,
                    ),
                    child: IconButton(
                        onPressed: () => {},
                        icon: const Icon(Icons.search)
                    ),
                  )
                ],
          )),
        ),
      ),
    );
  }
}

正确实现方案 #

方案一：利用IntrinsicHeight自动对齐高度

这种方法无需手动指定固定高度，让Flutter自动计算并统一子项高度：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: SafeArea(
            child: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        fillColor: Colors.yellow,
                        filled: true,
                        hintText: "Input here...",
                        isCollapsed: true,
                        contentPadding: const EdgeInsets.symmetric(
                          horizontal: 16,
                          vertical: 0,
                        ),
                        border: const OutlineInputBorder(
                          borderSide: BorderSide(
                            width: 0,
                            style: BorderStyle.none,
                          ),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Ink(
                    decoration: const BoxDecoration(
                      color: Colors.yellow,
                    ),
                    child: IconButton(
                      onPressed: () {},
                      icon: const Icon(Icons.search),
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(
                        minWidth: 48,
                        minHeight: 48,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• IntrinsicHeight让Row内所有子项使用最高子项的高度作为统一高度
• CrossAxisAlignment.stretch强制子项填充Row的高度
• 移除IconButton默认的内边距并设置明确的最小尺寸，避免额外间距
• TextField设置垂直内边距为0，自动匹配Row的高度，仅保留水平内边距控制文本间距

方案二：固定统一高度（更直观）

通过定义统一高度变量，确保两个组件尺寸完全匹配：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义统一高度
  final double _inputHeight = 48;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: SafeArea(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    height: _inputHeight,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    decoration: const BoxDecoration(color: Colors.yellow),
                    child: TextField(
                      decoration: const InputDecoration(
                        hintText: "Input here...",
                        border: InputBorder.none,
                        isCollapsed: true,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                SizedBox(
                  height: _inputHeight,
                  child: Ink(
                    decoration: const BoxDecoration(color: Colors.yellow),
                    child: IconButton(
                      onPressed: () {},
                      icon: const Icon(Icons.search),
                      padding: EdgeInsets.zero,
                      constraints: BoxConstraints.tight(Size.square(_inputHeight)),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

• 用变量_inputHeight统一控制两个组件的高度
• TextField放在带padding的Container中，通过alignment确保文本垂直居中
• IconButton设置BoxConstraints.tight让它完全填充指定高度，移除默认内边距避免额外间距

总结 #

以上两种方案都能实现TextField与IconButton的高度完全一致，且适配不同设备，无需手动调试不确定的数值。

内容的提问来源于stack exchange，提问作者Searene