Flutter完整开发实战详解(一、Dart语言和Flutter基础) _ 掘金技术征文(1)

return data;
}

///打印结果
renderSome() {
doSomeThing().then((value) {
print(value);
///输出ok from request
});
}

• Flutter 中 setState 很有 React Native 的既视感，Flutter 中也是通过 State 跨帧实现管理数据状态的，这个后面会详细讲到。

• Flutter 中一切皆 Widget 呈现，通过 build方法返回 Widget，这也是和 React Native 中，通过 render 函数返回需要渲染的 component 一样的模式。

• Stream 对应的 async* / yield 也可以用于异步，这个后面会说到。

3、Flutter Widget

在 Flutter 中一切的显示都是 Widget ，Widget 是一切的基础，利用响应式模式进行渲染。

我们可以通过修改数据，再用setState 设置数据，Flutter 会自动通过绑定的数据更新 Widget ， 所以你需要做的就是实现 Widget 界面，并且和数据绑定起来。

Widget 分为 有状态 和 无状态 两种，在 Flutter 中每个页面都是一帧，无状态就是保持在那一帧，而有状态的 Widget 当数据更新时，其实是创建了新的 Widget，只是 State 实现了跨帧的数据同步保存。

这里有个小 Tip ，当代码框里输入 stl 的时候，可以自动弹出创建无状态控件的模板选项，而输入 stf 的时，就会弹出创建有状态 Widget 的模板选项。

代码格式化的时候，括号内外的逗号都会影响格式化时换行的位置。

如果觉得默认换行的线太短，可以在设置-Editor-Code Style-Dart-Wrapping and Braces-Hard wrap at 设置你接受的数值。

3.1、无状态StatelessWidget

直接进入主题，如下下代码所示是无状态 Widget 的简单实现。继承 StatelessWidget，通过 build 方法返回一个布局好的控件。可能现在你还对 Flutter 的内置控件不熟悉，but Don’t worry , take it easy ，后面我们就会详细介绍这里你只需要知道，一个无状态的 Widget 就是这么简单。

Widget 和 Widget 之间通过 child: 进行嵌套。其中有的 Widget 只能有一个 child，比如下方的 Container ；有的 Widget 可以多个 child ，也就是children，比如` Column 布局，下方代码便是 Container Widget 嵌套了 Text Widget。

import ‘package:flutter/material.dart’;

class DEMOWidget extends StatelessWidget {
final String text;

//数据可以通过构造方法传递进来
DEMOWidget(this.text);

@override
Widget build(BuildContext context) {
//这里返回你需要的控件
//这里末尾有没有的逗号，对于格式化代码而已是不一样的。
return Container(
//白色背景
color: Colors.white,
//Dart语法中，?? 表示如果text为空，就返回尾号后的内容。
child: Text(text ?? “这就是无状态DMEO”),
);
}
}

3.2、有状态StatefulWidget

继续直插主题，如下代码，是有状态的widget的简单实现，你需要创建管理的是主要是 State ， 通过 State 的 build 方法去构建控件。在 State 中，你可以动态改变数据，在 setState 之后，改变的数据会触发 Widget 重新构建刷新，而