视频直播app源码，Flutter实战底部导航栏

视频直播app源码，Flutter实战底部导航栏

 

1

import 'package:flutter/cupertino.dart';<br>import 'package:flutter/material.dart';<br>import 'package:flutter_screenutil/flutter_screenutil.dart';<br>import 'package:wanandroid_flutter/route/page/project_page.dart';<br>import 'home_page.dart';<br>import 'knowledge_page.dart';<br>import 'navigation_page.dart';<br>class MyHomePage extends StatefulWidget {<br>  const MyHomePage({Key? key, required this.title}) : super(key: key);<br>  final String title;<br>  @override<br>  State<MyHomePage> createState() => _MyHomePageState();<br>}<br>class _MyHomePageState extends State<MyHomePage> {<br>  //底部导航页面索引<br>  var _currentIndex = 0;<br>  @override<br>  Widget build(BuildContext context) {<br>    //尺寸适配初始化<br>    initScreenUtil();<br>    return Scaffold(<br>      bottomNavigationBar: BottomNavigationBar(<br>        items: bottomNavBarItems,//默认的导航样式列表<br>        currentIndex: _currentIndex,//当前页面索引<br>        selectedItemColor: Colors.deepOrange,//被选中的item颜色<br>        unselectedItemColor: Colors.grey,<br>        type: BottomNavigationBarType.fixed,<br>        elevation: 10.w,<br>        selectedFontSize: 12.w,<br>        unselectedFontSize: 12.w,<br>        onTap: (index){<br>          setState(() {<br>            _currentIndex = index;<br>          });<br>        },<br>      ),<br>      body: pages[_currentIndex],//根据索引找到具体页面<br>    );<br>  }<br>  final List<BottomNavigationBarItem> bottomNavBarItems = [<br>    const BottomNavigationBarItem(<br>      icon: Icon(Icons.home_outlined),<br>      label: "首页",<br>    ),<br>    const BottomNavigationBarItem(<br>      icon: Icon(Icons.dashboard_customize_outlined),<br>      label: "知识体系",<br>    ),<br>    const BottomNavigationBarItem(icon: Icon(Icons.navigation_outlined), label: "导航"),<br>    const BottomNavigationBarItem(icon: Icon(Icons.person_outlined), label: "我的"),<br>  ];<br>  final pages = <Widget>[<br>    HomePage(),<br>    KnowledgePage(),<br>    NavigationPage(),<br>    ProjectPage()<br>  ];<br>  void initScreenUtil() {<br>  //尺寸适配<br>    ScreenUtil.init(<br>        BoxConstraints(<br>            maxWidth: MediaQuery.of(context).size.width,<br>            maxHeight: MediaQuery.of(context).size.height),<br>        designSize: const Size(375, 812),<br>        context: context,<br>        minTextAdapt: true,<br>        orientation: Orientation.portrait);<br>  }<br>}

​

上述导航栏加载系统图标selectedItemColor才能作用到图标上，否则，图标不会变成selectedItemColor的颜色。如果需要使用自定义的图标，且需要选中后颜色改变，那么上述代码需要部分改变。

以上就是 视频直播app源码，Flutter实战底部导航栏，更多内容欢迎关注之后的文章