Flutter 开发初体验及生命周期

Flutter 开发初体验及生命周期

• 参考：
  • Flutter(一)之Flutter开发初体验
  • Flutter(二)之有状态的StatefulWidget
  • Flutter 系列教程

命令行创建项目

flutter create learn_flutter

•  使用Android studio 打开项目

• 热启动与热重载

 

• 热启动：重新执行build方法
• 热重载：重新执行app

Hello Flutter

import 'package:flutter/material.dart';

main(){
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar:AppBar(
              title:Center(
                child:Text("My First App")
              )
          ),
          body:Center(
            child: Text(
              "Hello World",
              style:TextStyle(
                  fontSize:36,
                  color: Colors.green
              ) ,
            ),
          )
      ),
    )
  );
}

• 显示：

组件化开发

import 'package:flutter/material.dart';

main()=>runApp(MyApp());

/**
 * Widget:
 * 有状态的Widget: StatefulWidget 在运行过程中有一些状态(data)需要改变
 * 无状态的Widget: StatelessWidget 内容是确定没有状态(data)的改变
 */
class MyApp extends StatelessWidget {
  // build
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: HYHomePage()
    );
  }
}

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("HYHomePage Build");
    return Scaffold(
        appBar: AppBar(
          title: Text("第一个Flutter程序"),
        ),
        body: HYContentBody()
    );
  }
}

// StatefullWidget: 继承自StatefulWidget的类(可以接收父Widget传过来的数据)/State类(状态)
// flag: 状态
// Stateful不能定义状态 -> 创建一个单独的类, 这个类负责维护状态
class HYContentBody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HYContentBodyState();
  }
}


class HYContentBodyState extends State<HYContentBody> {
  var flag = true;

  @override
  Widget build(BuildContext context) {
    print("HYContentBodyState Build");
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Checkbox(
            value: flag,
            onChanged: ( value) {
              this.setState(() {
                // flag = value;
              });
            },
          ),
          Text("同意协议", style: TextStyle(fontSize: 20))
        ],
      ),
    );
  }
}

• 显示：

• 创建组件快捷方式： stl
• 组件外部包裹快捷键，无状态与有状态组件转换：ALT+回车

•  Ctrl + Alt +b 查看实现抽象类的子类

• 在build中抽取部分代码组成新的widget：ALT + Enter+ W (冲突改成ALt+ shift+z 自定义即可)

StatelessWidget示例

import 'package:flutter/material.dart';

main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CWHomePage(),
    );
  }
}

class CWHomePage extends StatelessWidget {
  const CWHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("商品列表"),
      ),
      body:CWHomeContent(),
    );
  }
}

class CWHomeContent extends StatelessWidget {
  const CWHomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        CWProductItem("Apple1", "Macbook Product1", "https://gw.alicdn.com/tfs/TB14WfGdxvbeK8jSZPfXXariXXa-2880-1500.png"),
        CWProductItem("Apple2", "Macbook Product2", "https://img.alicdn.com/tfs/TB1kKyMjRBh1e4jSZFhXXcC9VXa-2880-1040.png"),
        CWProductItem("Apple3", "Macbook Product3", "https://gw.alicdn.com/tfs/TB1MOyyesieb18jSZFvXXaI3FXa-2880-1500.png"),
      ],
    );
  }
}

class CWProductItem extends StatelessWidget {
  final String title;
  final String desc;
  final String imageURL;
  CWProductItem(this.title,this.desc,this.imageURL);

  final style1= TextStyle(fontSize: 24,color: Colors.pink);
  final style2= TextStyle(fontSize: 20,color: Colors.green);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        border: Border.all(
          width: 8,
          color: Colors.pink
        )
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Text(title,style: style1),
          SizedBox(height: 8),
          Text(desc,style: style2),
          SizedBox(height: 8),
          Image.network(imageURL)
        ],
      ),
    );
  }
}

StatefulWidget示例

• 为什么Flutter在设计的时候StatefulWidget的build方法放在State中
•  1.build出来的Widget是需要依赖State中的变量(状态/数据)
•  2.在Flutter的运行过程中:
  • Widget是不断的销毁和创建的
  • 当我们自己的状态发生改变时, 并不希望重新创建一个新的State
• 注: 类比react中有状态组件和无状态组件。

import 'package:flutter/material.dart';

main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CWHomePage(),
    );
  }
}

class CWHomePage extends StatelessWidget {
  const CWHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("测试示例"),
      ),
      body:CWHomeContent("Hello, Flutter"),
    );
  }
}

class CWHomeContent extends StatefulWidget {
  final String message;
  CWHomeContent(this.message);
  
  @override
  State<CWHomeContent> createState() => _CWHomeContentState();
}

class _CWHomeContentState extends State<CWHomeContent> {
  int _counter=0;


  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _getButton(),
          Text("当前计数 $_counter",style: TextStyle(fontSize: 25),),
          Text("传递的信息:${widget.message}")
        ],
      ),
    );
  }


  Widget _getButton(){
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text("+", style:TextStyle(fontSize: 20,color: Colors.white)),
            color: Colors.pink,
            onPressed: () {
              setState(() {
              _counter++;
              });
              }),
          RaisedButton(
            child: Text("-",style:TextStyle(fontSize: 20,color: Colors.white)),
            color: Colors.green,
            onPressed: () {
              setState(() {
                _counter--;
              });
            }
          )
        ],
      );
    }
}

• 显示：

StatefulWidget生命周期

• StatefulWidget本身由两个类组成的：StatefulWidget和State，我们分开进行分析

•  示例：

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HYHomeDemo(),
    );
  }
}

class HYHomeDemo extends StatefulWidget {
  @override
  _HYHomeDemoState createState() => _HYHomeDemoState();
}

class _HYHomeDemoState extends State<HYHomeDemo> {
  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Column(
        children: [HYHomeContent()],
      ),
      floatingActionButton: RaisedButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {});
        },
      ),
    );
  }
}

// StatelessWidget的生命周期
// class HYHomeContent extends StatelessWidget {
//  final String message;

//  HYHomeContent(this.message) {
//    print("构造函数被调用");
//  }

//  @override
//  Widget build(BuildContext context) {
//    print("调用build方法");
//    return Text(message);
//  }
// }

// StatefulWidget的生命周期
class HYHomeContent extends StatefulWidget {
  HYHomeContent() {
    print("1.调用HYHomeContent的constructor方法");
  }

  @override
  _HYHomeContentState createState() {
    print("2.调用HYHomeContent的createState方法");
    return _HYHomeContentState();
  }
}

class _HYHomeContentState extends State<HYHomeContent> {
  int _counter = 0;
  _HYHomeContentState() {
    print("3.调用_HYHomeContentState的constructor方法");
  }

  @override
  void initState() {
    // 调用: 这里是必须调用super
    final TextStyle style = TextStyle();

    super.initState();
    print("4.调用_HYHomeContentState的initState方法");
  }

  @override
  void didUpdateWidget(HYHomeContent oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("调用_HYHomeContentState的didChangeDependencies方法");
  }

  @override
  Widget build(BuildContext context) {
    print("5.调用_HYHomeContentState的build方法");
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              _counter++;
            });
          },
        ),
        Text("数字:$_counter")
      ],
    );
  }

  @override
  void dispose() {
    print("6.调用_HYHomeContentState的dispose方法");
    super.dispose();
  }
}

• 输出：