【Flutter】学习笔记01

文字描述全在代码的注释当中，写的也是比较乱，权当是记录一下写的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('[email protected]'),
              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,);
  }
}