網上最近看到了個摸魚應用，還挺好玩的，我就自己用flutter寫了一個，
之前我有用flutter制作過mobile應用，但是沒有在desktop嘗試過；畢竟2.0大更新，我這里就在這試手一下，并說說flutter的體驗.
當前flutter環境 2.8
增加flutter desktop支持 (默認專案之存在ios，android專案包)
flutter config --enable-<platform>-desktop我這里是mac，因此platform=macos，詳細看flutter官網
代碼十分簡單，UI部分就不講了
在摸魚界面，我是用了 Bloc 做倒計時計算邏輯，默認摸魚時長15分鐘
MoYuBloc() : super(MoyuInit()) {
on(_handleMoyuStart);
on(_handleUpdateProgress);
on(_handleMoyuEnd);
}摸魚開始事件處理
// 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));
}摸魚進度更新
// 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),
);
}摸魚結束，釋放結束事件
// handle clock end
FutureOr<void> _handleMoyuEnd(
MoyuEnded event, Emitter<MoyuState> emit) async {
emit(MoyuFinish());
}總結3個event (摸魚開始，行程更新，摸魚結束）
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個state （摸魚初始，正在摸魚，摸魚結束）
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 {}啟動摸魚使用, 記錄總時長和消耗時間，計算進度百分比，更新UI進度條
下面是界面更新邏輯
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,
),很簡單 最重要的是進度狀態，其次結束后是否重新摸魚按鈕
構建運行flutter應用
flutter run -d macos 最后結果展示
總結下flutter desktop使用
- 簡單上手，按著官網走基本沒問題，基本上沒踩上什么雷，可能專案比較簡單
- 構建流程簡單，hot reload強大
- 性能強大，啟動速度很快，并且界面無頓挫感
比較遺憾的事desktop電腦構建系統獨立，mac環境下無法構建windows應用，有點小遺憾.
專案完全開源 可以前往GitHub查看 不要忘點個star😊
https://github.com/lau1944/moyu_app
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385642.html
標籤：其他
下一篇：shape繪制形狀基礎詳細決議