Flutter 状态栏与 FloatingActionButton 的布局问题?

Question

flutter 状态栏问题
当我设置0的时候 floatingActionButton 显示正常

当我设置一点高度为什么会这样?

这是什么原因导致的?

希望知道原因 我想 floatingActionButton 可以在Appbar下边

Answer 1

建议：

• 不推荐下面的写法，因为AppBar已经实现了PreferredSizeWidget(Widgets like AppBar implement a PreferredSizeWidget, so that this PreferredSize widget is not necessary for them)

  PreferredSize(
        preferredSize: const Size.fromHeight(1),
        child:  AppBar(
            centerTitle: true,
            title: const Text('状态栏与FloatingActionButton 的布局问题?'),
            backgroundColor: Colors.yellow,
          ),
      ),

• 可以像下面这样自定义的AppBar，参考这个例子

  PreferredSize(
        preferredSize: const Size.fromHeight(1),
        child:  YourCustomWigde(
           child: child,
          ),
      ),

• 如果非要要preferredSize的child是一个AppBar可以像下面这样，也可以把ConstrainedBox 换成SizedBox(height:0)；其实就是 Size.fromHeight(0)的效果，把0换成其他的数字也是可以的

   PreferredSize(
        preferredSize: const Size.fromHeight(1),
        child: ConstrainedBox(
          constraints: const  BoxConstraints(maxHeight: 0),
          child: AppBar(
            centerTitle: true,
            title: const Text('状态栏与FloatingActionButton 的布局问题?'),
            backgroundColor: Colors.yellow,
          ),
        ),
      ),

为什么要添加ConstrainedBox、SizedBox ：

下面是我的Build方法实现,和你上面的不太一样;如果把ConstrainedBox去掉就会出现类似你那种的情况

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(1),
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 0),
          child: AppBar(
            centerTitle: true,
            title: const Text('状态栏与FloatingActionButton 的布局问题?'),
            backgroundColor: Colors.yellow,
          ),
        ),
      ),
      body: const Center(
        child: Text('This is Content'),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerTop,
      floatingActionButton: const ColoredBox(
        color: Colors.red,
        child: Column(
          children: [
            Text('A'),
            Text('B'),
            Text('C'),
            Text('DDDDDDDDDDDDDDDDD'),
            Text('E'),
            Text(
              'F',
              style: TextStyle(color: Colors.yellow),
            ),
          ],
        ),
      ),
    );
  }

1. 现在的出现的问题是FloatingActionButton位置不对，内容被部分遮挡了,第一想到就是添加SafeArea避免被遮挡，但是没有效果；（我猜想Scaffold类似一个Stack组件而FloatingActionButton是一个Position组件）
2. 打开Android Studio的Flutter Inspector查看FloatingActionButton布局后的数据也就是查看top,bottom,width,height；但没有找到top,bootom的数据，只有ColoredBox的Size(width,height)(如果你知道的话请告知🙏)

3. 接下来打断点，跟着代码运行一下看看FloatingActionButton布局时的top数据；
   下面是scaffold.dart文件中 performLayout方法部分实现，我的flutter版本:3.19.5

   if (hasChild(_ScaffoldSlot.floatingActionButton)) {
      final Size fabSize = layoutChild(_ScaffoldSlot.floatingActionButton, looseConstraints);
   
      // To account for the FAB position being changed, we'll animate between
      // the old and new positions.
      final ScaffoldPrelayoutGeometry currentGeometry = ScaffoldPrelayoutGeometry(
        bottomSheetSize: bottomSheetSize,
        contentBottom: contentBottom,
        /// [appBarHeight] should be used instead of [contentTop] because
        /// ScaffoldPrelayoutGeometry.contentTop must not be affected by [extendBodyBehindAppBar].
        contentTop: appBarHeight,
        floatingActionButtonSize: fabSize,
        minInsets: minInsets,
        scaffoldSize: size,
        snackBarSize: snackBarSize,
        materialBannerSize: materialBannerSize,
        textDirection: textDirection,
        minViewPadding: minViewPadding,
      );
      final Offset currentFabOffset = currentFloatingActionButtonLocation.getOffset(currentGeometry);
      final Offset previousFabOffset = previousFloatingActionButtonLocation.getOffset(currentGeometry);
      final Offset fabOffset = floatingActionButtonMotionAnimator.getOffset(
        begin: previousFabOffset,
        end: currentFabOffset,
        progress: floatingActionButtonMoveAnimationProgress,
      );
      positionChild(_ScaffoldSlot.floatingActionButton, fabOffset);
      floatingActionButtonRect = fabOffset & fabSize;
    }
   

