Question

因此，我已经在几个地方寻找了应该如何实现的地方，并且我肯定缺少一些琐碎的东西，但是我有一个带有Scaffold的Flutter应用，其主体是PageView。我需要为某些页面使用不同的FAB，并且当前设置方式是将脚手架的floatActionButton属性设置为访问数组FloatingActionButtons，索引为_currentPageIndex（由bottomNavBar和_pageController共享的私有变量。

这会突然更改FAB，这不是理想的行为。

当页面在material spec中变化时，我正在尝试让FAB进行动画处理（放大和缩小）：

带标签的屏幕如果显示选项卡，则FAB应该短暂消失，然后在新内容移入位置时重新出现。这表示> FAB未连接到任何特定选项卡。

对于任何关于如何简单实现它的建议，我将不胜感激（我很确定自己缺少一些琐碎的东西）。另一种方法是通过将FAB包裹在某些东西中来自己手动制作FAB动画。

Answer 1

您可以尝试使用AnimatedCrossFade窗口小部件，如下所示：

        class TestingNewWidgetState extends State<TestingNewWidget> {
          int currentIndex = 0;

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              floatingActionButton: AnimatedCrossFade(
                crossFadeState: currentIndex == 0
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: Duration(seconds: 1),
                firstChild: FloatingActionButton(
                  onPressed: () => null,
                  child: Icon(Icons.arrow_left),
                  backgroundColor: Colors.red,
                ),
                secondChild: FloatingActionButton(
                  onPressed: () => null,
                  child: Icon(Icons.arrow_right),
                  backgroundColor: Colors.blue,
                ),
              ),
              body: PageView(
                onPageChanged: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
                children: <Widget>[
                  Scaffold(
                    body: Center(
                      child: Text("page 1"),
                    ),
                  ),
                  Scaffold(
                    body: Center(
                      child: Text("page 2"),
                    ),
                  ),
                ],
              ),
            );
          }
        }

更新

请记住，您可以创建自己的窗口小部件，这是使用自定义FloatingActionButton的示例：

        class TestingNewWidgetState extends State<TestingNewWidget> {
          int currentIndex = 0;

          @override
          Widget build(BuildContext context) {
            var customFabButton;
            if (currentIndex == 0) {
              customFabButton = CustomFabButton(
                color: Colors.red,
                onPressed: () => null,
                icon: Icons.alarm,
              );
            } else if (currentIndex == 1) {
              customFabButton = CustomFabButton(
                color: Colors.blue,
                onPressed: () => null,
                icon: Icons.satellite,
              );
            } else {
              customFabButton = CustomFabButton(
                color: Colors.green,
                onPressed: () => null,
                icon: Icons.verified_user,
              );
            }

            return Scaffold(
              floatingActionButton: customFabButton,
              body: PageView(
                onPageChanged: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
                children: <Widget>[
                  Scaffold(
                    body: Center(
                      child: Text("page 1"),
                    ),
                  ),
                  Scaffold(
                    body: Center(
                      child: Text("page 2"),
                    ),
                  ),
                  Scaffold(
                    body: Center(
                      child: Text("page 3"),
                    ),
                  ),
                ],
              ),
            );
          }
        }

        class CustomFabButton extends StatelessWidget {
          final IconData icon;
          final Color color;
          final VoidCallback onPressed;

          const CustomFabButton({Key key, this.icon, this.color, this.onPressed})
              : super(key: key);

          @override
          Widget build(BuildContext context) {
            return GestureDetector(
              onTap: onPressed,
              child: AnimatedContainer(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: color,
                ),
                duration: Duration(seconds: 1),
                height: 50.0,
                width: 50.0,
                child: Icon(icon),
              ),
            );
          }
        }

在具有脚手架中的动画的PageView页面上颤动切换FAB

1 个答案: