Flutter局部刷新解决闪烁问题

最新推荐文章于 2025-02-11 14:45:10 发布
最新推荐文章于 2025-02-11 14:45:10 发布
阅读量3.6k 收藏 3
点赞数
分类专栏： # Flutter 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxingyuzaixian/article/details/128887270
版权

在开发Flutter倒计时，setState刷新会造成页面的闪烁，如图

image-20220127202810611

一、setState全局刷新

1、setState页面问题分析

在flutter中常用的刷新方法有setState，然后这个会造成整个页面刷新，特别是绘制需要时间的组件会闪烁.

2、setState页面源码

login_demo_page.dart

import 'dart:async';
import 'dart:collection';
import 'dart:convert';

import 'package:flutter/material.dart';

class LoginDemoPage extends StatefulWidget {
  LoginDemoPage({Key key});

  @override
  State<StatefulWidget> createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginDemoPage> {
  int _seconds = 0;
  bool _loadingImageUrl = true;
  String _imageUrl =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAaCAIAAABw/jbvAAABjElEQVR42s2Y7Q6DIAxF2dxm9v4P7JaYYNeP2wJFZ/ihFS2HlrZQtoGrlDL7W7VbFcq3VLLfl23sGoR0P7c6xCGvJIxwuq8sIx9TUKXv17029Y9Wh3FIwBmBx3buJHw8V9lUfUt57Q0M5basoLkehGdBJ5SQLp4FaRHS+27CiAf1E9K3AJISAkgmiRO6kArh9wMGWR8rofwRI6yKmwirsOJFFnkzIUVSCdWFKgl33YDQGhw1YHfaRLE0eM9+pxJKG7IYiAlTMplOSB2VIlmEch0GCdXpP5WQIamEFE+aRRIyNta/1T/9NGsRqjxMoqYK5n4uoZU50moJa/SuxMJjnE2E0j8TqkI1W1hhykr6QIFKKMMMSxKJVSHyUosQ1DQg0sjGtIAsP7SD6ahrZxDiGHM2YUoAwHuCRKWlo3LPIuze2qcR5mrqhnRL2WQvdXfW6T6cFkubIC804ywv5cc7/034M9rgaU9k1zPjOMs9p3APfkpcx+CKDx4r5TpqdNDHfHhbu+DUgmvQjLLbBy9uOkzsE/1jAAAAAElFTkSuQmCC';
  final phoneFormKey = GlobalKey<FormState>();
  final imageFormKey = GlobalKey<FormState>();
  final codeFormKey = GlobalKey<FormState>();

  final Map<String, String> formValue = new HashMap();

  Timer _timer;

  Color LabelBlackColor = Color(0xFF1A1A1A);

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      _timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录示例demo'),
      ),
      body: buildBody(),
    );
  }

  sendCode() async {
    _seconds = 60;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_seconds == 0) {
        timer.cancel(); // 取消重复计时
        return;
      }
      _seconds--;
      if (mounted) {
        setState(() {});
      }
    });
  }

  Widget buildBody() {
    return Container(
      padding: EdgeInsets.only(right: 20, top: 20),
      child: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Text(
              '快捷登录注册',
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 26),
            ),
          ),
          SizedBox(height: 30),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: phoneFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '+86',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                    ),
                    hintText: '请输入手机账号',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                  ),
                  onSaved: (mobile) {
                    if (mobile == null || mobile.isEmpty == true) {
                      return;
                    }
                    formValue['mobile'] = mobile;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: codeFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入图形验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (_loadingImageUrl) {
                          return;
                        } else {
                          _loadingImageUrl = true;
                          if (mounted) {
                            setState(() {});
                          }
                        }
                      },
                      child: Container(
                        width: 100,
                        height: 30,
                        child: Image.memory(
                          base64Decode(_imageUrl
                              .split(',')[1]
                              .replaceAll('\r', '')
                              .replaceAll('\n', '')),
                          width: 100,
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['imageCode'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: imageFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入短信验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (_seconds == 0) {
                          phoneFormKey.currentState.save();
                          codeFormKey.currentState.save();
                          sendCode();
                        }
                      },
                      child: Center(
                        widthFactor: 1,
                        child: Text(
                          _seconds == 0 ? '获取验证码' : '$_seconds秒',
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['code'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: GestureDetector(
              onTap: () {
                phoneFormKey.currentState.save();
                imageFormKey.currentState.save();
              },
              behavior: HitTestBehavior.opaque,
              child: Container(
                height: 48,
                color: LabelBlackColor,
                alignment: Alignment.center,
                child: Text(
                  '登录/注册',
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

二、局部刷新

此时我们需要仅仅刷新倒计时组件即可，也就是使用局部刷新来解决问题

1、抽离成组件state（刷新部分抽离）

与React类似，咱们把想刷新的部分抽离成组件，因为React、Flutter的state都是针对整个class的。

1.1、页面调用子组件方法

这里需要用到父组件调用子组件的发送验证码方法，

首先在子组件中定义key

GlobalKey<_CutdownTimeWidgetState> childKey = GlobalKey();

同时子组件的key要通过super传递给父类，这个不能漏

CutdownTimeWidget({
  Key key,
}) : super(key: key);

然后父组件把定义的key导包进来作为入参即可

CutdownTimeWidget(key: childKey)

最后可以方便的调用子组件方法

if (childKey.currentState?.seconds == 0) {
  childKey.currentState?.sendCode();
}
1.2、组件源码

把刷新相关的功能集成到子组件cutdown_time_widge.dart

import 'dart:async';

import 'package:flutter/material.dart';

GlobalKey<_CutdownTimeWidgetState> childKey = GlobalKey();

class CutdownTimeWidget extends StatefulWidget {
  CutdownTimeWidget({
    Key key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _CutdownTimeWidgetState();
  }
}

class _CutdownTimeWidgetState extends State<CutdownTimeWidget> {
  int seconds = 0;
  Timer _timer;

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      _timer.cancel();
    }
  }

  sendCode() async {
    seconds = 60;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (seconds == 0) {
        timer.cancel(); // 取消重复计时
        return;
      }
      seconds--;
      if (mounted) {
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      seconds == 0 ? '获取验证码' : '$seconds秒',
      style: TextStyle(fontSize: 16),
    );
  }
}
1.3、页面源码

页面login_demo_page.dart直接调用组件的方法，即实现了局部刷新解决闪烁问题。

import 'dart:collection';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:scroll_tabbar_sample/widgets/cutdown_time_widge.dart';

class LoginDemoPage extends StatefulWidget {
  LoginDemoPage({Key key});

  @override
  State<StatefulWidget> createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginDemoPage> {
  bool _loadingImageUrl = true;
  String _imageUrl =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAaCAIAAABw/jbvAAABjElEQVR42s2Y7Q6DIAxF2dxm9v4P7JaYYNeP2wJFZ/ihFS2HlrZQtoGrlDL7W7VbFcq3VLLfl23sGoR0P7c6xCGvJIxwuq8sIx9TUKXv17029Y9Wh3FIwBmBx3buJHw8V9lUfUt57Q0M5basoLkehGdBJ5SQLp4FaRHS+27CiAf1E9K3AJISAkgmiRO6kArh9wMGWR8rofwRI6yKmwirsOJFFnkzIUVSCdWFKgl33YDQGhw1YHfaRLE0eM9+pxJKG7IYiAlTMplOSB2VIlmEch0GCdXpP5WQIamEFE+aRRIyNta/1T/9NGsRqjxMoqYK5n4uoZU50moJa/SuxMJjnE2E0j8TqkI1W1hhykr6QIFKKMMMSxKJVSHyUosQ1DQg0sjGtIAsP7SD6ahrZxDiGHM2YUoAwHuCRKWlo3LPIuze2qcR5mrqhnRL2WQvdXfW6T6cFkubIC804ywv5cc7/034M9rgaU9k1zPjOMs9p3APfkpcx+CKDx4r5TpqdNDHfHhbu+DUgmvQjLLbBy9uOkzsE/1jAAAAAElFTkSuQmCC';
  final phoneFormKey = GlobalKey<FormState>();
  final imageFormKey = GlobalKey<FormState>();
  final codeFormKey = GlobalKey<FormState>();

  final Map<String, String> formValue = new HashMap();

  Color LabelBlackColor = Color(0xFF1A1A1A);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录示例demo'),
      ),
      body: buildBody(),
    );
  }

  Widget buildBody() {
    return Container(
      padding: EdgeInsets.only(right: 20, top: 20),
      child: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Text(
              '快捷登录注册',
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 26),
            ),
          ),
          SizedBox(height: 30),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: phoneFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '+86',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                    ),
                    hintText: '请输入手机账号',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                  ),
                  onSaved: (mobile) {
                    if (mobile == null || mobile.isEmpty == true) {
                      return;
                    }
                    formValue['mobile'] = mobile;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: codeFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入图形验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (_loadingImageUrl) {
                          return;
                        } else {
                          _loadingImageUrl = true;
                          if (mounted) {
                            setState(() {});
                          }
                        }
                      },
                      child: Container(
                        width: 100,
                        height: 30,
                        child: Image.memory(
                          base64Decode(_imageUrl
                              .split(',')[1]
                              .replaceAll('\r', '')
                              .replaceAll('\n', '')),
                          width: 100,
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['imageCode'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: imageFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入短信验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (childKey.currentState?.seconds == 0) {
                          phoneFormKey.currentState.save();
                          codeFormKey.currentState.save();
                          childKey.currentState?.sendCode();
                        }
                      },
                      child: Center(
                        widthFactor: 1,
                        child: CutdownTimeWidget(key: childKey),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['code'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: GestureDetector(
              onTap: () {
                phoneFormKey.currentState.save();
                imageFormKey.currentState.save();
              },
              behavior: HitTestBehavior.opaque,
              child: Container(
                height: 48,
                color: LabelBlackColor,
                alignment: Alignment.center,
                child: Text(
                  '登录/注册',
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2、使用ValueNotifier（通知方式）

通过抽离组件确实能实现局部刷新，但是书写臃肿。

ValueNotifier的方式为通知的方式

2.1、ValueNotifier使用

首先使用ValueNotifier对象替换之前定义的int _seconds = 0;

ValueNotifier secondNotifier = ValueNotifier<int>(0);

对于需要操作_seconds变量的改为操作secondNotifier.value

secondNotifier.value = 60;

最后对于绑定视图的组件使用ValueListenableBuilder包裹起来即可

ValueListenableBuilder(
  valueListenable: secondNotifier,
  builder:
      (BuildContext context, value, Widget child) {
    return Text(
      value == 0 ? '获取验证码' : '$value秒',
      style: TextStyle(fontSize: 16),
    );
  },
)
2.2、页面源码
import 'dart:async';
import 'dart:collection';
import 'dart:convert';

import 'package:flutter/material.dart';

class LoginDemoPage extends StatefulWidget {
  LoginDemoPage({Key key});

  @override
  State<StatefulWidget> createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginDemoPage> {
  ValueNotifier secondNotifier = ValueNotifier<int>(0);
  bool _loadingImageUrl = true;
  String _imageUrl =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAaCAIAAABw/jbvAAABjElEQVR42s2Y7Q6DIAxF2dxm9v4P7JaYYNeP2wJFZ/ihFS2HlrZQtoGrlDL7W7VbFcq3VLLfl23sGoR0P7c6xCGvJIxwuq8sIx9TUKXv17029Y9Wh3FIwBmBx3buJHw8V9lUfUt57Q0M5basoLkehGdBJ5SQLp4FaRHS+27CiAf1E9K3AJISAkgmiRO6kArh9wMGWR8rofwRI6yKmwirsOJFFnkzIUVSCdWFKgl33YDQGhw1YHfaRLE0eM9+pxJKG7IYiAlTMplOSB2VIlmEch0GCdXpP5WQIamEFE+aRRIyNta/1T/9NGsRqjxMoqYK5n4uoZU50moJa/SuxMJjnE2E0j8TqkI1W1hhykr6QIFKKMMMSxKJVSHyUosQ1DQg0sjGtIAsP7SD6ahrZxDiGHM2YUoAwHuCRKWlo3LPIuze2qcR5mrqhnRL2WQvdXfW6T6cFkubIC804ywv5cc7/034M9rgaU9k1zPjOMs9p3APfkpcx+CKDx4r5TpqdNDHfHhbu+DUgmvQjLLbBy9uOkzsE/1jAAAAAElFTkSuQmCC';
  final phoneFormKey = GlobalKey<FormState>();
  final imageFormKey = GlobalKey<FormState>();
  final codeFormKey = GlobalKey<FormState>();

  final Map<String, String> formValue = new HashMap();

  Timer _timer;

  Color LabelBlackColor = Color(0xFF1A1A1A);

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      _timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录示例demo'),
      ),
      body: buildBody(),
    );
  }

  sendCode() async {
    secondNotifier.value = 60;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (secondNotifier.value == 0) {
        timer.cancel(); // 取消重复计时
        return;
      }
      secondNotifier.value--;
    });
  }

  Widget buildBody() {
    return Container(
      padding: EdgeInsets.only(right: 20, top: 20),
      child: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Text(
              '快捷登录注册',
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 26),
            ),
          ),
          SizedBox(height: 30),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: phoneFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '+86',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                    ),
                    hintText: '请输入手机账号',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                  ),
                  onSaved: (mobile) {
                    if (mobile == null || mobile.isEmpty == true) {
                      return;
                    }
                    formValue['mobile'] = mobile;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: codeFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入图形验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (_loadingImageUrl) {
                          return;
                        } else {
                          _loadingImageUrl = true;
                        }
                      },
                      child: Container(
                        width: 100,
                        height: 30,
                        child: Image.memory(
                          base64Decode(_imageUrl
                              .split(',')[1]
                              .replaceAll('\r', '')
                              .replaceAll('\n', '')),
                          width: 100,
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['imageCode'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: imageFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入短信验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (secondNotifier.value == 0) {
                          phoneFormKey.currentState.save();
                          codeFormKey.currentState.save();
                          sendCode();
                        }
                      },
                      child: Center(
                        widthFactor: 1,
                        child: ValueListenableBuilder(
                          valueListenable: secondNotifier,
                          builder:
                              (BuildContext context, value, Widget child) {
                            return Text(
                              value == 0 ? '获取验证码' : '$value秒',
                              style: TextStyle(fontSize: 16),
                            );
                          },
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['code'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: GestureDetector(
              onTap: () {
                phoneFormKey.currentState.save();
                imageFormKey.currentState.save();
              },
              behavior: HitTestBehavior.opaque,
              child: Container(
                height: 48,
                color: LabelBlackColor,
                alignment: Alignment.center,
                child: Text(
                  '登录/注册',
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3、使用Stream的（通知方式）

3.1、StreamController使用

声明StreamController对象

StreamController<String> secondStreamController= StreamController<String>();

对于需要操作_seconds变量不变，操作完成之后需要刷新视图的用secondStreamController.add即可，注意接受参数需要用toString()字符串化。

secondStreamController.add(_seconds.toString());

最后对于绑定视图的组件使用StreamBuilder包裹起来即可

StreamBuilder(
  stream: secondStreamController.stream,
  initialData: _seconds,
  builder: (context, AsyncSnapshot snapshot) {
    return Text(
      snapshot.data == 0 ? '获取验证码' : '${snapshot.data}秒',
      style: TextStyle(fontSize: 16),
    );
  },
)
3.2、页面源码

login_demo_page.dart

import 'dart:async';
import 'dart:collection';
import 'dart:convert';

import 'package:flutter/material.dart';

class LoginDemoPage extends StatefulWidget {
  LoginDemoPage({Key key});

  @override
  State<StatefulWidget> createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginDemoPage> {
  int _seconds = 0;
  StreamController<String> secondStreamController= StreamController<String>();
  bool _loadingImageUrl = true;
  String _imageUrl =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAaCAIAAABw/jbvAAABjElEQVR42s2Y7Q6DIAxF2dxm9v4P7JaYYNeP2wJFZ/ihFS2HlrZQtoGrlDL7W7VbFcq3VLLfl23sGoR0P7c6xCGvJIxwuq8sIx9TUKXv17029Y9Wh3FIwBmBx3buJHw8V9lUfUt57Q0M5basoLkehGdBJ5SQLp4FaRHS+27CiAf1E9K3AJISAkgmiRO6kArh9wMGWR8rofwRI6yKmwirsOJFFnkzIUVSCdWFKgl33YDQGhw1YHfaRLE0eM9+pxJKG7IYiAlTMplOSB2VIlmEch0GCdXpP5WQIamEFE+aRRIyNta/1T/9NGsRqjxMoqYK5n4uoZU50moJa/SuxMJjnE2E0j8TqkI1W1hhykr6QIFKKMMMSxKJVSHyUosQ1DQg0sjGtIAsP7SD6ahrZxDiGHM2YUoAwHuCRKWlo3LPIuze2qcR5mrqhnRL2WQvdXfW6T6cFkubIC804ywv5cc7/034M9rgaU9k1zPjOMs9p3APfkpcx+CKDx4r5TpqdNDHfHhbu+DUgmvQjLLbBy9uOkzsE/1jAAAAAElFTkSuQmCC';
  final phoneFormKey = GlobalKey<FormState>();
  final imageFormKey = GlobalKey<FormState>();
  final codeFormKey = GlobalKey<FormState>();

  final Map<String, String> formValue = new HashMap();

  Timer _timer;

  Color LabelBlackColor = Color(0xFF1A1A1A);

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      _timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录示例demo'),
      ),
      body: buildBody(),
    );
  }

  sendCode() async {
    _seconds = 60;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_seconds == 0) {
        timer.cancel(); // 取消重复计时
        return;
      }
      _seconds--;
      secondStreamController.add(_seconds.toString());
    });
  }

  Widget buildBody() {
    return Container(
      padding: EdgeInsets.only(right: 20, top: 20),
      child: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Text(
              '快捷登录注册',
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 26),
            ),
          ),
          SizedBox(height: 30),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: phoneFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '+86',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                    ),
                    hintText: '请输入手机账号',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                  ),
                  onSaved: (mobile) {
                    if (mobile == null || mobile.isEmpty == true) {
                      return;
                    }
                    formValue['mobile'] = mobile;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: codeFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入图形验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (_loadingImageUrl) {
                          return;
                        } else {
                          _loadingImageUrl = true;
                        }
                      },
                      child: Container(
                        width: 100,
                        height: 30,
                        child: Image.memory(
                          base64Decode(_imageUrl
                              .split(',')[1]
                              .replaceAll('\r', '')
                              .replaceAll('\n', '')),
                          width: 100,
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['imageCode'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: imageFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入短信验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (_seconds == 0) {
                          phoneFormKey.currentState.save();
                          codeFormKey.currentState.save();
                          sendCode();
                        }
                      },
                      child: Center(
                        widthFactor: 1,
                        child: StreamBuilder(
                          stream: secondStreamController.stream,
                          initialData: _seconds,
                          builder: (context, AsyncSnapshot snapshot) {
                            return Text(
                              snapshot.data == 0 ? '获取验证码' : '${snapshot.data}秒',
                              style: TextStyle(fontSize: 16),
                            );
                          },
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['code'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: GestureDetector(
              onTap: () {
                phoneFormKey.currentState.save();
                imageFormKey.currentState.save();
              },
              behavior: HitTestBehavior.opaque,
              child: Container(
                height: 48,
                color: LabelBlackColor,
                alignment: Alignment.center,
                child: Text(
                  '登录/注册',
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4、使用InHeritedWidget（数据共享方式）

InheritedWidget 组件是功能型组件，提供了沿树向下，共享数据的功能，即子组件可以获取父组件(InheritedWidget 的子类)的数据

InHeritedWidget的使用固定，可用于共享state

4.1、InHeritedWidget使用

首先我们需要创建我们的共享数据类TimerInheritedWidget类，写法相对固定，这里seconds即是我们的变量

timer_inherited_widget.dart

class TimerInheritedWidget extends InheritedWidget {
  final int seconds;

  TimerInheritedWidget(this.seconds, Widget child) : super(child: child);

  static TimerInheritedWidget of(BuildContext context, {bool rebuild = true}) {
    if (rebuild) {
      final TimerInheritedWidget widget=context.dependOnInheritedWidgetOfExactType<TimerInheritedWidget>();
      return widget;
    }
    return context.findAncestorWidgetOfExactType<TimerInheritedWidget>();
  }

  @override
  bool updateShouldNotify(TimerInheritedWidget old) {
    return seconds != old.seconds;
  }
}

然后使用在页面中使用我们的组件，通过builder即可实现局部刷新

TimerInheritedWidget(
    _seconds,
    Builder(
      builder: (BuildContext innerContext) {
        return Container(
            child:Text(
              _seconds == 0 ? '获取验证码' : '$_seconds秒',
              style: TextStyle(fontSize: 16),
            )
        );
      },
    )
)

如果要获取共享state中的值（注意：这里是上下文必须是build的上下文，即innerContext）

TimerInheritedWidget.of(innerContext).seconds
4.2、页面源码
import 'dart:async';
import 'dart:collection';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:scroll_tabbar_sample/widgets/timer_inherited_widget.dart';

class LoginDemoPage extends StatefulWidget {
  LoginDemoPage({Key key});

  @override
  State<StatefulWidget> createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginDemoPage> {
  int _seconds = 0;
  StreamController<String> secondStreamController = StreamController<String>();
  bool _loadingImageUrl = true;
  String _imageUrl =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAaCAIAAABw/jbvAAABjElEQVR42s2Y7Q6DIAxF2dxm9v4P7JaYYNeP2wJFZ/ihFS2HlrZQtoGrlDL7W7VbFcq3VLLfl23sGoR0P7c6xCGvJIxwuq8sIx9TUKXv17029Y9Wh3FIwBmBx3buJHw8V9lUfUt57Q0M5basoLkehGdBJ5SQLp4FaRHS+27CiAf1E9K3AJISAkgmiRO6kArh9wMGWR8rofwRI6yKmwirsOJFFnkzIUVSCdWFKgl33YDQGhw1YHfaRLE0eM9+pxJKG7IYiAlTMplOSB2VIlmEch0GCdXpP5WQIamEFE+aRRIyNta/1T/9NGsRqjxMoqYK5n4uoZU50moJa/SuxMJjnE2E0j8TqkI1W1hhykr6QIFKKMMMSxKJVSHyUosQ1DQg0sjGtIAsP7SD6ahrZxDiGHM2YUoAwHuCRKWlo3LPIuze2qcR5mrqhnRL2WQvdXfW6T6cFkubIC804ywv5cc7/034M9rgaU9k1zPjOMs9p3APfkpcx+CKDx4r5TpqdNDHfHhbu+DUgmvQjLLbBy9uOkzsE/1jAAAAAElFTkSuQmCC';
  final phoneFormKey = GlobalKey<FormState>();
  final imageFormKey = GlobalKey<FormState>();
  final codeFormKey = GlobalKey<FormState>();

  final Map<String, String> formValue = new HashMap();

  Timer _timer;

  Color LabelBlackColor = Color(0xFF1A1A1A);

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      _timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录示例demo'),
      ),
      body: buildBody(),
    );
  }

  sendCode() async {
    setState(() {
      _seconds = 60;
    });
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_seconds == 0) {
        timer.cancel(); // 取消重复计时
        return;
      }
      setState(() {
        _seconds--;
      });
      secondStreamController.add(_seconds.toString());
    });
  }

  Widget buildBody() {
    return TimerInheritedWidget(
        _seconds,
        Builder(
          builder: (BuildContext innerContext) {
            return Container(
              padding: EdgeInsets.only(right: 20, top: 20),
              child: ListView(
                children: [
                  Padding(
                    padding: EdgeInsets.only(left: 20),
                    child: Text(
                      '快捷登录注册',
                      style: TextStyle(fontWeight: FontWeight.w600, fontSize: 26),
                    ),
                  ),
                  SizedBox(height: 30),
                  Padding(
                    padding: EdgeInsets.only(left: 20),
                    child: Form(
                      key: phoneFormKey,
                      child: ConstrainedBox(
                        constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                        ),
                        child: TextFormField(
                          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                          decoration: InputDecoration(
                            contentPadding:
                            const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                            fillColor: Colors.white,
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: LabelBlackColor, width: 1),
                            ),
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(
                                color: Color(0xFFF5F5F5),
                                width: 1.0,
                              ),
                            ),
                            border: UnderlineInputBorder(
                              borderSide: BorderSide(
                                color: Color(0xFFF5F5F5),
                                width: 1.0,
                              ),
                            ),
                            prefixIcon: Container(
                              width: 65,
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '+86',
                                style: TextStyle(
                                    fontSize: 20, fontWeight: FontWeight.bold),
                              ),
                            ),
                            hintText: '请输入手机账号',
                            hintStyle:
                            TextStyle(fontSize: 16, color: Color(0xFF999999)),
                          ),
                          onSaved: (mobile) {
                            if (mobile == null || mobile.isEmpty == true) {
                              return;
                            }
                            formValue['mobile'] = mobile;
                          },
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Padding(
                    padding: EdgeInsets.only(left: 20),
                    child: Form(
                      key: codeFormKey,
                      child: ConstrainedBox(
                        constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                        ),
                        child: TextFormField(
                          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                          decoration: InputDecoration(
                            contentPadding:
                            const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                            fillColor: Colors.white,
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: LabelBlackColor, width: 1),
                            ),
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(
                                color: Color(0xFFF5F5F5),
                                width: 1.0,
                              ),
                            ),
                            border: UnderlineInputBorder(
                              borderSide: BorderSide(
                                color: Color(0xFFF5F5F5),
                                width: 1.0,
                              ),
                            ),
                            prefixIcon: Container(
                              width: 65,
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '验证码',
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.w500),
                              ),
                            ),
                            hintText: '请输入图形验证码',
                            hintStyle:
                            TextStyle(fontSize: 16, color: Color(0xFF999999)),
                            suffixIcon: GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () {
                                if (_loadingImageUrl) {
                                  return;
                                } else {
                                  _loadingImageUrl = true;
                                }
                              },
                              child: Container(
                                width: 100,
                                height: 30,
                                child: Image.memory(
                                  base64Decode(_imageUrl
                                      .split(',')[1]
                                      .replaceAll('\r', '')
                                      .replaceAll('\n', '')),
                                  width: 100,
                                ),
                              ),
                            ),
                          ),
                          onSaved: (text) {
                            if (text == null || text.isEmpty == true) {
                              return;
                            }
                            formValue['imageCode'] = text;
                          },
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Padding(
                    padding: EdgeInsets.only(left: 20),
                    child: Form(
                      key: imageFormKey,
                      child: ConstrainedBox(
                        constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                        ),
                        child: TextFormField(
                          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                          decoration: InputDecoration(
                            contentPadding:
                            const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                            fillColor: Colors.white,
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: LabelBlackColor, width: 1),
                            ),
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(
                                color: Color(0xFFF5F5F5),
                                width: 1.0,
                              ),
                            ),
                            border: UnderlineInputBorder(
                              borderSide: BorderSide(
                                color: Color(0xFFF5F5F5),
                                width: 1.0,
                              ),
                            ),
                            prefixIcon: Container(
                              width: 65,
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '验证码',
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.w500),
                              ),
                            ),
                            hintText: '请输入短信验证码',
                            hintStyle:
                            TextStyle(fontSize: 16, color: Color(0xFF999999)),
                            suffixIcon: GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () {
                                if (_seconds == 0) {
                                  phoneFormKey.currentState.save();
                                  codeFormKey.currentState.save();
                                  sendCode();
                                }
                              },
                              child: Center(
                                widthFactor: 1,
                                child: Text(
                                  _seconds == 0 ? '获取验证码' : '$_seconds秒',
                                  style: TextStyle(fontSize: 16),
                                ),
                              ),
                            ),
                          ),
                          onSaved: (text) {
                            if (text == null || text.isEmpty == true) {
                              return;
                            }
                            formValue['code'] = text;
                          },
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Padding(
                    padding: EdgeInsets.only(left: 20),
                    child: GestureDetector(
                      onTap: () {
                        phoneFormKey.currentState.save();
                        imageFormKey.currentState.save();

                        debugPrint(
                            "_seconds:" +
                                TimerInheritedWidget.of(innerContext).seconds.toString());
                      },
                      behavior: HitTestBehavior.opaque,
                      child: Container(
                        height: 48,
                        color: LabelBlackColor,
                        alignment: Alignment.center,
                        child: Text(
                          '登录/注册',
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        )
    );
  }
}

5、使用Provider（数据共享方式）

Provider其实就是对InHeritedWidget的封装，用法固定

5.1、Provider用法
  • step1: 先添加provider三方库依赖
dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0
  • step2: 创建一个数据提供者ChangeNotifier。

我们先新建一个 CutdownTimeProvider，继承 ChangeNotifier，使之成为我们的数据提供者之一

cutdown_time_provider.dart

import 'package:flutter/foundation.dart';

class CutdownTimeProvider extends ChangeNotifier {
  int _seconds = 0;

  int get seconds => _seconds;

  void changeSeconds(seconds) {
    this._seconds = seconds;
    notifyListeners();
  }
}
  • step3: 页面使用provider数据的地方包裹

在要使用的地方使用ChangeNotifierProvider包裹，并且使用Selector控制是否刷新

ChangeNotifierProvider<CutdownTimeProvider>(
  create: (_) => CutdownTimeProvider(),
  builder: (context, widget) {
    return Selector<CutdownTimeProvider, int>(
      selector: (_, v) => v.seconds,
      builder: (_, data, child) {
        return buildBody(context);
      },
    );
  },
)

Step3: provider具体使用

声明CutdownTimeProvider的provider。

注意：这里的context一定要build声明周期的context

final provider = Provider.of<CutdownTimeProvider>(context, listen: false);

取数据

Text(
  provider.seconds == 0 ? '获取验证码' : '${provider.seconds}秒',
  style: TextStyle(fontSize: 16),
)

改变数据

至于这里改变为什么会局部刷新，是因为在数据提供者CutdownTimeProvider中调用了notifyListeners();方法

provider.changeSeconds(60);
5.2、页面源码
import 'dart:async';
import 'dart:collection';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'widgets/cutdown_time_provider.dart';

class LoginDemoPage extends StatefulWidget {
  LoginDemoPage({Key key});

  @override
  State<StatefulWidget> createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginDemoPage> {

  bool _loadingImageUrl = true;
  String _imageUrl =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAaCAIAAABw/jbvAAABjElEQVR42s2Y7Q6DIAxF2dxm9v4P7JaYYNeP2wJFZ/ihFS2HlrZQtoGrlDL7W7VbFcq3VLLfl23sGoR0P7c6xCGvJIxwuq8sIx9TUKXv17029Y9Wh3FIwBmBx3buJHw8V9lUfUt57Q0M5basoLkehGdBJ5SQLp4FaRHS+27CiAf1E9K3AJISAkgmiRO6kArh9wMGWR8rofwRI6yKmwirsOJFFnkzIUVSCdWFKgl33YDQGhw1YHfaRLE0eM9+pxJKG7IYiAlTMplOSB2VIlmEch0GCdXpP5WQIamEFE+aRRIyNta/1T/9NGsRqjxMoqYK5n4uoZU50moJa/SuxMJjnE2E0j8TqkI1W1hhykr6QIFKKMMMSxKJVSHyUosQ1DQg0sjGtIAsP7SD6ahrZxDiGHM2YUoAwHuCRKWlo3LPIuze2qcR5mrqhnRL2WQvdXfW6T6cFkubIC804ywv5cc7/034M9rgaU9k1zPjOMs9p3APfkpcx+CKDx4r5TpqdNDHfHhbu+DUgmvQjLLbBy9uOkzsE/1jAAAAAElFTkSuQmCC';
  final phoneFormKey = GlobalKey<FormState>();
  final imageFormKey = GlobalKey<FormState>();
  final codeFormKey = GlobalKey<FormState>();

  final Map<String, String> formValue = new HashMap();

  Timer _timer;

  Color LabelBlackColor = Color(0xFF1A1A1A);

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      _timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录示例demo'),
      ),
      body: ChangeNotifierProvider<CutdownTimeProvider>(
        create: (_) => CutdownTimeProvider(),
        builder: (context, widget) {
          return Selector<CutdownTimeProvider, int>(
            selector: (_, v) => v.seconds,
            builder: (_, data, child) {
              return buildBody(context);
            },
          );
        },
      ),
    );
  }

  sendCode(BuildContext context) async {
    final provider = Provider.of<CutdownTimeProvider>(context, listen: false);
    provider.changeSeconds(60);
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (provider.seconds == 0) {
        timer.cancel(); // 取消重复计时
        return;
      }
      provider.changeSeconds(provider.seconds - 1);
    });
  }

  Widget buildBody(BuildContext context) {
    final provider = Provider.of<CutdownTimeProvider>(context, listen: false);

    return Container(
      padding: EdgeInsets.only(right: 20, top: 20),
      child: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Text(
              '快捷登录注册',
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 26),
            ),
          ),
          SizedBox(height: 30),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: phoneFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '+86',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                    ),
                    hintText: '请输入手机账号',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                  ),
                  onSaved: (mobile) {
                    if (mobile == null || mobile.isEmpty == true) {
                      return;
                    }
                    formValue['mobile'] = mobile;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: codeFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入图形验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (_loadingImageUrl) {
                          return;
                        } else {
                          _loadingImageUrl = true;
                        }
                      },
                      child: Container(
                        width: 100,
                        height: 30,
                        child: Image.memory(
                          base64Decode(_imageUrl
                              .split(',')[1]
                              .replaceAll('\r', '')
                              .replaceAll('\n', '')),
                          width: 100,
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['imageCode'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: Form(
              key: imageFormKey,
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 58, minHeight: 58
//                      maxWidth: 150,
                    ),
                child: TextFormField(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 20, horizontal: 0),
                    fillColor: Colors.white,
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: LabelBlackColor, width: 1),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    border: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1.0,
                      ),
                    ),
                    prefixIcon: Container(
                      width: 65,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '验证码',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                    hintText: '请输入短信验证码',
                    hintStyle:
                        TextStyle(fontSize: 16, color: Color(0xFF999999)),
                    suffixIcon: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        if (provider.seconds == 0) {
                          phoneFormKey.currentState.save();
                          codeFormKey.currentState.save();
                          sendCode(context);
                        }
                      },
                      child: Center(
                        widthFactor: 1,
                        child: Text(
                          provider.seconds == 0 ? '获取验证码' : '${provider.seconds}秒',
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                  ),
                  onSaved: (text) {
                    if (text == null || text.isEmpty == true) {
                      return;
                    }
                    formValue['code'] = text;
                  },
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 20),
            child: GestureDetector(
              onTap: () {
                phoneFormKey.currentState.save();
                imageFormKey.currentState.save();
                debugPrint("_seconds:" + provider.seconds.toString());
              },
              behavior: HitTestBehavior.opaque,
              child: Container(
                height: 48,
                color: LabelBlackColor,
                alignment: Alignment.center,
                child: Text(
                  '登录/注册',
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
【Flutter】Flutter 实现局部刷新
Code Metaverse
08-02 2180
在 Flutter 开发中，我们经常会遇到需要更新 UI 的情况。在这些情况下，我们通常会刷新整个页面，但这样做可能会导致性能问题。为了解决这个问题，我们可以使用局部刷新，只更新需要改变的部分。
flutter-listview局部刷新。listview带有checkbox
IT技术专栏
08-22 6454
功能： 1.实现了listview局部刷新。 2.checkbox状态保存 item:关键代码 Container( child: MyCheckBox(index, selectState), width: 30, height: 30, padding: EdgeInsets.all(5), ), class MyCheckBox extends Stateful...
Flutter实现局部刷新
08-18
主要为大家详细介绍了Flutter实现局部刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
flutter ListView 局部刷新
最新发布
zhukui66的专栏
02-11 1131
本文介绍在 Flutter 中，要仅刷新ListView中的某一列（即特定列表项），不调用setState如何实现局部刷新。
Flutter ListView 局部刷新数据、ListView点赞收藏
代码小疯子
10-22 7203
本文章实现的是 ListView 中 Item 局部数据刷新的效果,在这只是一个 Demo ，是一个实现思路，在应用开发的更多场景中如 资讯列表的点赞、收藏等等，诸多业务场景都可使用。
Flutter 局部刷新
qq_27909209的博客
05-06 5172
但由于在实际开发中依赖异步数据更新UI的这种场景非常常见，并且当StatefulWidget中控件树较大时，更新一个属性导致整个树重建，消耗性能，因此Flutter专门提供了FutureBuilder和SteamBuilder两个组件来快速实现这种功能。但到多选的时候，需要知道当前选中的选项，有选项被点击的时候需要存储下来，当再次被点击的时候要清空这个选项，同时界面还需要同步更新，因此就涉及到状态管理了。方法构建有状态组件，并且提供了状态更新方法，因此在里面完成状态管理。生成的组件的状态的。
详解flutter刷新流程，让你的应用更流畅
you__are_my_sunshine的博客
05-21 2128
Flutter是谷歌推出的高性能、跨端UI框架，可以通过一套代码，支持iOSAndroid等多个平台，且能达到原生性能。Flutter也可以与平台原生代码进行混合开发，其更新迭代速度很快，技术发展也日趋成熟，如今已经有很多公司在使用这种新跨端技术。我们知道在flutter中可以使用setState()来刷新的UI，这会遍历调用子Widget的build()重构视图。当一个页面内容比较复杂时，会包含多个widget，如果直接调用根组件的setState()，会遍历所有子Widget的build()
百度地图flutter，频繁刷新出现闪烁
07-20
1. 使用`setState`方法进行局部刷新：在更新地图视图时，使用`setState`方法来通知Flutter框架进行局部刷新，而不是整个屏幕的刷新。这样可以减少不必要的刷新，降低闪烁的可能性。 2. 减少地图更新频率：如果您的...
iOS中刷新单行cell抖动问题
qq_41154446的博客
01-04 1110
由于项目中需要使用自动布局，因此本人采用masonry布局。但在布局之后，屏幕刷新调用reloadData会间歇性的抖动，体验及其差。 产生原因： 在使用自动布局之后，UITableViewAutomaticDimension 高度自动适应，就是每次计算高度的时候产生闪动，原因是这个自动布局计算cell高度的时候出现问题。 解决方法： 于是查看其他大佬的文章发现几乎全部采用预设高度为0来进...
Flutter之fish redux状态管理浅析
YYWX的博客
05-04 1386
什么是Flutter？ Flutter 是来自谷歌的一个出色的跨平台框架，可用来为移动、桌面和 Web 平台构建应用程序。 　　目前，Flutter在移动端的应用比较成熟，阿里的咸鱼、美团、头条等顶级互联网公司都有实践应用，虽然生态资源方面不如React Native，但发展势头非常迅猛，流畅的性能体验，以及苹果、安卓代码的一致性方面都令人印象深刻。 　　虽然Web端和桌面端的跨平台应用仍未达...
Flutter 性能优化 Tips
2401_84149220的博客
05-04 723
从命令行中运行 键盘输入代码中打开 在 或者 的构造函数中设置 属性为 :class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( showPerformanceOverlay: true, // 开启 title: ‘My Awesome App’, home: MyHomePage(title: ‘My Awesome App’), ); } }然后就
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。
04-13
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。 网络封装，下拉刷新，上拉加载，图片加载
flutter局部刷新的实现示例
01-20
局部刷新 我们在做项目的时候，都需要单独的去刷新一个值，而不是把整个界面都重绘。大家都知道setState是进行重绘的一个方法，他会执行生命周期的一个build，这将会使得整个界面来进行重绘。当然我们也会说把他进行状态管理，因为我个人不是很喜欢用provider进行状态管理，而是使用steam和event_bus进行传值和管理，当然自然的代码就会多了，所以我现在也在寻找provider更简单的方法，当然这里就不说了，在跟其他人聊的时候，都说好久没有更新了。那是因为有点忙，也变得懒了。现在刚好趁着过年这一段时间，把一些对于在进行Flutter开发中的一些技巧就给大家举个小例子。 Flutter状
flutter 局部刷新
rf344541393的博客
05-23 615
flutter 部分界面刷新
Flutter局部刷新
Care iOS技术团队
10-20 1008
在开发项目的时候，一个比较复杂的页面。如果setstate会触发build导致整个页面刷新。页面会闪烁。 有时候，往往需要刷新的只是其中一个很小的widget. 这个时候我们就需要局部刷新。 原理就是将需要刷新的widget单独提取为一个statefulwidget，然后再其内部调用setState方法来刷新。 可以用的框架有 Provider Redux 或者直接StreamController + StreamBuilder 不明白的可以交流。 ...
刷新ListView刷新时的闪烁问题
爱.NET
09-09 684
LlistView.BeginUpdate(); 调用该方法，可以理解为禁止描述控件界面。 然后写入更新ListView数据之后，再调用以下方法！ ListView.EndUpdate(); 表示继续描述控件界面。 下面代码是我一段更新ListView的代码片段： /// &lt;summary&gt; /// 更新ListView /// &l...
Flutter之局部刷新(2021)
路漫漫其修远
01-04 730
Flutter 框架内部提供了一个非常小巧精致的组件，专门用于局部组件的刷新，它就是 ValueListenableBuilder。 ValueListenableBuilder需要的元素: 类型为 ValueWidgetBuilder 的 builder, 监听对象的界面展现. 本质是一个方法，Widget Function(BuildContext context, T value, Widget child) ValueListenable 对象 , 监听对象, 这里用它的实现类: ValueNot
Flutter 局部Widget刷新
moyuxueyi的专栏
07-07 1010
更新局部Widget，避免全局刷新，总结自己遇到和需要的情况整理如下，原理不做解释，只记录用法 1、GlobalKey 通过传递GlobalKey 获取Widget的State，调用 setState(VoidCallback fn) 刷新Widget 注意：使用GlobalKey开销较大，如果有其他可选方案，应尽量避免使用它。另外同一个GlobalKey在整个widget树中必须是唯一的，不能重复 。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流星雨在线

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值