Flutter状态管理Bloc之定时器示例

本文实例为大家分享了Flutter状态管理Bloc之定时器的具体代码,供大家参考,具体内容如下

1. 依赖

dependencies:
  flutter_bloc: ^2.1.1
  equatable: ^1.0.1
  wave: ^0.0.8

2. Ticker

Ticker 用于产生定时器的数据流。

/// 定时器数据源
class Ticker {
  
  /// 定时器数据源
  /// @param ticks 时间
  Stream<int> tick({int ticks}){
      return Stream.periodic(Duration(seconds: 1), (x) => ticks - x - 1).take(ticks);
  }
}

3. TimerBloc

创建 TimerBloc 用于消费Ticker, 我们需要创建定时器状态,定时器事件两个辅助类。其中定时器的状态有

  • Ready(准备从指定的持续时间开始倒计时)
  • Running(从指定持续时间开始递减计数)
  • Paused(在剩余的持续时间内暂停)
  • Finished已完成,剩余持续时间为0
import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';
 
/// 定时器状态
@immutable
abstract class TimerState extends Equatable{
  /// 时间
  final int duration;
 
  /// 构造方法 
  const TimerState(this.duration);
 
  @override
  List<Object> get props => [this.duration];
}
 
/// 准备状态
class Ready extends TimerState {
  const Ready(int duration) : super(duration);
 
  @override
  String toString() => 'Ready { duration: $duration }';
}
 
/// 暂停状态
class Paused extends TimerState {
  const Paused(int duration) : super(duration);
  
  @override
  String toString() => 'Paused { duration: $duration }';
}
 
/// 运行状态
class Running extends TimerState {
  const Running(int duration) : super(duration);
  
  @override
  String toString() => 'Running { duration: $duration }';
}
 
/// 完成状态
class Finished extends TimerState{
  const Finished() : super(0);
}

所有的State都继承自抽象类TimerState,因为不论在哪个状态,我们都需要知道剩余时间。

4. TimerEvent

我们需要处理的事件有

  • Start (通知TimerBloc定时器应该开始)
  • Pause (通知TimerBloc计时器应该暂停)
  • Resume(通知TimerBloc应该恢复计时器)
  • Reset (通知TimerBloc定时器应重置为原始状态)
  • Tick (通知TimerBloc需要更新剩余时间)
import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';
 
/// 定时器事件
@immutable
abstract class TimerEvent extends Equatable{
 
  const TimerEvent();
 
  @override
  List<Object> get props => [];
}
 
/// 开始时间
class Start extends TimerEvent {
  /// 定时器时间
  final int duration;
 
  const Start({@required this.duration});
 
  @override
  String toString() => 'Start { duration: $duration }';
}
 
/// 暂停事件
class Paused extends TimerEvent {}
 
/// 恢复状态
class Resumed extends TimerEvent {}
 
/// 重置状态
class Reset extends TimerEvent {}
 
/// 定时器事件
class Tick extends TimerEvent {
  /// 当前时间
  final int duration;
 
  const Tick({@required this.duration});
 
  @override
  List<Object> get props => [this.duration];
 
  @override
  String toString() => 'Tick { duration: $duration }';
}

5. TimerBloc 实现

1.初始化状态Ready(_duration)
2.创建Ticker对象, 用户获取数据流
3.实现mapEventToState方法
4.当event为Start时, 需要开启数据流
5.创建StreamSubscription, 处理流的不同状态, 并在bloc的close方法中关闭它
6.当event为Tick时, 需要处理数据的更新
7.当event为Pause时, 需要停止定时器
8.当event为Resume时, 需要重新启动定时器
9.当event为reset时, 需要重置定时器

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:flutter/material.dart';
import 'package:state_manage/timer/ticker.dart';
import './bloc.dart';
 
/// 定时器Bloc
class TimerBloc extends Bloc<TimerEvent, TimerState> {
  /// 定时器时间
  final int _duration = 60;
  /// 定时器数据流
  final Ticker _ticker;
  // 流订阅
  StreamSubscription<int> _tickerSubscription;
 
  TimerBloc({@required Ticker ticker})
      : assert(ticker != null),
        _ticker = ticker;
 
  /// 初始化状态
  @override
  TimerState get initialState => Ready(_duration);
 
