Flutter学习 – Bloc – 05 倒计时-六虎

携手创造，一起成长！这是我参与「日新计划 8 月更文挑战」的第19天，点击查看活动详情

本文首要运用bloc 形式创立一个倒计时，包括暂停重置等状况

1. 分析

首先就是如下图所示，是一个倒计时，供给了开端，暂停，继续，重置几种状况，一起还有一个完结状况当，倒计时完毕后到达重置效果。

一起有一个计时器，咱们能够订阅它，之后发送咱们的秒数。这个时分能够运用stream流就行履行。关于UI方面，咱们会依据状况展现不同按钮。

2. periodic

咱们运用Stream初始化一个流，每秒履行1次，履行次数经过办法传进来，之后转化下剩下秒数。

class TimeTicker{
  const TimeTicker();
  Stream<int> tick({required int ticks}){
    return Stream.periodic(const Duration(seconds: 1),(count) => ticks - count -1).take(ticks);
  }
}

这儿关于必填的参数咱们运用required修饰，这样明确语意

3. State

咱们之前分析了计时器的几种状况，因而咱们能够设置几种状况

CalculateInitial：准备从指定的时刻开端倒计时，用户能够进行倒计时。
TimerRunInProgress：正在倒计时中，暂停和重置计时器而且能够看到剩下的时刻。
TimerRunPause：暂停，恢复倒计时和重置计时器。
TimerRunComplete：完毕，重置计时器。

part of 'calculate_bloc.dart';
abstract class CalculateState extends Equatable {
  final int duration;
  const CalculateState(this.duration);
  @override
  List<Object> get props => [duration];
}
class CalculateInitial extends CalculateState {
  const CalculateInitial(super.duration);
}
class TimerRunPause extends CalculateState {
  const TimerRunPause(super.duration);
}
class TimerRunInProgress extends CalculateState {
  const TimerRunInProgress(super.duration);
}
class TimerRunComplete extends CalculateState {
  const TimerRunComplete() : super(0);
}

注意一切的states都承继自抽象基类CalculateState，它有一个duration特点。这是由于不论TimerBloc在哪里，咱们都想知道还剩下多少时刻。另外CalculateState还承继了Equatable用于确保假如有相同状况不会再次触发重建。

4. Event

关于咱们Event事情驱动，咱们对应state也有相对应的event

TimerStarted：告诉Bloc开端计时。
TimerPaused：告诉Bloc暂停。
TimerResumed：告诉Bloc恢复计时。
TimerReset：告诉Bloc重置计时器到原来的状况。
TimerTicked：告诉Bloc一个tick现已产生，需求更新它对应的状况。

