Question

我在底部导航栏中的页面过渡上添加淡入淡出效果时遇到问题。我有底部的栏，它通过页面控制器在页面之间导航，并且具有曲线和持续时间。我有放置此底部栏的主页，并在那里创建了该pagecontroller作为变量。我的代码：

class HomeWidget extends StatefulWidget {
const HomeWidget({
Key key,
}) : super(key: key);

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

class _HomeWidgetState extends State<HomeWidget> {
int selectedPos = 0;

PageController _pageController;

@override
void initState() {
super.initState();
_pageController = PageController();
}

@override
void dispose() {
_pageController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
bottomNavigationBar:
  child: Container(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.7),
          spreadRadius: 1, // changes position of shadow
        ),
      ],
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(25), topRight: Radius.circular(25)),
    ),
    child: ClipRRect(
      clipBehavior: Clip.hardEdge,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(25), topRight: Radius.circular(25)),
      child: BottomNavyBar(
        selectedIndex: selectedPos,
        showElevation: true,
        itemCornerRadius: 15,
        curve: Curves.easeInBack,
        **onItemSelected: (i) => setState(() {
          selectedPos = i;
          _pageController.animateToPage(selectedPos,
              duration: Duration(milliseconds: 1000),
              curve: Curves.fastLinearToSlowEaseIn);
        }),**
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        items: [
          BottomNavyBarItem(
              inactiveColor: Colors.grey[700],
              activeColor: Colors.blue,
              textAlign: TextAlign.center,
              icon: ImageIcon(
                AssetImage('assets/images/home-run.png'),
                size: 28,
              ),
              title: Text(
                "Home",
                style: TextStyle(fontSize: 18),
              )),
          BottomNavyBarItem(
              inactiveColor: Colors.grey[700],
              activeColor: Colors.purple,
              textAlign: TextAlign.center,
              icon: ImageIcon(
                AssetImage('assets/images/main.png'),
                size: 23,
              ),
              title: Text(
                "Favourites",
                style: TextStyle(fontSize: 15),
              )),
          BottomNavyBarItem(
              inactiveColor: Colors.grey[700],
              activeColor: Colors.red,
              textAlign: TextAlign.center,
              icon: ImageIcon(
                AssetImage('assets/images/user.png'),
                size: 27,
              ),
              title: Text(
                "Profile",
                style: TextStyle(fontSize: 18),
              ))
        ],
      ),
    ),
  ),
body: PageView(controller: _pageController, children: [
  HomePage(),
  FavoritesPage(),
  FadeTransition(
      opacity: _controllerFades.drive(CurveTween(curve: Curves.easeIn)),
      child: ProfilePage())
]),
),
);
}
}

我试图将列出的Pages放入FadeTransition，但是它不起作用。因此，我需要的是例如在fadetransition小部件中使用淡入淡出效果进行过渡，例如为页面过渡提供平滑效果。我该怎么办？

如何在底部小节过渡上添加淡入淡出动画？

0 个答案: