Flutter中SectionHeading显隐按钮时Container高度不一致问题修复

我开发了一个用于板块标题的SectionHeading行组件，当设置showButton为true显示“全部”按钮时，外层Container的高度超出预期；即使将TextButton的padding设为EdgeInsets.zero，仍存在多余内边距。想要实现无论是否显示按钮，Container高度保持一致的效果。

示例代码 #

主页面代码：

Scaffold(
  backgroundColor: Colors.white,
  body: Padding(
    padding: EdgeInsets.all(20),
    child: Column(
      children: [
        Container(
          color: Colors.red,
          padding: EdgeInsets.all(8.0),
          child: SectionHeading(showButton: true),
        ),
        SizedBox(height: 20),
        Container(
          color: Colors.red,
          padding: EdgeInsets.all(8.0),
          child: SectionHeading(showButton: false),
        ),
      ],
    ),
  ),
);

SectionHeading组件代码：

class SectionHeading extends StatelessWidget {
  final bool showButton;

  const SectionHeading({Key? key, required this.showButton}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Popular Products', style: Theme.of(context).textTheme.bodyLarge),
        // 已设置TextButton样式但仍有多余内边距
        if(showButton) TextButton(
          style: TextButton.styleFrom(padding: EdgeInsets.zero),
          onPressed: (){}, 
          child: Text('All')
        ),
      ],
    );
  }
}

问题截图 #

解决方案 #

问题根源是：TextButton即使设置padding: EdgeInsets.zero，默认仍有minimumSize和tapTargetSize带来的额外布局空间；且移除按钮后，Row的高度仅由文本决定，比带按钮时更矮，导致外层Container高度变化。下面是几种靠谱的解决方式：

方式1：用Opacity隐藏按钮而非移除

保留按钮的布局空间，仅通过透明度控制显示/隐藏，确保Row高度始终一致：

class SectionHeading extends StatelessWidget {
  final bool showButton;

  const SectionHeading({Key? key, required this.showButton}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Popular Products', style: Theme.of(context).textTheme.bodyLarge),
        Opacity(
          opacity: showButton ? 1 : 0,
          child: TextButton(
            style: TextButton.styleFrom(
              padding: EdgeInsets.zero,
              tapTargetSize: MaterialTapTargetSize.shrinkWrap, // 消除点击区域额外内边距
              minimumSize: Size.zero, // 清除默认最小尺寸限制
            ),
            onPressed: showButton ? () {} : null,
            child: const Text('All'),
          ),
        ),
      ],
    );
  }
}

方式2：固定组件高度

直接给SectionHeading设置固定高度，强制两种状态下高度一致（需根据文本和按钮的实际高度调整数值）：

class SectionHeading extends StatelessWidget {
  final bool showButton;

  const SectionHeading({Key? key, required this.showButton}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 24, // 按需调整为合适高度
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text('Popular Products', style: Theme.of(context).textTheme.bodyLarge),
          if(showButton) TextButton(
            style: TextButton.styleFrom(
              padding: EdgeInsets.zero,
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              minimumSize: Size.zero,
            ),
            onPressed: () {},
            child: const Text('All'),
          ),
        ],
      ),
    );
  }
}

方式3：用占位容器替代移除按钮

当不显示按钮时，渲染一个和按钮尺寸一致的透明占位容器，保证布局结构不变：

class SectionHeading extends StatelessWidget {
  final bool showButton;

  const SectionHeading({Key? key, required this.showButton}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final button = TextButton(
      style: TextButton.styleFrom(
        padding: EdgeInsets.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
        minimumSize: Size.zero,
      ),
      onPressed: () {},
      child: const Text('All'),
    );
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Popular Products', style: Theme.of(context).textTheme.bodyLarge),
        showButton ? button : SizedBox.fromSize(size: (button as SizedBox).size),
      ],
    );
  }
}

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