Flutter Widget and Bald...... 这些我们都不讲，今天我们聊一下 Flutter Widget

Flutter 是什么？

我们先来搬运官网的一段介绍，让大家有一个直观的认识：

Flutter是谷歌的移动UI框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。
Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

简而言之

跨端（移动、Web、桌⾯、嵌⼊式）
⾼性能（Dart）
⾼效开发（热重载）
富有表现⼒的 UI（Widget）

温馨提示

搭建开发环境
Dart简介
......

这些我们都不讲，今天我们聊一下 Flutter Widget 。让我们开始吧～

Widget 简介

概念

Widget 描述了在当前的配置和状态下，视图所应该呈现的样⼦。当 Widget 的状态改变时，它会重新构建其描述（展示的 UI），框架则会对⽐前后变化的不同，以确定底层渲染树从⼀个状态转换到下⼀个状态所需的最⼩更改。

Widget目录

描述元素的配置

示例-1

示例-2

Widget 结构

Widget 组合的结构是树，所以叫Widget 树。树中包含

根Widget
- WidgetsApp【自定义风格】
- MaterialApp【基于 WidgetsApp的Material Design 风格(常用) 】
- CupertinoApp【基于 WidgetsApp 实现的 iOS 风格】
父Widget
子Widget

// main.dart
import 'package:flutter/material.dart'; //风格需要先导入哦～
import 'my_home_page_widget.dart';

void main() => runApp(MyApp());  //Flutter会默认把 根Widget 充满屏幕

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: MyHomePage(title: 'Vava熊の日记'),
    );
  }
}

Widget 与 Element

Widget树实际上是一个配置树,而真正的UI渲染树是由Element构成。
一个Widget对象可以对应多个Element对象。根据同一份配置（Widget），可以创建多个实例（Element）。

graph LR
Widget配置--> Element1
Widget配置--> Element2
Widget配置--> Element3
Widget配置--> ...

Widget 状态分类

因为渲染是很耗性能的，为了提高 Flutter 的帧率，就要尽量减少不必要的 UI 渲染，所以 Flutter 根据 UI 是否有变化，将 Widget 分为StatelessWidget && StatefulWidget 。

StatelessWidget和StatefulWidget都是直接继承自Widget类，它们引入了两种Widget模型，接下来我们将重点介绍一下这两个类。

StatelessWidget：immutable（状态不可变）

StatelessWidget是不可变状态的 Widget 抽象类，只能在加载/构建 Widget 时才绘制一次，无法基于任何事件或用户操作重绘。所以 StatelessWidget生命周期就只有一个，即 build 函数。

StatelessWidget の Demo

// main.dart
import 'package:flutter/material.dart';
import 'stateless.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: MyStatelessApp("123 木头人，不许动    ——from Vava熊")
    );
  }
}

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

class MyStatelessApp extends StatelessWidget {
  final String content;
  MyStatelessApp(this.content);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
          title: Text('StatelessWidget'),
        ),
        body:Center(
          child: Text(content),
        )
    );
  }
}

效果图

StatefulWidget 及 State

可变状态的 Widget
创建 State 对象
多生命周期

StatefulWidget の Demo

每点击文本一次，body文本中就会多一次‘赞’

// main.dart
import 'package:flutter/material.dart';
import 'stateful.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: MyStatefulApp("Vava熊の一天")
    );
  }
}

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

class MyStatefulApp extends StatefulWidget {
  String content;
  MyStatefulApp(this.content);

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

class MyStatefulAppState extends State<MyStatefulApp> {
  bool isShowText =true;
  void increment(){
    setState(() {
      widget.content += "赞";
    });
  }
  
  //build() 方法在 didChangeDependencies()（或者 didUpdateWidget() ）之后调用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
          title: Text('StatefulWidget及State'),
        ),
        body:Center(
          child: GestureDetector(
            child: isShowText? Text(widget.content) :null,
            onTap: increment,
           )
        )
    );
  }
  
  //-------only 生命周期 log------------
  //创建 State 对象后要调用的第一个方法
  @override
  void initState() {
    super.initState();
    print("initState");
    context.runtimeType;
  }

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

  //runtimeType 和 Widget.key 都一样，那么就会调用 didUpdateWidget()。
  @override
  void didUpdateWidget(MyStatefulApp oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }

  // StaefulWidget 从树中移除时
  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }
  
  //执行 HotReload，就会触发 reassemble()，这提供了重新初始化在 initState() 方法中准备的任何数据的机会，包括全局变量。
  @override
  void reassemble() {
    super.reassemble();
    print("reassemble");
  }
}

效果图

State 的生命周期

在上面的例子中，除了效果外，我们也看到了关于生命周期的备注信息。

// 控制台日志
// 1.第一次 | 新打开
....
Restarted application in 1,153ms.
flutter: initState
flutter: didChangeDependencies
flutter: reassemble
flutter: didUpdateWidget
...
// 2.我们点击⚡️按钮热重载
...
Syncing files to device iPhone Xʀ...
flutter: reassemble
flutter: didUpdateWidget
...
// 3. 移除 widget
...
flutter: reassemble
flutter: dispose
Reloaded 2 of 442 libraries in 117ms.
...

盗图小结

葵花宝典：如果 UI 需要改变，就用 StatefulWidget。不需要改变，就用 StatelessWidget。

写在最后の总结

Widget 特点

一切皆 Widget
UI的配置信息
一次性的
轻量的

Widget 应用

Widget 众多，需要开发者们更多地实践与性能的关注。路漫漫其修远兮，今天也要加油鸭～

关于我们

快狗打车前端团队专注前端技术分享，定期推送高质量文章，欢迎关注点赞。
文章同步发布在公众号哟，想要第一时间得到最新的资讯，just scan it ！