Flutter 使用GlobalKey实现局部刷新，优化性能

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

import 'package:flutter/material.dart';

class AnimationCloseButton extends StatefulWidget {
  final VoidCallback? onTap;
  final bool initShow;

  const AnimationCloseButton({Key? key, this.onTap, this.initShow = true})
      : super(key: key);

  @override
  State<AnimationCloseButton> createState() => AnimationCloseButtonState();
}

class AnimationCloseButtonState extends State<AnimationCloseButton> {
  // 是否显示本widiget
  bool showWidget = true;
  // 是否需要自动隐藏，判断是否点击过
  bool needAutoHide = true;

  @override
  void initState() {
    super.initState();
    showWidget = widget.initShow;
    Future.delayed(const Duration(seconds: 3), () {
      if (mounted && needAutoHide && showWidget) {
        setState(() {
          showWidget = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
        opacity: showWidget ? 1.0 : 0.0,
        duration: const Duration(milliseconds: 250),
        child: GestureDetector(
          onTap: () => widget.onTap?.call(),
          child: Container(
            width: 50,
            height: 50,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(3),
            decoration: BoxDecoration(
              color: Colors.black54,
              borderRadius: const BorderRadius.all(Radius.circular(28)),
              border: Border.all(width: 0, style: BorderStyle.none),
            ),
            child: const Icon(Icons.close, color: Colors.white),
          ),
        ));
  }

  void changingDisplayState() {
    if (needAutoHide) {
      needAutoHide = false;
    }
    if (mounted) {
      setState(() {
        showWidget = !showWidget;
      });
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import 'package:flutter/material.dart';

import 'global_key_close_widget.dart';

class GlobalKeyDemo extends StatefulWidget {
  const GlobalKeyDemo({Key? key}) : super(key: key);

  @override
  State<GlobalKeyDemo> createState() => _GlobalKeyDemoState();
}

class _GlobalKeyDemoState extends State<GlobalKeyDemo> {
  // GlobalKey 用于控制 关闭按钮的显示或者隐藏
  GlobalKey<AnimationCloseButtonState>? closeButtonController;

  @override
  void initState() {
    super.initState();
    // 注意GlobalKey不能再build方法中初始化
    closeButtonController = GlobalKey<AnimationCloseButtonState>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Center(
        child: Column(
          children: [
            AnimationCloseButton(
              key: closeButtonController,
              onTap: () => print('AnimationCloseButton is Clicked！'),
            ),
            const SizedBox(
              height: 20,
            ),
            GestureDetector(
              onTap: () =>
                  closeButtonController?.currentState!.changingDisplayState(),
              child: Container(
                width: 200,
                height: 100,
                alignment: Alignment.center,
                color: Colors.grey,
                child: const Text(
                  '点击显示或隐藏关闭按钮',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      )),
    );
  }
}