part of 'calculate_bloc.dart';
abstract class CalculateEvent extends Equatable {
  const CalculateEvent();
  @override
  List<Object> get props => [];
}
class TimerStarted extends CalculateEvent {
  final int duration;
  const TimerStarted({required this.duration });
}
class TimerTicked extends CalculateEvent {
  const TimerTicked({required this.duration});
  final int duration;
  @override
  List<Object> get props => [duration];
}
class TimerPaused extends CalculateEvent {
  const TimerPaused();
}
class TimerResumed extends CalculateEvent {
  const TimerResumed();
}
class TimerReset extends CalculateEvent {
  const TimerReset();

5. Bloc

咱们这儿实现逻辑,针对event，处理逻辑发送对应的state

5.1 初始化

part 'calculate_event.dart';
part 'calculate_state.dart';
class CalculateBloc extends Bloc<CalculateEvent, CalculateState> {
  static const int _duration = 60;
  final TimeTicker _ticker;
  StreamSubscription<int>? _tickerStreamSubscription;
  CalculateBloc({required TimeTicker ticker}) :_ticker = ticker , super(const CalculateInitial(_duration)) {

咱们界说倒计时和计时器，一起界说一个订阅者用于订阅Stream，从而控制咱们的Stream是否暂停，继续以及毁掉。

咱们封闭的时分需求，封闭订阅

/// 封闭的时分 封闭订阅
@override
Future<void> close() async {
  _tickerStreamSubscription?.cancel();
  return super.close();
}

5.2 TimerStarted

假如CalculateBloc收到TimerStarted事情，它会发送一个带有开端时刻的TimerRunInProgress状况。此外，假如现已打开了_tickerSubscription咱们需求撤销它释放内存。咱们也需求在TimerBloc中重载close办法，当TimerBloc被封闭的时分能撤销_tickerSubscription 。最终咱们监听_ticker.tick流而且在每个触发时刻咱们增加一个包括剩下时刻的TimerTicked事情。


/// 开端：1。发送一个带有开端时刻的状况
void _onStarted(TimerStarted event, Emitter<CalculateState> emit) {
  emit(TimerRunInProgress(event.duration));
  _tickerStreamSubscription?.cancel();
  _tickerStreamSubscription = _ticker
  .tick(ticks: event.duration)
  .listen((event) => add(TimerTicked(duration: event)));
}

5.3 TimerTicked

每次接收到TimerTicked事情，假如剩下时刻大于0，咱们需求发送一个带有新的剩下时刻的TimerRunInProgress事情来更新状况。否则，假如剩下时刻等于0，那么倒计时现已完毕，咱们需求发送TimerRunComplete状况。

/// 计时中，判别是否剩下时刻
void _onTicked(TimerTicked event, Emitter<CalculateState> emit){
  emit(event.duration>0 ? TimerRunInProgress(event.duration): const TimerRunComplete());
}

5.4 TimerPaused

在_onPaused中假如咱们TimerBloc中的状况是TimerRunInProgress，咱们能够暂停_tickerSubscription而且发送一个带有其时时刻的TimerRunPause状况。

///  暂停，判别其时是否state为TimerRunInprogress类型，之后暂停订阅，发送暂停state
void _onPaused(TimerPaused event, Emitter<CalculateState> emit) {
  if( state is TimerRunInProgress) {
    _tickerStreamSubscription?.pause();
    emit(TimerRunPause(state.duration));
  }
}

5.5 TimerResumed

TimerResumed事情处理和TimerPaused事情的处理十分相似。假如CalculateBloc的state是TimerRunPause而且它接收到一个TimerResumed事情，它恢复_tickerSubscription而且发送一个带有其时时刻的TimerRunInProgress状况。

/// 恢复，咱们判别其时state为暂停状况后，进行恢复jiant
void _onResumed(TimerResumed event, Emitter<CalculateState> emit){
  if( state is TimerRunPause) {
    _tickerStreamSubscription?.resume();
    emit(TimerRunInProgress(state.duration));
  }
}

5.6 TimerReset

假如CalculateBloc接收到一个TimerReset事情，它需求撤销其时的_tickerSubscription这样它就不会被计时器告诉，而且发送一个带有初始时刻的CalculateInitial状况。

/// 重置,初始化
void _onReset(TimerReset event ,Emitter<CalculateState> emit) {
  _tickerStreamSubscription?.cancel();
  emit(const CalculateInitial(_duration));
}

6. UI

咱们经过BlocProvider相关咱们的页面和bloc

class TimerPage extends StatelessWidget {
  const TimerPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
   return BlocProvider(
       create: (_) => CalculateBloc(ticker: const TimeTicker()),
       child: const TimerView(),
   );
  }
}

6.1 TimerPage

依据布局咱们运用Stack，方便咱们增加背景什么的。

class TimerView extends StatelessWidget {
  const TimerView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('倒计时')),
      body: Stack(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: const <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(vertical: 100.0),
                child: Center(child: TimerText()),
              ),
              Actions(),
            ],
          ),
        ],
      ),
    );
  }
}

6.2 TimerText

经过context获取Bloc，之后展现在Text中


