Flutter入门04 -- Widget之StatelessW

项目案例 -- StatelessWidget

• 案例代码如下：

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

main() => runApp(SFMyApp());

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

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

class SFContentBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     return ListView(
       children: [
         SFProductItem("Apple1","MacBook1","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.bbs.9game.cn%2Fattachments%2Fforum%2F201507%2F29%2F154250no2g2zqiuiqvaiku.jpg&refer=http%3A%2F%2Fdl.bbs.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637072364&t=07974f838e1b49ecdecaba22f4af4fa2"),
         SFProductItem("Apple2","MacBook2","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.bbs.9game.cn%2Fattachments%2Fforum%2F201507%2F29%2F154250no2g2zqiuiqvaiku.jpg&refer=http%3A%2F%2Fdl.bbs.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637072364&t=07974f838e1b49ecdecaba22f4af4fa2"),
         SFProductItem("Apple3","MacBook3","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.bbs.9game.cn%2Fattachments%2Fforum%2F201507%2F29%2F154250no2g2zqiuiqvaiku.jpg&refer=http%3A%2F%2Fdl.bbs.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637072364&t=07974f838e1b49ecdecaba22f4af4fa2"),
       ],
     );
  }
}

class SFProductItem extends StatelessWidget {
  final String title;
  final String desc;
  final String imageUrl;

  final titleStyle = TextStyle(fontSize: 25,color: Colors.orange);
  final descStyle = TextStyle(fontSize: 20,color: Colors.green);

  //自定义构造函数
  SFProductItem(this.title,this.desc,this.imageUrl);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8), //设置内边距
      decoration: BoxDecoration(
        border: Border.all(
          width: 5, //设置边框的宽度
          color: Colors.purple //设置边框的额颜色
        )
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title,style: titleStyle),
          SizedBox(height: 8),//设置间距
          Text(desc,style: descStyle),
          SizedBox(height: 8),
          Image.network(imageUrl)
        ],
      ),
    );
  }
}

• 效果如下所示：

image.png

• 给widget添加Container的快捷键Alt + Enter
• widget之间设置间距使用SizedBox(height: 8)

项目案例 -- StatefulWidget

• StatefulWidget最大的特点是：StatefulWidget通过创建状态类_SFHomeContentState，来管理自己的状态数据；
• 案例代码如下：

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

void main() => runApp(SFMyApp());


class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage()
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表")
      ),
      body: SFHomeContent("上面是一个简单的计数器")
    );
  }
}

class SFHomeContent extends StatefulWidget {
  final String message;

  SFHomeContent(this.message);

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

//
class _SFHomeContentState extends State<SFHomeContent>{

  var _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _getButtons(),
          Text("当前计数: $_counter",style: TextStyle(fontSize: 20)),
          Text("${widget.message}",style: TextStyle(fontSize: 18))
        ],
      ),
    );
  }

  Widget _getButtons(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RaisedButton(
          child: Text("+",style: TextStyle(fontSize: 20,color: Colors.white)),
          color: Colors.pink,
          onPressed: (){
            print("点击+");
            setState(() {
              _counter++;
            });
          },
        ),
        RaisedButton(
          child: Text("-",style: TextStyle(fontSize: 20,color: Colors.white)),
          color: Colors.purple,
          onPressed: (){
            print("点击-");
            setState(() {
              _counter--;
            });
          },
        )
      ],
    );
  }
}

• class _SFHomeContentState extends State<SFHomeContent>，Widget _getButtons()类名与方法名之前加下划线表明属于私有的；
• class _SFHomeContentState extends State<SFHomeContent>：_SFHomeContentState状态用来管理SFHomeContent这个widget的状态数据的，即_SFHomeContentState会绑定SFHomeContent，_SFHomeContentState中能通过widget属性访问SFHomeContent中的内容；
• 代码运行效果：

image.png

StatefulWidget生命周期

• 所谓生命周期是指：目标组件从创建到销毁的整个过程，监听组件的生命周期以便在不同的时期执行不同的逻辑；
• Flutter组件的生命周期：
  • StatelessWidget可以由父widget直接传入值，调用build方法来创建，整个过程非常简单，其生命周期，主要关注构造函数与build方法；
  • StatefulWidget需要通过State来管理其状态数据，并且监听状态的改变重新build整个widget；
• StatefulWidget生命周期的过程如下图所示：
  Snip20211018_14.png
• 1.执行StatefulWidget的构造函数；
• 2.执行StatefulWidget的createState方法，创建一个维护StatefulWidget的State对象；
• 3.执行State的构造方法；
• 4.执行initState方法，我们通常在此方法中执行一些数据初始化操作，或者发送网络请求；
• 5.didChangeDependencies方法，在下面两种情况下会调用：
  • 调用initState时会调用；
  • 从其他对象中依赖一些数据发生改变时，比如InheritedWidget；
• 6.执行build方法，渲染widget树；
• 7.当 当前的widget不再使用时，会调用dispose方法进行销毁；
• 8.手动调用setState方法，会根据最新的状态数据来重新调用build方法，构建对应的widget；
• 9.执行didUpdateWidget方法是在父widget触发重建rebuild时，系统会调用didUpdateWidget方法；
• 代码案例验证：

import 'package:flutter/material.dart';

void main() => runApp(SFMyApp());


class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage()
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表")
      ),
      body: SFHomeContent("上面是一个简单的计数器")
    );
  }
}

class SFHomeContent extends StatefulWidget {
  final String message;

  SFHomeContent(this.message){
    print("SFHomeContent 构造方法");
  }

  @override
  State<StatefulWidget> createState() {
    print("createState");
    return _SFHomeContentState();
  }
}

class _SFHomeContentState extends State<SFHomeContent>{

  var _counter = 0;

  _SFHomeContentState(){
    print("_SFHomeContentState 构造方法");
  }

  @override
  void initState() {
    super.initState();
    print("_SFHomeContentState initState");
  }

  @override
  Widget build(BuildContext context) {
    print("_SFHomeContentState build");
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RaisedButton(
            child: Text("+",style: TextStyle(fontSize: 25,color: Colors.white)),
            color: Colors.pinkAccent,
            onPressed: (){
              setState(() {
                _counter++;
              });
            },
          ),
          Text("${widget.message}",style: TextStyle(fontSize: 18))
        ],
      ),
    );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("_SFHomeContentState didChangeDependencies");
  }

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

- 

  @override
  void dispose() {
    super.dispose();
    print("_SFHomeContentState dispose");
  }
}

• 执行结果如下：

image.png

• StatefulWidget生命周期复杂版的过程如下图所示：
  

  Snip20211018_13.png

• mounded时State内部设置的一个属性，不需要我们手动进行修改的，其主要作用是记录widget对应的element是否为空；

• dirty state含义是脏的state，它实际是来标记Element的，标记为dirty的Element会等待下一次的重绘检查，强制调用build方法来构建我们的widget；

• clean state含义是干净的state，它表示当前build出来的widget，下一次重绘检查不需要重新build；

Flutter的编程范式

• 命令式编程：就是一步步给计算机命令，告诉它我们想做什么事情；
• 声明式编程：通常是描述目标的性质，依赖哪些状态，并且当依赖的状态发生改变时，我们通过某些方式通知目标做出响应，声明式编程是依赖框架的；
• Flutter采用的是声明式编程；
• 命令式编程的代码案例：

final text = new Text();
var title = "Hello World";
text.setContent(title); //主动设置title

• 声明式编程的代码案例：

var title = "Hello World";
Text(title); //告诉Text内部显示的是title