文字描述全在代码的注释当中，写的也是比较乱，权当是记录一下写的demo与效果。
//导入相关控件
import 'package:flutter/material.dart';
//入口方法-制定首页
void main() => runApp(MyApp());
//首页（StatelessWidget代表无状态控件，无状态控件内部没有私有数据，纯展示页面)
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
//返回了一个应用程序，每个项目都必须有一个
return MaterialApp(
//程序标题
title: 'Flutter Demo1',
//主题
theme: ThemeData(
//主题色
primarySwatch: Colors.blue,
),
//指向首页
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//首页（有窗台页面，允许页面数据动态改变）
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
//每个动态页面都必须重写 createState 方法 返回一个 本类的子类，在子类中必须实现build方法
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
//定义事件
void _incrementCounter() {
//通知框架重回页面
setState(() {
_counter++;
});
}
void _decrementCounter() {
//通知框架重回页面
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
// 如果添加TabBar 必须加一个控制器
return DefaultTabController(
//需要添加 Scaffold 包含页面基本的组成单元（例如头部导航AppBar，主体body，侧标抽屉drawer）
child: Scaffold(
//导航条
appBar: AppBar(
//导航条文字
title: Text("Gecer"),
//文本显示居中
centerTitle: false,
//右侧行为按钮,可以定义多个
actions: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: _incrementCounter),
IconButton(icon: Icon(Icons.delete), onPressed: _decrementCounter)
],
),
//侧边栏
drawer: Drawer(
child: ListView(
//去上边栏灰色条
padding: EdgeInsets.all(0),
children: <Widget>[
//固定格式的用户信息介绍
UserAccountsDrawerHeader(
accountEmail: Text('780895965@qq.com'),
accountName: Text('Gecer'),
//头像
currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage('https://profile.csdnimg.cn/E/A/C/1_weixin_39370093'),),
//美化控件
decoration:BoxDecoration(
//背景图片
image: DecorationImage(
fit: BoxFit.cover,
image:NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580181236422&di=6f0c4c5ebd74e901d2d113e0a2cffa3f&imgtype=0&src=http%3A%2F%2Fclubfiles.libaclub.com%2F2011%2F11%2F02%2F23%2F33796585.jpg')
)
) ,
),
//列表项
ListTile(title: Text('2020'),trailing: Icon(Icons.grade,color: Colors.red,),),
ListTile(title: Text('国泰民安'),trailing: Icon(Icons.grade,color: Colors.orange),),
Divider(color: Colors.amberAccent,),
ListTile(title: Text('祝大家新年快乐，阖家幸福',style: TextStyle(color:Colors.orange ),),trailing: Icon(Icons.grade,color: Colors.orange),),
],),
),
//底部导航栏 Container是为了给底部导航栏加样式
bottomNavigationBar:Container(
//一般高度都是50
height: 50,
decoration: BoxDecoration(color: Colors.black),
child: TabBar(
//设置文本（解决文字压缩没了的问题）
labelStyle: TextStyle(height: 0,fontSize: 10),
tabs: <Widget>[
Tab(text: '2020',icon:Icon(Icons.star) ),
Tab(text: '新年快乐',icon:Icon(Icons.star) ),
Tab(text: '万事大吉',icon:Icon(Icons.star) ),
],
),),
//主体
body: Center(
child: TabBarView(children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'To be or not to be.',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
]),
Text('2'),
Text('3'),
],),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),length: 3,);
}
}