flutter开发实战-底部bottomNavigationBar➕PageView

flutter开发实战-底部bottomNavigationBar

tabbar在app中非常常见，底部BottomNavigationBar属性

一、BottomNavigationBar属性

BottomNavigationBar组件的常用属性：

• type：tabbar样式，默认为白色不显示；
• fixedColor:tabbar选中颜色；
• currentIndex:当前选中的Item的index
• selectedFontSize：选中的title的size （默认14.0）
• unselectedFontSize：未选中的title的size （默认12.0）
• backgroundColor：背景色
• iconSize：icon图片的size （默认是24.0）
• items

二、代码实现

这里我代码进行了拆分。

2.1、main_sub_pages.dart代码

main_sub_pages.dart

List<Widget> mainPages = <Widget>[
  HomePage(),
  QrScanEntryPage(),
  MinePage(),
];


List<String> mainRouterNames = <String>[
  RouterName.home,
  RouterName.scanEntry,
  RouterName.mine,
];

2.2、main_tab_navigator.dart代码

main_tab_navigator.dart

// 在MainTabNavigator中，使用到了PageView.builder

PageView 是一个非常重要的组件，因为在移动端开发中很常用，比如大多数 App 都包含 Tab 换页效果、图片轮动以及抖音上下滑页切换视频功能等等

class MainTabNavigator extends StatefulWidget {
  const MainTabNavigator({Key? key}) : super(key: key);

  @override
  State<MainTabNavigator> createState() => _MainTabNavigatorState();
}

class _MainTabNavigatorState extends State<MainTabNavigator> {
  PageController _pageController = PageController();
  int _selectedIndex = 0;
  late DateTime _lastPressed;

  List<Widget> subMainPages = [];

  @override
  void initState() {
    // 检查app更新
    checkAppUpdate();

    // 设置默认的
    subMainPages = mainPages;

    super.initState();
  }

  void checkAppUpdate() {

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: WillPopScope(
        onWillPop: () async {
          if (_lastPressed == null ||
              DateTime.now().difference(_lastPressed) > Duration(seconds: 1)) {
            //两次点击间隔超过1秒则重新计时
            _lastPressed = DateTime.now();
            return false;
          }
          return true;
        },
        child: PageView.builder(
          itemBuilder: (BuildContext context, int index) {
            return KeepAliveWrapper(
                child: subMainPages[index], keepAlive: true);
          },
          itemCount: subMainPages.length,
          controller: _pageController,
          physics: NeverScrollableScrollPhysics(),
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            label: S.of(context).home,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.qr_code_scanner_outlined),
            label: S.of(context).qrScan,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.nature_outlined),
            label: S.of(context).mine,
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          _pageController.jumpToPage(index);
        },
      ),
    );
  }
}

2.2、main_page.dart代码

main_page.dart

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MainTabContainer(),
    );
  }
}

class MainTabContainer extends StatefulWidget {
  const MainTabContainer({Key? key}) : super(key: key);

  @override
  State<MainTabContainer> createState() => _MainTabContainerState();
}

class _MainTabContainerState extends State<MainTabContainer> {
  @override
  Widget build(BuildContext context) {
    return MainTabNavigator();
  }
}

2.3、在App入口页面设置

return MaterialApp(
      theme: ThemeData(
        fontFamily: "PingFang SC",
        primarySwatch: themeModel.theme,
      ),
      navigatorKey: OneContext().key,
      debugShowCheckedModeBanner: false,
      supportedLocales: S.delegate.supportedLocales,
      locale: localeModel.getLocale(),
      initialRoute: RouterName.main,	// 默认main
      onGenerateRoute: RouterManager.generateRoute,
);

这里在router_manager配置main

class RouterManager {
  // ignore: missing_return
  static Route<dynamic> generateRoute(RouteSettings settings) {
    LoggerManager().debug("generateRoute: ${settings}, name:${settings.name}");
    switch (settings.name) {

      case RouterName.agreement:
        {
          return NoAnimRouteBuilder(const ProtocolAgreementPage());
        }
        break;


      case RouterName.main:
        {
          return NoAnimRouteBuilder(const MainPage());
        }
        break;

      default:
        return MainTabNavigator();
    }
  }
}

至此实现了flutter开发实战-底部bottomNavigationBar➕PageView，tabbar切换效果

三、小结

flutter开发实战-底部bottomNavigationBar➕PageView，tabbar切换效果，配置MaterialApp的onGenerateRoute与initialRoute。

学习记录，每天不停进步。