在Scaffold中使用动画在PageView页面上进行Flutter Switching FAB [英] Flutter Switching FAB on PageView Pages with animation in Scaffold

问题描述

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

So I've looked several places for how this is supposed to be implemented and I'm sure I'm missing something trivial, but I have a flutter app with a Scaffold who's body is a PageView. I need to have a different FAB for some pages and the way it's currently set up is the floatingActionButton attribute of the scaffold is set to access an array of FloatingActionButtons with the index being the _currentPageIndex (private variable shared by bottomNavBar and _pageController.

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

This changes the FAB abruptly which is not the desired behavior.

当页面更改时，例如

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

Tabbed Screens When tabs are present, the FAB should briefly disappear, then >reappear when the new content moves into place. This expresses >that the FAB is not connected to any particular tab.

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

I would appreciate any advice on how to go about implementing it simply (I'm pretty sure I'm missing something trivial). The alternative is to manually animate in and out FABs myself by wrapping it in something.

推荐答案

您可以尝试使用像这样的 AnimatedCrossFade 小部件:

You could try using AnimatedCrossFade Widget something like this :

        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 的示例:

Remember you can create your own widget, this is an example using a custom 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),
              ),
            );
          }
        }

这篇关于在Scaffold中使用动画在PageView页面上进行Flutter Switching FAB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！