参考链接#

一个基本运行代码#

flutter是以widget作为基本显示单位的，所有的widget都是继承于StatelessWidget和StatefulWidget

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  //main是dart的运行入口，但是runApp方法是flutter的运行入口，一个APP启动点
5
  runApp(
6
    //runApp接受一个Widget的参数
7
    const Center(
8
      child: Text(
9
        'Hello, world!',
10
        textDirection: TextDirection.ltr,
11
        style: TextStyle(color: Colors.blue),
12
      ),
13
    ),
14
  );
15
}

material design#

需要先在pubspec.yaml文件中加入

1
flutter:
2
  uses-material-design: true

就可以导入material.dart包了，但是runApp必须是MaterialApp这个Widget作为起点入口

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(const MaterialApp(title: 'Flutter Tutorial', home: TutorialHome()));
5
}
6

7
class TutorialHome extends StatelessWidget {
8
  const TutorialHome({super.key});
9

10
  @override
11
  Widget build(BuildContext context) {
12
    // Scaffold is a layout for
13
    // the major Material Components.
14
    return Scaffold(
15
      appBar: AppBar(
16
        leading: const IconButton(
17
          icon: Icon(Icons.menu),
18
          tooltip: 'Navigation menu',
19
          onPressed: null,
20
        ),
21
        title: const Text('Example title'),
22
        actions: const [
23
          IconButton(
24
            icon: Icon(Icons.search),
25
            tooltip: 'Search',
26
            onPressed: null,
27
          ),
28
        ],
29
      ),
30
      // body is the majority of the screen.
31
      body: const Center(child: Text('Hello, world!')),
32
      floatingActionButton: const FloatingActionButton(
33
        tooltip: 'Add', // used by assistive technologies
34
        onPressed: null,
35
        child: Icon(Icons.add),
36
      ),
37
    );
38
  }
39
}

手势操作#

手势操作用的是GestureDetector，它虽然没有实际的界面，但是可以却可以发现用户的操作手势。当用户轻点Container时，GestureDetector会会调用onTap回调方法。利用GestureDetector可以监听用户的点击、输入、拖拽和缩放。

1
import 'package:flutter/material.dart';
2

3
class MyButton extends StatelessWidget {
4
  const MyButton({super.key});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return GestureDetector(
9
      onTap: () {
10
        print('MyButton was tapped!');
11
      },
12
      child: Container(
13
        height: 50,
14
        padding: const EdgeInsets.all(8),
15
        margin: const EdgeInsets.symmetric(horizontal: 8),
16
        decoration: BoxDecoration(
17
          borderRadius: BorderRadius.circular(5),
18
          color: Colors.lightGreen[500],
19
        ),
20
        child: const Center(child: Text('Engage')),
21
      ),
22
    );
23
  }
24
}
25

26
void main() {
27
  runApp(
28
    const MaterialApp(
29
      home: Scaffold(body: Center(child: MyButton())),
30
    ),
31
  );
32
}

React也有相关的状态，和这个也有些类似，不过React是直接让变量绑定setState方法，一旦变量发生变化，UI也渲染也会重构。不过flutter的似乎简化了UI生命周期

Widget需要在构造函数中用const修饰，用来防止父级UI rebuild时，复用而造成的内存开销，除非是动态资源。通常来说如果是静态widget，那原则上必须使用const修饰，像const SizedBox(width: 16)

Counter.createState()重写了父类方法，并接收一个State返回类型，方法会被多次调用，

_CounterState继承了State类，可以在build里面调用父类setState并传入一个回调函数，回调函数可以用来更新自己设定的动态变量，setState最后会调用_element!.markNeedsBuild();来重构UI。

1
import 'package:flutter/material.dart';
2

3

4
void main() {
5
  runApp(
6
    const MaterialApp(
7
      home: Scaffold(body: Center(child: Counter())),
8
    ),
9
  );
10
}
11

12

