Flutter底部导航栏页面过渡插件bottom_bar_page_transition的使用

Flutter底部导航栏页面过渡插件bottom_bar_page_transition的使用

bottom_bar_page_transition 是一个Flutter包，用于在底部导航栏切换页面时显示过渡动画。以下是该插件的详细使用说明和完整示例。

预览

以下是不同类型的过渡效果预览：

特性

• 可以在底部导航栏切换页面时显示动画。
• 通过给小部件添加全局键来避免重新初始化小部件。

开始使用

安装

要在项目中使用此包，请在 pubspec.yaml 文件中添加 bottom_bar_page_transition 作为依赖项。

dependencies:
  bottom_bar_page_transition: ^版本号

在你的 Dart 文件中导入库：

import 'package:bottom_bar_page_transition/bottom_bar_page_transition.dart';

在 build 方法中使用：

return Scaffold(
      body: BottomBarPageTransition(
        builder: (_, index) => _getBody(index), // 返回页面内容
        currentIndex: _currentPage, // 当前显示页面索引
        totalLength: totalPage, // 总页面数
        transitionType: transitionType, // 过渡类型
        transitionDuration: duration, // 动画持续时间
        transitionCurve: curve, // 动画曲线
      ),
      bottomNavigationBar: _getBottomBar(), // 底部导航栏
    );

创建 _getBody(int index) 方法来返回页面内容：

Widget _getBody(int index) {
    return CustomScrollView(
      // key:_keys[index] // 添加键以避免动画结束后重新初始化子小部件
      slivers: <Widget>[
        SliverAppBar(
          title: Text('Page $index'), // 页面标题
        ),
        SliverFillRemaining(
          child: Center(child: Text('Page $index')), // 页面内容
        )
      ],
    );
}

创建 _getBottomBar() 方法来创建底部导航栏：

Widget _getBottomBar() {
    return BottomNavigationBar(
        currentIndex: _currentPage, 
        onTap: (index) {
          _currentPage = index;
          setState(() {}); // 更新当前页面索引
        },
        selectedItemColor: Colors.blue, // 选中项颜色
        unselectedItemColor: Colors.grey, // 未选中项颜色
        type: BottomNavigationBarType.fixed,
        items: List.generate(
            totalPage,
            (index) => BottomNavigationBarItem(
                  icon: Icon(icons[index]), // 图标
                  label: names[index], // 标签
                )));
}

参数描述

• builder: 返回小部件内容的函数。
• currentIndex: 当前显示页面的索引。
• totalLength: 总页数。
• transitionType: 过渡类型，可以是 circle、slide 或 fade。
• transitionDuration: 动画持续时间。
• transitionCurve: 动画曲线，用于调整动画随时间变化的速度。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 bottom_bar_page_transition 插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CircularHomePage(),
    );
  }
}

class CircularHomePage extends StatefulWidget {
  [@override](/user/override)
  _CircularHomePageState createState() => _CircularHomePageState();
}

class _CircularHomePageState extends State<CircularHomePage> with TickerProviderStateMixin {
  static const int totalPage = 4;
  static const List<String> names = ['Home', 'Type', 'Duration', 'Curve'];

  List<IconData> icons = [Icons.home, Icons.movie, Icons.timer, Icons.multiline_chart];

  static const List<Color> colors = [Colors.blueGrey, Colors.teal, Colors.blue, Colors.brown];

  int _currentPage = 0;

  Duration duration = Duration(milliseconds: 300);
  Curve curve = Curves.ease;
  TransitionType transitionType = TransitionType.circular;
  String selectedDuration = '300ms';
  String selectedTransactionType = 'Circular';
  String selectedCurve = 'Ease';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: BottomBarPageTransition(
        builder: (_, index) => _getBody(index),
        currentIndex: _currentPage,
        totalLength: totalPage,
        transitionType: transitionType,
        transitionDuration: duration,
        transitionCurve: curve,
      ),
      bottomNavigationBar: _getBottomBar(),
    );
  }

  Widget _getBottomBar() {
    return BottomNavigationBar(
        currentIndex: _currentPage,
        onTap: (index) {
          _currentPage = index;
          setState(() {});
        },
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
        items: List.generate(
            totalPage,
            (index) => BottomNavigationBarItem(
                  icon: Icon(icons[index]),
                  label: names[index],
                )));
  }

  Widget _getBody(int index) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Text(selectedTransactionType),
          backgroundColor: <Color>[Colors.blue, Colors.indigo, Colors.blueGrey, Colors.green][index],
        ),
        SliverFillRemaining(
          child: Container(
            color: colors[index],
            padding: EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Text(names[index], style: TextStyle(fontSize: 50, color: Colors.white)),
                if (index == 1)
                  _getMenuButton(
                      <String>['Circular', 'Slide', 'Fade'],
                      selectedTransactionType,
                      (_) => setState(() {
                            selectedTransactionType = _;
                            if (_ == 'Circular')
                              transitionType = TransitionType.circular;
                            else if (_ == 'Slide')
                              transitionType = TransitionType.slide;
                            else if (_ == 'Fade')
                              transitionType = TransitionType.fade;
                          })),
                if (index == 2)
                  _getMenuButton(
                      <String>['300ms', '500ms', '1s', '2s'],
                      selectedDuration,
                      (_) => setState(() {
                            selectedDuration = _;
                            if (_ == '300ms')
                              duration = Duration(milliseconds: 300);
                            else if (_ == '500ms')
                              duration = Duration(milliseconds: 500);
                            else if (_ == '1s')
                              duration = Duration(seconds: 1);
                            else if (_ == '2s') duration = Duration(seconds: 2);
                          })),
                if (index == 3)
                  _getMenuButton(
                      <String>['Ease', 'EaseIn', 'Elastic In Out', 'Bounce In Out'],
                      selectedCurve,
                      (_) => setState(() {
                            selectedCurve = _;
                            if (_ == 'Ease')
                              curve = Curves.ease;
                            else if (_ == 'EaseIn')
                              curve = Curves.easeIn;
                            else if (_ == 'Elastic In Out')
                              curve = Curves.elasticInOut;
                            else if (_ == 'Bounce In Out')
                              curve = Curves.bounceInOut;
                          })),
              ],
            ),
          ),
        )
      ],
    );
  }

  _getMenuButton(List<String> list, String selectedValue, ValueChanged<String> onSelected) {
    return Theme(
        data: ThemeData.dark(),
        child: DropdownButton(
            underline: SizedBox(),
            value: selectedValue,
            items: List.generate(
                list.length,
                (index) => DropdownMenuItem<String>(
                      child: Text(list[index]),
                      value: list[index],
                    )),
            onChanged: onSelected));
  }
}