Flutter入门04 -- Widget之StatelessW

作者: YanZi_33 | 来源:发表于2021-10-17 22:54 被阅读0次

Flutter入门04 -- Widget之StatelessW
Flutter 组件分析之SafeArea
Flutter布局入门
Flutter学习资源整理
flutter入门之基本widget
Flutter入门04----基础Widget
（六）flutter入门之widget解惑
flutter笔记汇总
Flutter之Widget
Flutter之基础Widget

项目案例 -- 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

Flutter入门04 -- Widget之StatelessW
项目案例 -- StatelessWidget 案例代码如下：效果如下所示：给widget添加Containe...
Flutter 组件分析之SafeArea
本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的...
Flutter布局入门
Flutter布局入门一、Widget简介描述 Fullter的核心思想是用widget 来构建你的 UI 界...
Flutter学习资源整理
Flutter快速上车之Widget 【开发经验】浅谈flutter的优点 Flutter Widgets Ele...
flutter入门之基本widget
flutter中，对应的显示对象都是一个个对应的widget，不仅包含原生中对应的text,button等，还有布...
Flutter入门04----基础Widget
项目案例 -- StatelessWidget 案例代码如下：效果如下所示：给widget添加Containe...
（六）flutter入门之widget解惑
首先在介绍flutter之前，我们需要了解一个概念，在dart中的理念是一切皆为对象，而在flutter上，我们的...
flutter笔记汇总
Widget 基础Widget flutter笔记（一）-----官方示例&代码解读 flutter笔记（二）-...
Flutter之Widget
Widget说明在Flutter中几乎所有的对象都是一个 widget。Flutter 中是通过 Widget ...
Flutter之基础Widget
原文博客地址: Flutter之基础Widget Flutter和Dart系列文章项目GitHub地址 Flut...