  @override
  Stream<TimerState> mapEventToState(
    TimerEvent event,
  ) async* {
    print('$event');
    if (event is Start) {
      yield* _mapStartToState(event);
    } else if (event is Tick) {
      yield* _mapTickToState(event);
    } else if (event is Pause) {
      yield* _mapPauseToState(event);
    } else if (event is Resume) {
      yield* _mapResumeToState(event);
    } else if (event is Reset) {
      yield* _mapResetToState(event);
    }
  }
 
  @override
  Future<void> close() {
    _tickerSubscription?.cancel();
    return super.close();
  }
 
  /// 处理开始事件
  Stream<TimerState> _mapStartToState(Start start) async* {
    // 运行状态
    yield Running(start.duration);
    // 取消订阅
    _tickerSubscription?.cancel();
    // 创建订阅
    _tickerSubscription =
        _ticker.tick(ticks: start.duration).listen((duration) {
      add(Tick(duration: duration));
    });
  }
 
  /// 处理定时器事件
  Stream<TimerState> _mapTickToState(Tick tick) async* {
    yield tick.duration > 0 ? Running(tick.duration) : Finished();
  }
 
  /// 处理暂停事件
  Stream<TimerState> _mapPauseToState(Pause pause) async* {
    if (state is Running) {
      _tickerSubscription?.pause();
      yield Paused(state.duration);
    }
  }
 
  /// 处理恢复状态
  Stream<TimerState> _mapResumeToState(Resume resume) async* {
    if (state is Paused) {
      _tickerSubscription?.resume();
      yield Running(state.duration);
    }
  }
 
  /// 处理重置状态
  Stream<TimerState> _mapResetToState(Reset reset) async* {
    _tickerSubscription?.cancel();
    yield Ready(_duration);
  }
}

6. 界面实现

实现定时器显示
timer_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:state_manage/timer/bloc/bloc.dart';
import 'package:state_manage/timer/ticker.dart';
 
/// 定时器
class TimerTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color.fromRGBO(109, 234, 255, 1),
        accentColor: Color.fromRGBO(72, 74, 126, 1),
        brightness: Brightness.dark,
      ),
      title: 'Flutter Timer',
      home: BlocProvider(
        create: (ctx) => TimerBloc(ticker: Ticker()),
        child: Timer(),
      ),
    );
  }
}
 
/// 定时器页面
class Timer extends StatelessWidget{
  /// 字体样式
  static const TextStyle timerTextStyle = TextStyle(
    fontSize: 60,
    fontWeight: FontWeight.bold
  );
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Time')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 100.0),
            child: Center(
              child: BlocBuilder<TimerBloc, TimerState>(
                builder: (ctx, state) {
                  // 分钟格式化
                  final String minuteStr = ((state.duration / 60) % 60).floor().toString().padLeft(2, '0');
                  // 秒数格式化
                  final String secondStr = (state.duration % 60).floor().toString().padLeft(2, '0');
                  return Text(
                    '$minuteStr : $secondStr',
                    style: Timer.timerTextStyle,
                  );
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

添加背景
timer_background.dart

import 'package:flutter/material.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';
 
/// 定时器背景
class Background extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WaveWidget(
      config: CustomConfig(
        gradients: [
          [
            Color.fromRGBO(72, 74, 126, 1),
            Color.fromRGBO(125, 170, 206, 1),
            Color.fromRGBO(184, 189, 245, 0.7)
          ],
          [
            Color.fromRGBO(72, 74, 126, 1),
            Color.fromRGBO(125, 170, 206, 1),
            Color.fromRGBO(172, 182, 219, 0.7)
          ],
          [
            Color.fromRGBO(72, 73, 126, 1),
            Color.fromRGBO(125, 170, 206, 1),
            Color.fromRGBO(190, 238, 246, 0.7)
          ]
        ],
        durations: [19440, 10800, 6000],
        heightPercentages: [0.03, 0.01, 0.02],
        gradientBegin: Alignment.bottomCenter,
        gradientEnd: Alignment.topCenter
      ),
      size: Size(double.infinity, double.infinity),
      waveAmplitude: 25,
      backgroundColor: Colors.blue[50],
    );
  }
  
}

timer_test.dart

 /// 定时器页面
class Timer extends StatelessWidget {
  /// 字体样式
  static const TextStyle timerTextStyle =
      TextStyle(fontSize: 60, fontWeight: FontWeight.bold);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Time')),
      body: Stack(
        children: <Widget>[
          Background(),
          Column(
            // ... 省略内容
          )
        ],
      ),
    );
  }
}