其中floatingActionButton的位置由fabOffset和fabSize决定；而fabSize只有宽度和高度； 我门还需要fabOffset才能确定floatingActionButton的位置；previousFloatingActionButtonLocation、currentFloatingActionButtonLocation是为了计算之前和现在位置的差值进行动画用的；例子中的floatingActionButton的位置是固定的；所以currentFloatingActionButtonLocation 数值等于previousFloatingActionButtonLocation 并且等于 fabOffset（根据显示的数据能判断是相等的，内部实现代码省略）； 所以获取currentFloatingActionButtonLocation就可以获取floatingActionButton的top值； 下面代码是getOffset的实现；位于floting_action_button_location.dart 文件中

Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final double adjustment = isMini() ? kMiniButtonOffsetAdjustment : 0.0;
    return Offset(
      getOffsetX(scaffoldGeometry, adjustment),
      getOffsetY(scaffoldGeometry, adjustment),
    );
  }

因为例子中floatingActionButton的X轴方向布局是没有问题的，所以下面代码中只关心 getOffsetY(scaffoldGeometry, adjustment)的实现,此时 scaffoldGeometry.contentTop = 25，scaffoldGeometry.minViewPadding.top = 24；scaffoldGeometry.floatingActionButtonSize.height = 737.45454545；所以 scaffoldGeometry.contentTop - fabHalfHeight = -343.7 所以 currentFloatingActionButtonLocation 这个偏移量top值就是-343.7；也就是floatingActionButton的top值等于 -343.7， 这就造成了floatingActionButton显示不完全

mixin FabTopOffsetY on StandardFabLocation {
  /// Calculates y-offset for [FloatingActionButtonLocation]s floating over
  /// the transition between the [Scaffold.appBar] and the [Scaffold.body].
  @override
  double getOffsetY(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
    if (scaffoldGeometry.contentTop > scaffoldGeometry.minViewPadding.top) {
      final double fabHalfHeight = scaffoldGeometry.floatingActionButtonSize.height / 2.0;
      return scaffoldGeometry.contentTop - fabHalfHeight;
    }
    // Otherwise, ensure we are placed within the bounds of a safe area.
    return scaffoldGeometry.minViewPadding.top;
  }
}

看一下上面scaffold.dart文件中 performLayout方法部分实现中scaffoldGeometry.contentTop的值等于appBarHeight；appBarHeight的定义如下：

 double appBarHeight = 0.0;

    if (hasChild(_ScaffoldSlot.appBar)) {
      appBarHeight = layoutChild(_ScaffoldSlot.appBar, fullWidthConstraints).height;
      contentTop = extendBodyBehindAppBar ? 0.0 : appBarHeight;
      positionChild(_ScaffoldSlot.appBar, Offset.zero);
    }

上面layoutChild这个方法会布局appBar，appBar会循环布局里面的子组件，然后返回最后的高度和宽度；这里的appBarHeight等于appBar布局后的高度，这里是25；而不是1；所以才想到添加ConstrainedBox或者SizedBox 强制约束来强制设置AppBar高度；

AppBar布局后高度为什么是25尼？ 😂😂

上面最最最有价值的地方是解决问题的思路，一定要慢慢培养