禁用腳手架FAB動畫

Question

默認情況下，在應用程序運行時更改FAB時，Flutter中的Scaffold會為浮動操作按鈕（FAB）設置動畫。

如何禁用此動畫？

該文檔引用了FloatingActionButtonAnimator.scaling動畫，該動畫在按鈕更改時縮放按鈕：

///動畫師將[floatingActionButton]移動到新的[floatingActionButtonLocation]。 /// ///如果為null，則[ScaffoldState]將使用默認的動畫器[FloatingActionButtonAnimator.scaling]。 最后的FloatingActionButtonAnimator floatActionButtonAnimator;

但是，沒有關於如何完全禁用縮放動畫的指示。

帶有問題的完整示例代碼：

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer _timer;
  bool showFirst = true;

  @override
  void initState() {
    _timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
      setState(() {
        showFirst = !showFirst;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButtonLocation: showFirst
          ? FloatingActionButtonLocation.centerDocked
          : FloatingActionButtonLocation.endDocked,
      floatingActionButton: Padding(
        padding: EdgeInsets.only(top: 100.0),
        child: Column(
          children: <Widget>[
            Text('Floating Action Button Title'),
            showFirst
                ? FloatingActionButton.extended(
                    heroTag: 'unique',
                    icon: Icon(Icons.filter_1),
                    label: Text('First FAB'),
                    onPressed: () {},
                  )
                : FloatingActionButton.extended(
                    heroTag: 'unique2',
                    icon: Icon(Icons.filter_2),
                    label: Text('Second FAB'),
                    onPressed: () {},
                  ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }
}

向每個FAB添加不同的英雄標簽不會影響動畫。

Answer 1

您需要擴展FloatingActionButtonAnimator並覆蓋其方法，檢查以下代碼，

import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer _timer;
  bool showFirst = true;

  @override
  void initState() {
    _timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
      setState(() {
        showFirst = !showFirst;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: showFirst
          ? FloatingActionButtonLocation.centerDocked
          : FloatingActionButtonLocation.endDocked,
      floatingActionButton: Padding(
        padding: EdgeInsets.only(top: 100.0),
        child: Column(
          children: <Widget>[
            Text('Floating Action Button Title'),
            showFirst
                ? FloatingActionButton.extended(
              heroTag: 'unique',
              icon: Icon(Icons.filter_1),
              label: Text('First FAB'),
              onPressed: () {},
            )
                : FloatingActionButton.extended(
              heroTag: 'unique2',
              icon: Icon(Icons.filter_2),
              label: Text('Second FAB'),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }
}

class NoScalingAnimation extends FloatingActionButtonAnimator{
  double _x;
  double _y;
  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
  _x = begin.dx +(end.dx - begin.dx)*progress ;
  _y = begin.dy +(end.dy - begin.dy)*progress;
    return Offset(_x,_y);
  }

  @override
  Animation<double> getRotationAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }

  @override
  Animation<double> getScaleAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }
}

您可以通過更改每種方法返回的值來控制動畫行為。 對於前。 您可以通過將getOffset方法更改為來使fab從左跳到右而沒有動畫

  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
    if (progress == 1.0){
      return end;
    }else{
      return begin;
    }
  }

Answer 2

Flutter中的floatActionButtons具有名為heroTag的屬性，每個floatActionButtons都具有相同的默認值。 給每個floatActionButtons唯一的heroTag將阻止動畫的發生。

Scaffold(
    floatingActionButton: FloatingActionButton(
      heroTag: "somethingUnique",
      onPressed: () {},
      child: Icon(Icons.add,),
    ),
    body: Container(),
)