13
class Counter extends StatefulWidget {
14
  // This class is the configuration for the state.
15
  // It holds the values (in this case nothing) provided
16
  // by the parent and used by the build  method of the
17
  // State. Fields in a Widget subclass are always marked
18
  // "final".
19

20
  const Counter({super.key});
21

22
  @override
23
  State<Counter> createState() => _CounterState();
24
}
25

26
class _CounterState extends State<Counter> {
27
  int _counter = 0;
28

29
  @override
30
  Widget build(BuildContext context) {
31
    // This method is rerun every time setState is called,
32
    // for instance, as done by the _increment method above.
33
    // The Flutter framework has been optimized to make
34
    // rerunning build methods fast, so that you can just
35
    // rebuild anything that needs updating rather than
36
    // having to individually changes instances of widgets.
37
    return Row(
38
      mainAxisAlignment: MainAxisAlignment.center,
39
      children: <Widget>[
40
        ElevatedButton(
41
            onPressed: () => {
42
                  setState(() {
43
                    // This call to setState tells the Flutter framework
44
                    // that something has changed in this State, which
45
                    // causes it to rerun the build method below so that
46
                    // the display can reflect the updated values. If you
47
                    // change _counter without calling setState(), then
48
                    // the build method won't be called again, and so
49
                    // nothing would appear to happen.
50
                    _counter++;
51
                  })
52
                },
53
            child: const Text('Increment')),
54
        const SizedBox(width: 16),
55
        Text('Count: $_counter'),
56
      ],
57
    );
58
  }
59
}

另外一个可以将ElevatedButton的内容，再作一层封装。这个例子，我倒是看懂一些，只要保证每次widget的实例构建后不作任何更改就可以使用StatelessWidget构造，否则必须使用StatefulWidget，你也能灵活使用StatelessWidget来构建动态UI。应该怎么理解这句话呢，虽然CounterDisplay这个widget中的count变量是动态的，但是实际上count是外部传入的，内部UIrebuild每次都构建一个新widget实例，每个widget实例都const。

至于每次动态刷新，flutter如何减少内存的消耗，得再看看原理。

1
import 'package:flutter/material.dart';
2

3
class CounterDisplay extends StatelessWidget {
4
  const CounterDisplay({required this.count, super.key});
5

6
  final int count;
7

8
  @override
9
  Widget build(BuildContext context) {
10
    return Text('Count: $count');
11
  }
12
}
13

14
class CounterIncrementor extends StatelessWidget {
15
  const CounterIncrementor({required this.onPressed, super.key});
16

17
  final VoidCallback onPressed;
18

19
  @override
20
  Widget build(BuildContext context) {
21
    return ElevatedButton(onPressed: onPressed, child: const Text('Increment'));
22
  }
23
}
24

25
class Counter extends StatefulWidget {
26
  const Counter({super.key});
27

28
  @override
29
  State<Counter> createState() => _CounterState();
30
}
31

32
class _CounterState extends State<Counter> {
33
  int _counter = 0;
34

35
  void _increment() {
36
    setState(() {
37
      ++_counter;
38
    });
39
  }
40

41
  @override
42
  Widget build(BuildContext context) {
43
    return Row(
44
      mainAxisAlignment: MainAxisAlignment.center,
45
      children: <Widget>[
46
        CounterIncrementor(onPressed: _increment),
47
        const SizedBox(width: 16),
48
        CounterDisplay(count: _counter),
49
      ],
50
    );
51
  }
52
}
53

54
void main() {
55
  runApp(
56
    const MaterialApp(
57
      home: Scaffold(body: Center(child: Counter())),
58
    ),
59
  );
60
}

示例用于参考#

1
import 'package:flutter/material.dart';
2

3
class Product {
4
  const Product({required this.name});
5

6
  final String name;
7
}
8

9
typedef CartChangedCallback = void Function(Product product, bool inCart);
10

