1
class ColorItem extends StatefulWidget {
2
  final String title;
3
  // 移到 Widget 中
4
  final color = Color.fromRGBO(
5
      Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
6

7
  ColorItem(this.title, {Key? key}) : super(key: key);
8

9
  @override
10
  _ColorItemState createState() => _ColorItemState();
11
}
12

13
class _ColorItemState extends State<ColorItem> {
14
  @override
15
  Widget build(BuildContext context) {
16
    return Container(
17
      width: 100,
18
      height: 100,
19
      child: Text(widget.title),
20
      color: widget.color,
21
    );
22
  }
23
}

1
/// Whether the `newWidget` can be used to update an [Element] that currently
2
/// has the `oldWidget` as its configuration.
3
///
4
/// An element that uses a given widget as its configuration can be updated to
5
/// use another widget as its configuration if, and only if, the two widgets
6
/// have [runtimeType] and [key] properties that are [operator==].
7
///
8
/// If the widgets have no key (their key is null), then they are considered a
9
/// match if they have the same type, even if their children are completely
10
/// different.
11
static bool canUpdate(Widget oldWidget, Widget newWidget) {
12
    return oldWidget.runtimeType == newWidget.runtimeType
13
        && oldWidget.key == newWidget.key;
14
}

1
...
2

3
class _HomePageState extends State<HomePage> {
4
  //key的作用就非常大了！！
5
  List<Widget> items = [
6
    ColorItem(
7
      '第1个',
8
      key: ValueKey(1),
9
    ),
10
    ColorItem(
11
      '第2个',
12
      key: ValueKey(2),
13
    ),
14
    ColorItem(
15
      '第3个',
16
      key: ValueKey(3),
17
    ),
18
  ];
19

20
  @override
21
  Widget build(BuildContext context) {
22
    ...
23
  }
24
}
25

26
class ColorItem extends StatefulWidget {
27
  final String title;
28
  ...
29
}
30

31
class _ColorItemState extends State<ColorItem> {
32
  final color = Color.fromRGBO(
33
      Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
34
  ...
35
}

1
import 'dart:math';
2

3
import 'package:flutter/material.dart';
4

5
void main() {
6
  runApp(const MyApp());
7
}
8

9
class MyApp extends StatelessWidget {
10
  const MyApp({Key? key}) : super(key: key);
11

12
  @override
13
  Widget build(BuildContext context) {
14
    return MaterialApp(
15
      title: 'Flutter Demo',
16
      theme: ThemeData(
17
        primarySwatch: Colors.blue,
18
      ),
19
      home: GlobalKeyDemo(),
20
    );
21
  }
22
}
23

24
class GlobalKeyDemo extends StatelessWidget {
25

26
  final GlobalKey<_GKeyItemState> _gKey = GlobalKey();
27

28
  GlobalKeyDemo({Key? key}) : super(key: key);
29

30
  @override
31
  Widget build(BuildContext context) {
32
    return Scaffold(
33
      appBar: AppBar(
34
        title: const Text('Key的作用'),
35
      ),
36
      body: Center(
37
        child: GKeyItem(key: _gKey,),
38
      ),
39
      floatingActionButton: FloatingActionButton(
40
        child: const Icon(Icons.add),
41
        onPressed: () {
42
          _gKey.currentState?.setState(() {
43
            _gKey.currentState?.count += 1;
44
          });
45
        },
46
      ),
47
    );
48
  }
49
}
50

51

52
class GKeyItem extends StatefulWidget {
53
  const GKeyItem({Key? key}) : super(key: key);
54

55
  @override
56
  _GKeyItemState createState() => _GKeyItemState();
57
}
58

59
class _GKeyItemState extends State<GKeyItem> {
60
  int count = 0;
61

62
  @override
63
  Widget build(BuildContext context) {
64
    return Center(
65
      child: Text('$count'),
66
    );
67
  }
68
}