Flutter Widget and Bald

Flutter 是什么？

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

Flutter是谷歌的移动UI框架，能够快速在 iOS 和 Android 上构建高质量的原生用户界面。
Flutter能够与现有的代码一块儿工做。在全世界，Flutter正在被愈来愈多的开发者和组织使用，而且Flutter是彻底免费、开源的。
复制代码

简而言之

1. 跨端（移动、Web、桌⾯、嵌⼊式）
2. ⾼性能（Dart）
3. ⾼效开发（热重载）
4. 富有表现⼒的 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 ！