【Flutter从入门到实战】 ⑥、Flutter的StatefulWidget的生命周期didUpdateWidget调用机制、基础的Widget-普通文本Text、富文本Rich、按钮、图片的使用

本文链接：https://blog.csdn.net/qq_42816425/article/details/123441244

Flutter从入门到实战
一共分为23个系列
①(Flutter、Dart环境搭建篇) 共3个内容已更新
 ②(Dart语法1 篇) 共4个内容已更新
 ③(Dart语法2 篇) 共2个内容已更新
 ④(Flutter案例开发篇) 共4个内容已更新
 ⑤(Flutter的StatelessWidget 共3个内容已更新
 ⑥(Flutter的基础Widget篇) 共2个内容已更新
 ⑦(布局Widget篇) 共1个内容已更新
 ⑧(Flex、Row、Column以及Flexible、Stack篇) 共1个内容已更新
 ⑨(滚动的Widget篇) 共4个内容已更新
 ⑩(Dart的Future和网络篇) 共3个内容已更新
 ⑪(豆瓣案例-1篇) 共3个内容已更新
 ⑫(豆瓣案例-2篇) 共3个内容已更新

官方文档说明

官方视频教程
Flutter的YouTube视频教程-小部件

请添加图片描述

⑥Flutter的基础Widget篇

小贴士

1.将Stateless 转成 Stateful 快捷键
选中 Stateless的类按住 option + enter

2. 将一个widget 抽取出来快捷键
option + enter + w

我这里修改了 option + command + 2

①、Flutter的StatefulWidget的生命周期 `didUpdateWidget`

1.先找到官方文档的API 搜索widget并且找到State

请添加图片描述

状态对象具有以下生命周期：
框架通过调用 StatefulWidget.createState创建一个State对象。
新创建的State对象与BuildContext相关联。这种关联是永久的：State对象永远不会改变它的 BuildContext。但是，BuildContext本身可以与它的子树一
起在树周围移动。此时，State对象被视为已安装。
框架调用initState。State的子类应该重写 initState以执行依赖于BuildContext或小部件的一次性初始化，当调用initState方法时，它们分别可用作上下
文和 小部件属性。
框架调用didChangeDependencies。State的子类应该覆盖didChangeDependencies以执行涉及 InheritedWidget的初始化。如果调用了
BuildContext.dependOninheritedWidgetofExactType，如果继承的小部件随后发生变化或小部件在树中移动，则将再次调用didChangeDependencies
方法。
此时，State对象已完全初始化，框架可能会多次调用其build方法来获取此子树的用户界面描述。状态对象可以通过调用它们的setState方法自发地请求
重建它们的子树，这表明它们的某些内部状态已经以可能影响该子树中的用户界面的方式发生了变化。
在此期间，父小部件可能会重建并请求更新树中的此位置以显示具有相同 runtimeType和Widget.key的新小部件。发生这种情况时，框架将更新小部件
属性以引用新小部件，然后 以先前的小部件作为參数调用didUpdateWidget方法。状态 对象应覆盖didUpdatewidget以响应其关联小部件中的更改（例
如，启动隐式动画）。框架总是在调用didUpdateWidget之后调用build，这意味着在didUpdateWidget中对setState的任何调用是多余的。
在开发过程中，如果发生热重载（无论是从命令行flutter工具按启动r，还是从 IDE 启动），都会调用reassemble方法。这提供了重新初始化在
initState方法中准备的任何数据的机会。
如果包含State对象的子树从树中移除（例如，因为父级构建了具有不同runtimeType 或Widget.key的小部件），则框架调用deactivate方法。子类应该
重写此方法以清除此对象与树中其他元素之间的任何链接（例如，如果您为祖先提供了指向后代RenderObject的指针），
此时，框架可能会将此子树重新插入树的另一部分。如果发生这种情况，框架将确保调用build以使State对象有机会适应其在树中的新位置。如果框架
确实重新插入此子树，它将在从树中删除子树的动画帧结束之前执行此操作。因此，State对象可以推迟释放大部分资源，直到框架调用它们的dispose
方法。
如果框架在当前动画帧结束时没有重新插入这个子树，框架将调用dispose，这表明这个State对象将永远不会再次构建。子类应覆盖此方法以释放此对
象保留的任何资源（例如，停止任何活动动画)。
在框架调用dispose后，State对象被认为是未挂载的，mounted属性为 false。此时调用setState是错误的。生命周期的这个阶段是终端：无法重新挂载
已释放的State对象。

didUpdateWidget 是需要重新创建widget对象 才会调用

②、基础的Widget

1、普通文本 `Text`

/**
 * 1、普通文本 Text
 *   const Text(
    String this.data, {
    Key? key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
    })
 */
class TextDemoWidget extends StatelessWidget {
   
   
  const TextDemoWidget({
   
   
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
   
   
    return Text(
        "早发白帝城\n朝辞白帝彩云间，千里江陵一日还。\n两岸猿声啼不住，轻舟已过万重山。\n",
      textAlign: TextAlign.center,
      maxLines: 2,
      overflow: TextOverflow.ellipsis, // 显示省略号
      textScaleFactor: 2.0, // 缩放 比原来的是多少倍
      style: TextStyle(
        fontSize: 30,
        color: Colors.red,
        fontWeight: FontWeight.bold
      ),
    );
  }
}

1、效果图

main.dart代码

import 'package:flutter/material.dart'; // runApp在这个material库里面
main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   
   
  const MyApp({
   
   Key? key