【Flutter】学习笔记02

同样只是学习的一个记录，记得很杂。

main.dart

//导入相关控件
import 'package:flutter/material.dart';
import 'components/list.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,
                  ),
                ]),
            DataList(type: '新年快乐',),
            DataList(type: '万事大吉'),
        ],),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
      ),
    ),length: 3,);
  }
}

list.dart

import 'package:flutter/material.dart';
import 'detail.dart';

class DataList extends StatefulWidget{
  DataList({Key key,this.type}):super(key:key);
  final String type;
  @override
   State<StatefulWidget> createState(){
    return _DataListState();
  }
}

//状态管理类
//with AutomaticKeepAliveClientMixin 是为了保持页面的状态 比如滚动到那个位置 于此同时还要 将下面wantKeepAlive 变成如下写法
class _DataListState extends State<DataList> with AutomaticKeepAliveClientMixin{

  @override
  bool get wantKeepAlive =>true;

  var dataList=[
    '2020'
  ];
  var imageList=[
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580227063290&di=89f97a4c9ec8444b4b88af8ab165ccba&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F95b71fbe29cf87911fc7063d5fce64c94c256fd42a0b3-4QwhcJ_fw658',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580226978016&di=a07323d0a9d56c6bf4b01317d8dfe129&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F05%2F20180205184357_irwly.thumb.700_0.jpg'
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    dataList.add(widget.type);
  }
  @override
   Widget build(BuildContext context){
    //ListView.builder 循环创建子元素
    return ListView.builder(itemCount: dataList.length, itemBuilder:(BuildContext context,int i){
      //添加事件
      return GestureDetector(
          // 点击事件
          onTap:(){ 
            Navigator.push(context,MaterialPageRoute(builder: (BuildContext context){
              return Detail(type: widget.type,);
            }));
          },
          child: Container(
          decoration: BoxDecoration(
              border: Border(
                  bottom:BorderSide(color: Colors.black12)
              )
          ),

          padding: EdgeInsets.all(10),
          child: Row(children: <Widget>[
            Image.network(imageList[i],width: 100,height: 100 ,fit: BoxFit.cover,),
            Column(
              //主轴
              mainAxisAlignment: MainAxisAlignment.center,
              //侧轴
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(child:Text(dataList[i],style: TextStyle(fontSize: 20),),margin: EdgeInsets.only(left: 10),)

              ],
            )
          ])
      )) ;
    } );
  }
}

detail.dart

import 'package:flutter/material.dart';

class Detail extends StatefulWidget{
  Detail({Key key,this.type}):super(key:key);
  final String type;

  @override
  State<StatefulWidget> createState(){
    return _Detail();
  }
}

class _Detail extends State<Detail>{
  @override
  Widget build(BuildContext context){
      return Scaffold(
        body:Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(widget.type,style: TextStyle(color: Colors.red,fontSize: 30),)
            ],
          ),
        ),
        //导航条
        appBar: AppBar(
          //导航条文字
          title: Text("Gecer"),
          //文本显示居中
          centerTitle: false,
          //右侧行为按钮,可以定义多个
        ),
      ) ;
  }
}