Flutter|Flutter底部导航加侧边栏，顶部导航栏集合（第一章） Flutter|Flutter学习

写在前面：Flutter的每个页面，大致分为如下结构。如图：

文章图片

一，效果图。

二，分析：

文章图片

三，代码分别列出来：主页：main

import 'package:flutter/material.dart'; import 'package:flutter_day/views/MyBottomNavigation.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( //应用名字 title: 'Flutter Do', //样式 theme: ThemeData( // This is the theme of your application. // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue,//主题颜色), // home: MyBottomNavigation(),//主页 ); } }

底部导航栏：MyBottomNavigation（）；

import 'package:flutter/material.dart'; import 'package:flutter_day/views/pages/Four.dart'; import 'package:flutter_day/views/pages/One.dart'; import 'package:flutter_day/views/pages/Three.dart'; import 'package:flutter_day/views/pages/Two.dart'; //有状态的widget class MyBottomNavigation extends StatefulWidget { MyBottomNavigation({Key key}) : super(key: key); @override _MyBottomNavigationState createState() => _MyBottomNavigationState(); } class _MyBottomNavigationState extends State { int _selectedIndex = 1; //声明选择的默认下标。1 final _widgetOptions = [//body集合，类是与Fragment One(), Two(), Three(), Four(), ]; @override Widget build(BuildContext context) { return Scaffold( //标题 //appBar: AppBar( //title: Text('BottomNavigationBar Sample'), ////标题样式 //textTheme: TextTheme(title: TextStyle(color: Colors.green)), //backgroundColor: Colors.redAccent, //), //内容 body: Center( //根据选择的_selectedIndex 切换不同的页面 child: _widgetOptions.elementAt(_selectedIndex), ), //底部 bottomNavigationBar: BottomNavigationBar( //todo:超过4个要设置这个属性。 type: BottomNavigationBarType.fixed, items: [ BottomNavigationBarItem(icon: Icon(Icons.music_video), title: Text('音乐')), BottomNavigationBarItem( icon: Icon(Icons.movie), title: Text('视频')), BottomNavigationBarItem( icon: Icon(Icons.supervisor_account), title: Text('联系人')), BottomNavigationBarItem(icon: Icon(Icons.camera), title: Text('朋友圈')), ], currentIndex: _selectedIndex,//当前点击的Index值， fixedColor: Colors.blue,//点击后的颜色 onTap: _onItemTapped,//监听 ), ); }void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } }

我把顶部导航栏集成在，One页面。

import 'package:flutter/material.dart'; import 'package:flutter_day/views/TopPage.dart'; class One extends StatefulWidget { @override State createState() => OneState(); }class OneState extends State { @override Widget build(BuildContext context) { return Scaffold( body: TopPage(), ); } }

TopPage();

import 'package:flutter/material.dart'; import 'package:flutter_day/views/pages/item/ITEM_TITLE.dart'; import 'package:flutter_day/views/pages/item/ItemSquare.dart'; import 'package:flutter_day/views/pages/item/ItemSquare_dujia.dart'; import 'package:flutter_day/views/pages/item/ItemSquare_text.dart'; import 'package:flutter_day/views/pages/item/Item_DianTai.dart'; import 'package:flutter_day/views/pages/item/Item_Type.dart'; import 'package:flutter_day/views/MyDrawer.dart'; import 'package:flutter_day/views/pages/item/Item_MusicList.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; class TopPage extends StatefulWidget { @override State createState() => _TopPageState(); }class _TopPageState extends State with SingleTickerProviderStateMixin { //Tab页的控制器，可以用来定义Tab标签和内容页的坐标 TabController _tabController; @override void dispose() { _tabController.dispose(); super.dispose(); }//生命周期方法插入渲染树时调用，只调用一次void initState() { super.initState(); //初始化控制器 _tabController = TabController( length: 4, //Tab页的个数 vsync: this //动画效果的异步处理，默认格式; ); }@override Widget build(BuildContext context) { return Scaffold( drawer: MyDrawer(),//侧边栏 appBar: AppBar( elevation: 10, title: Flex( //容器，比例摆放， direction: Axis.horizontal, children: [ Expanded( flex: 1, child: Row(), ), Expanded(//这个是为了让俩中间的导航不至于太过分散 flex: 3, child: TabBar( //指示器颜色 indicatorColor: Colors.white, //指示器的间距 indicatorPadding: EdgeInsets.only(left: 40, right: 40), //指示器的大小 label：指示器根据图片的大小决定，tab：指示器铺满 indicatorSize: TabBarIndicatorSize.tab, indicatorWeight: 2, //指示器 tabs: [ Tab( icon: Icon(Icons.music_note), ), Tab( icon: Icon(Icons.queue_music), ), ], controller: _tabController, ), ), Expanded(//这个是为了让俩中间的导航不至于太过分散 flex: 1, child: Row(), ), ], )), body: TabBarView(controller: _tabController, children: [ new Text('第一页'), new Text('第二页') ]), ); } }

**把Drawer也集成的第一个页面。这样其他的页面侧滑就不会起作用的，除非集成在主页面的位置，这个看个人需求 **

import 'package:flutter/material.dart'; class MyDrawer extends StatelessWidget { const MyDrawer({ Key key, }) : super(key: key); @override Widget build(BuildContext context) { // TODO: implement build return Drawer( child: MediaQuery.removePadding( context: context, removeTop: true, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.only(top: 38), child: Row( children: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 16), child: ClipOval( child: Image.network( 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4214474476,1941437198&fm=27&gp=0.jpg', width: 80, )), ), Text( 'ASD', style: TextStyle(fontWeight: FontWeight.bold), ) ], ), ), Expanded( child: ListView( children: [ ListTile( leading: const Icon(Icons.add), title: const Text('Add account'), ), ListTile( leading: const Icon(Icons.settings), title: const Text('Manage accounts'), ), ], ), ) ], ), )); } }

【Flutter|Flutter底部导航加侧边栏，顶部导航栏集合（第一章）】才开始学Flutter不足之处，多多指出，感谢！