特点：组合 + 响应式

组合即组件化（Widget）
响应式，即通过维护state状态、虚拟节点，来实现setState按需更新

注意：通过这两个特点，即可看出flutter和react/vue的核心并没有区别，都是组件化、响应式

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text(
        '$_counter',
        style: Theme.of(context).textTheme.headline4,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

对比1：Widget与H5

HTML - Widget
CSS - Widget
JS - Dart

对比2：生命周期（Widget、旧版本React）

注意：通过对比，即可看出flutter组件和react/vue的组件生命周期也类似，都是需要维护state状态

Widget组件分类 - 基础组件（类似HTML）

文本 - Text
按钮 - Button
图片 - Image/Icon
选项 - Switch/Checkbox
输入 - TextField/Form
手势 - Gesture

  Text(
    _friends[index].name,
    style: TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.bold,
    )
  ),

Image.network(
  _friends[index].avatar,
  width: 100,
  height: 100,
),

Widget组件分类 - 布局组件（类似CSS）

Container
Padding、Align、Center
FittedBox、AspectRatio、ConstrainedBox
Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth
LimitedBox、Offstage、OverflowBox、SizedBox
SizedOverflowBox、Transform、CustomSingleChildLayout
Row、Column
Stack、IndexedStack、GridView
Flow、Table、Wrap
ListBody、ListView、CustomMultiChildLayout

  Container(
    margin: EdgeInsets.only(bottom: 20),
    child: Row(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(_friends[index].avatar),
          radius: 30,
        ),
        Padding(
          padding: EdgeInsets.only(left: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                _friends[index].name,
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                )
              ),
              Text(
                _friends[index].email,
                style: TextStyle(
                  fontSize: 12,
                )
              ),
            ],
          ),
        )
      ],
    ),
  );

Widget组件分类 - 功能、复杂组件（类似组件库）

Color/NavBar/Theme
ListView/PageView
Dialog
Material

Dart语言介绍

变量
常量
基本类型
列表 list map
函数
异步

变量 - var

用于定义变量，通过这种方式定义变量不需要指定变量类型。这类变量的类型由它的初始值决定

var name = 'Bob';
// name 变量的类型被推断为 String

常量 - final、const

使用关键字 final 或者 const 修饰变量，即表示该变量不想被更改

一个 final 变量只可以被赋值一次；一个 const 变量是一个编译时常量 (const 变量同时也是 final 的)。

final name = 'Bob';
final String nickname = 'Bobby';
name = 'Alice'; // Error: a final variable can only be set once.

类型 - Numbers

数值类型，包括int、double

dart中双等号即可进行判断，如 a == b，无需三等号

int age = 24;
double percent = 0.8;

类型 - Strings

字符串类型，String，可以使用单引号或者双引号来创建字符串；

在字符串中，请以 ${表达式} 的形式使用表达式，如果表达式是一个标识符，可以省略掉 {}

String str = 'hello';
print('${str}, world');
print('$str, world');

类型 - Booleans

布尔类型，bool

不可以像js的那样，直接对String/Number进行判断，必须使用bool进行判断

var a = 0;
if (!a) {
    // 错误，需改为 a == 0
}
var b = '';
if (b) {
    // 错误，需改为 b.isEmpty
}

类型 - Lists

数组 (Array)，Dart中由List表示

var list = [1, 2, 3];
var list2 = [0, ...list];

类型 - Maps

类型 - 函数

可以使用简写方式，箭头函数 =>

bool isNoble(int atomicNumber) {
  return _nobleGases[atomicNumber] != null;
}
// 简写，箭头函数
bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;

H5前端学习flutter系列2 - Widget对比H5组件、dart对比js