短视频平台源码，构建简单的底部导航栏

短视频平台源码，构建简单的底部导航栏实现的相关代码

 

1

import 'package:flutter/material.dart';<br>class Home extends StatefulWidget {<br>  Home({Key key}) : super(key: key);<br>  @override<br>  _HomeState createState() => _HomeState();<br>}<br>class _HomeState extends State<Home> {<br>  final List<BottomNavigationBarItem> bottomNavigationItems = [<br>    BottomNavigationBarItem(<br>      icon: Icon(Icons.home),<br>      backgroundColor: Colors.blue,<br>      label: '首页',<br>    ),<br>     BottomNavigationBarItem(<br>      icon: Icon(Icons.calendar_view_day_sharp),<br>      backgroundColor: Colors.yellow,<br>      label: '分类',<br>    ),<br>     BottomNavigationBarItem(<br>      icon: Icon(Icons.shopping_cart),<br>      backgroundColor: Colors.cyan,<br>      label: '购物车',<br>    ),<br>     BottomNavigationBarItem(<br>      icon: Icon(Icons.person),<br>      backgroundColor: Colors.purple,<br>      label: '我的',<br>    )<br>  ];<br>  final page = [<br>    Center(child: Text('首页', style: TextStyle(fontSize: 50))),<br>    Center(child: Text('分类', style: TextStyle(fontSize: 50))),<br>    Center(child: Text('购物车', style: TextStyle(fontSize: 50))),<br>    Center(child: Text('我的', style: TextStyle(fontSize: 50)))<br>  ];<br>  int index;<br>  void changePage(currentIndex) {<br>    setState(() {<br>      index = currentIndex;      <br>    });<br>  }<br>  @override<br>    void initState() {<br>      // TODO: implement initState<br>      super.initState();<br>      index = 0;<br>    }<br>  @override<br>  Widget build(BuildContext context) {<br>    return Scaffold(<br>      appBar: AppBar(<br>        title: Text('Tabbar'),<br>      ),<br>      bottomNavigationBar: BottomNavigationBar(<br>        items: bottomNavigationItems, <br>        currentIndex: index,<br>        type: BottomNavigationBarType.shifting,<br>        onTap: (index) {<br>          changePage(index);<br>        },<br>      ),<br>      body: page[index],<br>    );<br>  }<br>}

​

以上就是 短视频平台源码，构建简单的底部导航栏实现的相关代码，更多内容欢迎关注之后的文章