11
class ShoppingListItem extends StatelessWidget {
12
  ShoppingListItem({
13
    required this.product,
14
    required this.inCart,
15
    required this.onCartChanged,
16
  }) : super(key: ObjectKey(product));
17

18
  final Product product;
19
  final bool inCart;
20
  final CartChangedCallback onCartChanged;
21

22
  Color _getColor(BuildContext context) {
23
    // The theme depends on the BuildContext because different
24
    // parts of the tree can have different themes.
25
    // The BuildContext indicates where the build is
26
    // taking place and therefore which theme to use.
27

28
    return inCart //
29
        ? Colors.black54
30
        : Theme.of(context).primaryColor;
31
  }
32

33
  TextStyle? _getTextStyle(BuildContext context) {
34
    if (!inCart) return null;
35

36
    return const TextStyle(
37
      color: Colors.black54,
38
      decoration: TextDecoration.lineThrough,
39
    );
40
  }
41

42
  @override
43
  Widget build(BuildContext context) {
44
    return ListTile(
45
      onTap: () {
46
        onCartChanged(product, inCart);
47
      },
48
      leading: CircleAvatar(
49
        backgroundColor: _getColor(context),
50
        child: Text(product.name[0]),
51
      ),
52
      title: Text(product.name, style: _getTextStyle(context)),
53
    );
54
  }
55
}
56

57
class ShoppingList extends StatefulWidget {
58
  const ShoppingList({required this.products, super.key});
59

60
  final List<Product> products;
61

62
  // The framework calls createState the first time
63
  // a widget appears at a given location in the tree.
64
  // If the parent rebuilds and uses the same type of
65
  // widget (with the same key), the framework re-uses
66
  // the State object instead of creating a new State object.
67

68
  @override
69
  State<ShoppingList> createState() => _ShoppingListState();
70
}
71

72
class _ShoppingListState extends State<ShoppingList> {
73
  final _shoppingCart = <Product>{};
74

75
  void _handleCartChanged(Product product, bool inCart) {
76
    setState(() {
77
      // When a user changes what's in the cart, you need
78
      // to change _shoppingCart inside a setState call to
79
      // trigger a rebuild.
80
      // The framework then calls build, below,
81
      // which updates the visual appearance of the app.
82

83
      if (!inCart) {
84
        _shoppingCart.add(product);
85
      } else {
86
        _shoppingCart.remove(product);
87
      }
88
    });
89
  }
90

91
  @override
92
  Widget build(BuildContext context) {
93
    return Scaffold(
94
      appBar: AppBar(title: const Text('Shopping List')),
95
      body: ListView(
96
        padding: const EdgeInsets.symmetric(vertical: 8),
97
        children: widget.products.map((product) {
98
          return ShoppingListItem(
99
            product: product,
100
            inCart: _shoppingCart.contains(product),
101
            onCartChanged: _handleCartChanged,
102
          );
103
        }).toList(),
104
      ),
105
    );
106
  }
107
}
108

109
void main() {
110
  runApp(
111
    const MaterialApp(
112
      title: 'Shopping App',
113
      home: ShoppingList(
114
        products: [
115
          Product(name: 'Eggs'),
116
          Product(name: 'Flour'),
117
          Product(name: 'Chocolate chips'),
118
        ],
119
      ),
120
    ),
121
  );
122
}

响应生命周期变化的事件#

通常来说应用要有针对应用启动、运行、销毁（退出）这些事件监听和处理，比如重写State.initState，每次widget的状态初始化都会调用这个方法，重写后可以用于初始化自己自定义的变量。widget销毁，可以重写dispose，可以用于为服务取消时间计数器，但是重写后记得在方法末尾加上super.dispose，因为父类也有针对widget销毁的基础实现。

keys#

每个Widget的一个key的变量，用于区分每个widget实例的区别，就像屏幕中list 列表，列表中item在滚动消失在屏幕中时，其实经历了widget实例上一个和下一个实例的比较

Global Keys#

就像widget tree中Row下包含了Text和button两个实例，Text和button各有自己key，那Row的key相对Text和button就是他们的Global key，可以用于区分他们在同一个widget包围下，也可以用于关于一个child widget和另外一个child widget。