添加定时器动作
timer_actions.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:state_manage/timer/bloc/bloc.dart';
 
/// 动作
class TimerActions extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: _mapStateToActionButtons(timerBloc: BlocProvider.of<TimerBloc>(context)),
    );
  }
 
  /// 创建动作按钮
  /// @param timerBloc 定时器Bloc
  List<Widget> _mapStateToActionButtons({TimerBloc timerBloc}) {
    // 定时器当前状态
    final TimerState currentState = timerBloc.state;
    // 根据不同状态返回不同视图
    if (currentState is Ready) {
      return [FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () => timerBloc.add(Start(duration: currentState.duration)),
      )];
    } else if (currentState is Running) {
      return [
        FloatingActionButton(
          child: Icon(Icons.pause),
          onPressed: () => timerBloc.add(Pause()),
        ),
        FloatingActionButton(
          child: Icon(Icons.replay),
          onPressed: () => timerBloc.add(Reset()),
        )
      ];
    } else if (currentState is Paused) {
      return [
        FloatingActionButton(
          child: Icon(Icons.play_arrow),
          onPressed: () => timerBloc.add(Resume()),
        ),
        FloatingActionButton(
          child: Icon(Icons.replay),
          onPressed: () => timerBloc.add(Reset()),
        )
      ];
    } else if (currentState is Finished) {
      return [
        FloatingActionButton(
          child: Icon(Icons.replay),
          onPressed: () => timerBloc.add(Reset()),
        )
      ];
    } else {
      return [];
    }
  }
}

在界面设置动作
timer_test.dart

