欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解用flutter制作上班摸魚(yú)應(yīng)用

 更新時(shí)間:2022年03月23日 09:28:57   作者:niceguynum2  
本文主要介紹了用flutter制作上班摸魚(yú)應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

網(wǎng)上最近看到了個(gè)摸魚(yú)應(yīng)用,還挺好玩的,我就自己用flutter寫(xiě)了一個(gè)。

之前我有用flutter制作過(guò)mobile應(yīng)用,但是沒(méi)有在desktop嘗試過(guò);畢竟2.0大更新,我這里就在這試手一下,并說(shuō)說(shuō)flutter的體驗(yàn).

當(dāng)前flutter環(huán)境 2.8

增加flutter desktop支持 (默認(rèn)項(xiàng)目之存在ios,android項(xiàng)目包)

flutter config --enable-<platform>-desktop

我這里是mac,因此platform=macos,詳細(xì)看flutter官網(wǎng)

 代碼十分簡(jiǎn)單,UI部分就不講了

在摸魚(yú)界面,我是用了 Bloc 做倒計(jì)時(shí)計(jì)算邏輯,默認(rèn)摸魚(yú)時(shí)長(zhǎng)15分鐘

 MoYuBloc() : super(MoyuInit()) {
    on(_handleMoyuStart);
    on(_handleUpdateProgress);
    on(_handleMoyuEnd);
  }

摸魚(yú)開(kāi)始事件處理

// handle moyu start action
  FutureOr<void> _handleMoyuStart(
      MoyuStarted event, Emitter<MoyuState> emit) async {
    if (_timer != null && _timer!.isActive) {
      _timer?.cancel();
    }
 
    final totalTime = event.time;
    int progressTime = state is MoyuIng ? (state as MoyuIng).progressTime : 0;
 
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      add(MoyuProgressUpdated(totalTime, ++progressTime));
 
      if (progressTime >= totalTime) {
        timer.cancel();
        add(MoyuEnded());
      }
    });
    emit(MoyuIng(progress: 0, progressTime: 0));
  }

摸魚(yú)進(jìn)度更新

// handle clock update
  FutureOr<void> _handleUpdateProgress(
      MoyuProgressUpdated event, Emitter<MoyuState> emit) async {
    final totalTime = event.totalTime;
    final progressTime = event.progressTime;
    emit(
      MoyuIng(progress: progressTime / totalTime, progressTime: progressTime),
    );
  }

摸魚(yú)結(jié)束,釋放結(jié)束事件

// handle clock end
  FutureOr<void> _handleMoyuEnd(
      MoyuEnded event, Emitter<MoyuState> emit) async {
    emit(MoyuFinish());
  }

總結(jié)3個(gè)event (摸魚(yú)開(kāi)始,進(jìn)程更新,摸魚(yú)結(jié)束)

abstract class MoyuEvent {}
 
class MoyuStarted extends MoyuEvent {
  final int time;
  final System os;
 
  MoyuStarted({required this.time, required this.os});
}
 
class MoyuProgressUpdated extends MoyuEvent {
  final int totalTime;
  final int progressTime;
 
  MoyuProgressUpdated(this.totalTime, this.progressTime);
}
 
class MoyuEnded extends MoyuEvent {
  MoyuEnded();
}

其中3個(gè)state (摸魚(yú)初始,正在摸魚(yú),摸魚(yú)結(jié)束)

abstract class MoyuState {}
 
class MoyuInit extends MoyuState {}
 
class MoyuIng extends MoyuState {
  final double progress;
  final int progressTime;
 
  MoyuIng({required this.progress, required this.progressTime});
}
 
class MoyuFinish extends MoyuState {}

啟動(dòng)摸魚(yú)使用, 記錄總時(shí)長(zhǎng)和消耗時(shí)間,計(jì)算進(jìn)度百分比,更新UI進(jìn)度條 

下面是界面更新邏輯

BlocConsumer<MoYuBloc, MoyuState>(
          builder: (context, state) {
            if (state is MoyuIng) {
              final progress = state.progress;
 
              return _moyuIngView(progress);
            } else if (state is MoyuFinish) {
              return _replayView();
            }
            return const SizedBox();
          },
          listener: (context, state) {},
          listenWhen: (pre, cur) => pre != cur,
        ),

很簡(jiǎn)單 最重要的是進(jìn)度狀態(tài),其次結(jié)束后是否重新摸魚(yú)按鈕

構(gòu)建運(yùn)行flutter應(yīng)用

flutter run -d macos 

 最后結(jié)果展示

總結(jié)下flutter desktop使用

  • 簡(jiǎn)單上手,按著官網(wǎng)走基本沒(méi)問(wèn)題,基本上沒(méi)踩上什么雷,可能項(xiàng)目比較簡(jiǎn)單
  • 構(gòu)建流程簡(jiǎn)單,hot reload強(qiáng)大
  • 性能強(qiáng)大,啟動(dòng)速度很快,并且界面無(wú)頓挫感

比較遺憾的事desktop電腦構(gòu)建系統(tǒng)獨(dú)立,mac環(huán)境下無(wú)法構(gòu)建windows應(yīng)用,有點(diǎn)小遺憾.

項(xiàng)目完全開(kāi)源 可以前往GitHub查看 不要忘點(diǎn)個(gè)star??

https://github.com/lau1944/moyu_app

到此這篇關(guān)于詳解用flutter制作上班摸魚(yú)應(yīng)用的文章就介紹到這了,更多相關(guān)flutter  摸魚(yú)應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論