Flutter中如何让BottomAppBar根据子组件尺寸动态调整高度？

嘿，我完全懂你的痛点！在Material3环境下，BottomAppBar默认固定80的高度，没法跟着子组件自动调整，你还要给9步向导的每个页面手动设高度防溢出，重复代码又多，维护起来肯定头疼。

针对这个问题，我们可以通过动态计算子组件实际高度的方式，让BottomAppBar自动适配内容，彻底摆脱手动写死height的麻烦。下面给你一个实用的实现方案：

方法：自定义动态高度的BottomAppBar组件 #

我们可以利用GlobalKey获取子组件的渲染尺寸，在组件渲染完成后自动计算BottomAppBar所需的高度，代码示例如下：

class DynamicBottomAppBar extends StatefulWidget {
  final Widget child;
  // 可选：添加内边距，避免内容贴边
  final EdgeInsets padding;

  const DynamicBottomAppBar({
    super.key,
    required this.child,
    this.padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  });

  @override
  State<DynamicBottomAppBar> createState() => _DynamicBottomAppBarState();
}

class _DynamicBottomAppBarState extends State<DynamicBottomAppBar> {
  final GlobalKey _childContainerKey = GlobalKey();
  double _calculatedHeight = 0;

  @override
  void initState() {
    super.initState();
    // 等待组件首次渲染完成后计算高度
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateBarHeight());
  }

  void _updateBarHeight() {
    // 获取子组件的渲染盒子
    final renderBox = _childContainerKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;

    setState(() {
      // 子组件高度 + 自定义内边距的总高度
      _calculatedHeight = renderBox.size.height + widget.padding.vertical;
    });
  }

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      // 如果还没计算出高度，先暂时用默认值（避免初始布局异常）
      height: _calculatedHeight == 0 ? null : _calculatedHeight,
      child: Padding(
        key: _childContainerKey,
        padding: widget.padding,
        child: widget.child,
      ),
    );
  }
}

怎么用这个组件？ #

在你的向导页面里，直接把每个步骤的按钮/内容作为child传进去就行，不用再手动设置height：

// 示例：某一步的BottomAppBar
DynamicBottomAppBar(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ElevatedButton(onPressed: () {}, child: const Text('上一步')),
      ElevatedButton(onPressed: () {}, child: const Text('下一步')),
    ],
  ),
)

额外提示 #

如果你的子组件内容会动态变化（比如按钮显示/隐藏、文本长度变化），记得在内容更新后调用_updateBarHeight()方法，让BottomAppBar重新计算高度：

// 比如按钮状态变化后
setState(() {
  // 更新子组件状态
});
// 重新计算高度
_updateBarHeight();

这个方案的好处就是完全复用组件，你9步向导的所有BottomAppBar都可以用这个自定义组件，不用重复写height，后期维护也只需要改这一个组件就行，完美解决你的代码冗余问题。

备注：内容来源于stack exchange，提问作者Cat100