/// 定时器页面
class Timer extends StatelessWidget {
  /// 字体样式
  static const TextStyle timerTextStyle =
      TextStyle(fontSize: 60, fontWeight: FontWeight.bold);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Timer')),
      body: Stack(
        children: <Widget>[
          Background(),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                // ...
              ),
              BlocBuilder<TimerBloc, TimerState>(
                condition: (previousState, currentState) => currentState.runtimeType != previousState.runtimeType,
                builder: (ctx, state) => TimerActions(),
              )
            ],
          )
        ],
      ),
    );
  }
}

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Flutter部件内部状态管理小结之实现Vue的v-model功能

    Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能. widget 基础 widget(部件) 如 React 里万物皆组件, Java 里万物皆对象, Flutter 里,能看到的一切都是 widget(部件),如按钮.文本框等等. Flutter 内部已经为我们做了一些基础的 widget ,例如: Text : 这个就是一个文本部件,里面用于放置文本 Row , C

  • Flutter 状态管理的实现

    一.什么是状态管理 大到整个app的状态,用户使用app是登录状态,还是游客状态:小到一个按钮的状态,按钮是点击选中状态还是未点击状态等等,这些都是状态管理. 二.命令式编程和声明式编程状态管理的区别 iOS是如何管理状态的,一般都是获取这个控件然后设置你想要的状态 当你的 Flutter 应用的状态发生改变时(例如,用户在设置界面中点击了一个开关选项)你改变了状态,这将会触发用户界面的重绘.去改变用户界面本身是没有必要的(例如 widget.setText )-你改变了状态,那么用户界面将重新

  • Flutter定时器、倒计时的快速上手及实战讲解

    今天给大家讲讲 Flutter 里面定时器/倒计时的实现. 一般有两种场景: 我只需要你在指定时间结束后回调告诉我.回调只需要一次. 我需要你在指定时间结束后回调告诉我.回调可能多次. 下面针对这两种场景,我们来说下如何在 Flutter 里面使用. 回调一次的定时器 const timeout = const Duration(seconds: 5); print('currentTime='+DateTime.now().toString()); Timer(timeout, () { //

  • Flutter状态管理Bloc之定时器示例

    本文实例为大家分享了Flutter状态管理Bloc之定时器的具体代码,供大家参考,具体内容如下 1. 依赖 dependencies:   flutter_bloc: ^2.1.1   equatable: ^1.0.1   wave: ^0.0.8 2. Ticker Ticker 用于产生定时器的数据流. /// 定时器数据源 class Ticker {      /// 定时器数据源   /// @param ticks 时间   Stream<int> tick({int ticks

  • Flutter状态管理Bloc之登录示例

    本文实例为大家分享了Flutter状态管理Bloc之登录的具体代码,供大家参考,具体内容如下 1. 依赖 dependencies:   flutter_bloc: ^2.1.1   equatable: ^1.0.1 2. UserRepository 用于管理用户数据 提供认证方法,删除Token,保存Token,是否包含Token四个方法. import 'package:flutter/material.dart';   /// 用户数据仓库 class UserRepository {

  • Flutter状态管理Bloc使用示例详解

    目录 前言 两种使用模式 Cubit模式 最后 前言 目前Flutter三大主流状态管理框架分别是provider.flutter_bloc.getx,三大状态管理框架各有优劣,本篇文章将介绍其中的flutter_bloc框架的使用,他是bloc设计思想模式在flutter上的实现,bloc全程全称 business logic ,业务逻辑的意思,核心思想就是最大程度的将页面ui与数据逻辑的解耦,使我们的项目可读性.可维护性.健壮性增强. 两种使用模式 首先第一步引入插件: flutter_bl

  • Flutter状态管理Provider的使用示例详解

    目录 前言 计数器 全局状态 总结 前言 Provider是三大主流状态管理框架官方推荐使用的框架,它是基于官方数据共享组件InheritedWidget实现的,通过数据改变调用生命周期中的didChangeDependencies()方法,来实现状态的通知改变. InheritedWidget的使用可以参考我之前的这篇Flutter中几种数据传递的应用总结. 计数器 还是以计数器为例,这次通过Provider实现,provider相较于bloc并没有那么强制性分层,所以这里我们自己分为数据层(

  • 封装flutter状态管理工具示例详解

    目录 引言 RxBinder 代码实现 Demo 完美运行 引言 关于 Flutter 状态管理,公司项目使用的是Bloc方案.Bloc 其实本质上是 provider 的封装扩展库,整体通过 InheritedWidget .Notifier 外加 Stream中转实现状态变更通知. 关于 Bloc 实现原理,有兴趣的同学可以观看这篇文章 Bloc原理解析 RxBinder 撇开Bloc内部实现策略,小轰尝试基于数据驱动模型,自定义一套状态管理工具.构思如下: 主要成员如下: RxBinder

  • Flutter状态管理Provider示例解析

    目录 什么是状态管理 常见的状态管理框架有哪些 Provider Redux GetX Provider 使用 添加依赖 导入应用 定义需要共享的数据 在应用程序入口初始化 使用共享数据 状态管理的好处 结束语 什么是状态管理 状态管理是一个十分广泛的概念,因为状态无处不在.从广义角度讲状态管理就是页面跟代码.跟服务器进行数据同步.例如:你在某购物应用内,添加了一件商品,你需要在购物车页面进行展示.这就是一种状态.相反的,你在商品页面点击了添加到购物车,却在购物车页面没有发现或者过段时间它才展示

  • flutter状态管理Provider的使用学习

    目录 1. provider的使用 2. 控制Widget的刷新颗粒度 3. 小结 本文主要介绍flutter中状态管理组件provider,provider: ^6.0.3主要是用于我们系统InheritedWidge的封装,用于数据的传递和管理. 1. provider的使用 网上也有很多关于provider说明,也可以看下官方的provider的 README.这里我记录一下我自己学习.我们对于简单的数据共享可以设置参数,之后子页面进行数据方法回调,从而完成数据间的通信.但是比较麻烦,下面

  • React 状态管理工具优劣势示例分析

    目录 什么是状态管理? React 状态管理方案 方案介绍 方案对比 Source 相关建议 什么是状态管理? “状态”是描述应用程序当前行为的任何数据.这可能包括诸如“从服务器获取的对象列表”.“当前选择的项目”.“当前登录用户的名称”和“此模式是否打开?”等值. 众所周知,我们在研发一个复杂应用的过程中,一套好的状态管理方案是必不可少的,既能提升研发效率,又能降低研发维护成本,那么状态管理方案那么多,它们有什么不同,我们又该如何选择适合当前应用的方案呢? 本期将主要就 react 的常用状态

随机推荐