dart - 上移 float 操作按钮

Question

我正在底部导航栏的 float 操作按钮中添加动画图标。但在添加 2 个按钮后，我的 FAB 向下移动了。

我正在使用下面的代码

Widget _buildCenterTab(){
    return new Column(
      mainAxisSize: MainAxisSize.min,
      children: new List.generate(icons.length, (int index) {
        Widget child = new Container(
          height: 56.0,
          width: 56.0,
          alignment: FractionalOffset.topCenter,
          child: new ScaleTransition(
            scale: new CurvedAnimation(
              parent: _controller,
              curve: new Interval(
                  0.0,
                  1.0 - index / icons.length / 2.0,
                  curve: Curves.easeOut
              ),
            ),
            child: new FloatingActionButton(
              heroTag: null,
              backgroundColor: blueColor,
              mini: true,
              child: new Icon(icons[index], color: Colors.white),
              onPressed: () {},
            ),
          ),
        );
        return child;
      }).toList()..add(
        new FloatingActionButton(
          heroTag: null,
          child: new AnimatedBuilder(
            animation: _controller,
            builder: (BuildContext context, Widget child) {
              return new Transform(
                transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
                alignment: FractionalOffset.center,
                child: new Icon(
                    _controller.isDismissed
                        ? Icons.add
                        : Icons.close),
              );
            },
          ),
          onPressed: () {
            if (_controller.isDismissed) {
              _controller.forward();
            } else {
              _controller.reverse();
            }
          },
        ),
      ),
    );
  }

这是我的问题的截图:

Answer 1

解决此问题的一种方法是创建您自己的 FloatingActionButtonLocation

class _CustomCenterDockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
  const _CustomCenterDockedFloatingActionButtonLocation();

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
    return Offset(fabX, getDockedY(scaffoldGeometry));
  }

  double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final double contentBottom = scaffoldGeometry.contentBottom;
    final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
    final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
    final double snackBarHeight = scaffoldGeometry.snackBarSize.height;

    double fabY = contentBottom - fabHeight / 2.0;
    // The FAB should sit with a margin between it and the snack bar.
    if (snackBarHeight > 0.0)
      fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
    // The FAB should sit with its center in front of the top of the bottom sheet.
    if (bottomSheetHeight > 0.0)
      fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);

    final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
    return math.min(maxFabY, fabY);
  }
}

这使用与 FloatingActionButtonLocation.centerDocked 相同的代码，取自 the source然后你可以像这样在脚手架中使用它:

Scaffold(
    body: Container(),
    floatingActionButton: _buildCenterTab(),
    floatingActionButtonLocation: _CustomCenterDockedFloatingActionButtonLocation(),
    ...
);