class TimerText extends StatelessWidget {
  const TimerText({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final duration = context.select((CalculateBloc bloc) => bloc.state.duration);
    final minutesStr =
    ((duration / 60) % 60).floor().toString().padLeft(2, '0');
    final secondsStr = (duration % 60).floor().toString().padLeft(2, '0');
    return Text(
      '$minutesStr:$secondsStr',
      style: Theme.of(context).textTheme.headline1,
    );
  }
}

6.3 Actions

class Actions extends StatelessWidget {
  const Actions({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CalculateBloc, CalculateState>(
      buildWhen: (prev, state) => prev.runtimeType != state.runtimeType,
      builder: (context, state) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            if (state is CalculateInitial) ...[
              FloatingActionButton(
                heroTag: null,
                child: const Icon(Icons.play_arrow),
                onPressed: () => context
                    .read<CalculateBloc>()
                    .add(TimerStarted(duration: state.duration)),
              ),
            ],
            if (state is TimerRunInProgress) ...[
              FloatingActionButton(
                heroTag: null,
                child: const Icon(Icons.pause),
                onPressed: () => context.read<CalculateBloc>().add(const TimerPaused()),
              ),
              FloatingActionButton(
                heroTag: null,
                child: const Icon(Icons.replay),
                onPressed: () => context.read<CalculateBloc>().add(const TimerReset()),
              ),
            ],
            if (state is TimerRunPause) ...[
              FloatingActionButton(
                heroTag: null,
                child: const Icon(Icons.play_arrow),
                onPressed: () => context.read<CalculateBloc>().add(const TimerResumed()),
              ),
              FloatingActionButton(
                heroTag: null,
                child: const Icon(Icons.replay),
                onPressed: () => context.read<CalculateBloc>().add(const TimerReset()),
              ),
            ],
            if (state is TimerRunComplete) ...[
              FloatingActionButton(
                heroTag: null,
                child: const Icon(Icons.replay),
                onPressed: () => context.read<CalculateBloc>().add(const TimerReset()),
              ),
            ]
          ],
        );
      },
    );
  }
}

Actions小部件只是另一个StatelessWidget，每逢咱们获取到一个新的TimerState时，它运用BlocBuilder来重建UI。Actions运用context.read<TimerBloc>()拜访TimerBloc实例而且依据其时TimerBloc状况回来不同的FloatingActionButtons。每个FloatingActionButtons的onPressed回调中都增加一个事情告诉CalculateBloc。

假如你想纤细的控制，当builder办法被调用的时分你能够供给一个可选的buildWhen到BlocBuilder。buildWhen带着前一个bloc状况和其时的bloc状况，而且回来一个boolean值。假如buildWhen回来true，将调用带有state的builder而且重建组件。假如buildWhen回来false，带有state的builder将不会被调用而且不会被重建。

这种情况下，咱们不想每次都重新构建Actions组件，这样功率很低。咱们只想在TimeState的runtimeType改动的时分(TimerInitial => TimerRunInProgress, TimerRunInProgress => TimerRunPause, 等…)重建Actions。

7. 小结

关于一些多状况的场景，咱们能够承继抽象类，每种状况代表一种情况，都持有抽象类参数duration。与之对应的是event，经过event发送不同state刷新界面。一起咱们经过stream能够监听，依据传递状况做出对应操作，最终做到了 event-state 一一对应。

Flutter学习 – Bloc – 05 倒计时

1. 分析

2. periodic

3. State

4. Event

5. Bloc

5.1 初始化

5.2 TimerStarted

5.3 TimerTicked

5.4 TimerPaused

5.5 TimerResumed

5.6 TimerReset

6. UI

6.1 TimerPage

6.2 TimerText

6.3 Actions

7. 小结

作者信息

推广

Flutter学习 – Bloc – 05 倒计时

1. 分析

2. periodic

3. State

4. Event

5. Bloc

5.1 初始化

5.2 TimerStarted

5.3 TimerTicked

5.4 TimerPaused

5.5 TimerResumed

5.6 TimerReset

6. UI

6.1 TimerPage

6.2 TimerText

6.3 Actions

7. 小结

相关文章

Istio 如何无停机平滑升级 (1.7 跨版本升级 1.11)

使用 App Store Connect API v2.3 管理 App Store 新定价机制

解谜 Dart VM中的线程池：并发编程艺术的详细分析

iBug 16 有感

作者信息

推广