Flutter Developer Learning SwiftUI. @State var lesson26 = "生命週期+本地儲存"

2022 iThome 鐵人賽

DAY 26

Mobile Development

Flutter Developer Learning SwiftUI系列第 26 篇

14th鐵人賽 swiftui swift ios flutter

MarkFly～

2022-10-11 18:10:44

1637 瀏覽

分享至

Today Preview

1. 正文

1. App生命週期

展示了一下可以用Environment獲取scenePhase
然後觀察ScenePhase的三種階段
這邊想要做到的是那種金融app很常見的保密效果

一開始用了這種寫法，但每次進到active後，RootView還是會重新生成

  static let rootView = RootView()

  if scenePhase == .active {
    FDLSApp.rootView
  } else {
    Color.white
  }

所以才改成用ZStack
接著想試把整個頁面模糊化

  RootView()
    .blur(radius: scenePhase == .active ? 0 : 10)

但不知為何會讓整個NavigationBar跑到safeArea外面
像這樣

不想花太多時間研究了...
就先打退堂鼓

最後眼尖的讀者應該有發現
我的app從背景回來時
其實有閃了一下“非禮勿視”那行字
雖然我另外加了didEnterBackground
有改善這個狀況(本來更明顯)
但無法完全解決(加了.opacity()也沒用)
若有類似WillEnterForeground的東西應該比較方便

這小節的內容對應Flutter的AppLifecycleState☘️☘️☘️
下方有對照表可參考
若要了解更詳細的App Life Cycle可以看這邊

2. View生命週期

View的話就不像Scene有個enum
而是用.onAppear() 跟 .onDisappear() 兩個Modifier
值得注意的是appear是顯示之前呼叫，disappear是消失之後呼叫
而.onChange()之前的文章也有用過，是用來觀察State的變化
看來似乎是在appear期間才會呼叫

3. 本地儲存

最後一個超簡單小範例
展示如果有些輕量/不敏感的資料要存在app
可以用@AppStorage
它是UserDefault的再一層封裝(透過Property Wrapper)
可以很方便地在SwiftUI裡使用
不用再set來get去
深入暸解點我

2. 對照表

App生命週期

iOS	Android	Flutter	SwiftUI
WillEnterForeground	onRestart
DidBecomeActive	onStart	resumed	active
WillResignActive	onPause		inactive
DidEnterBackground	onStop	paused	background

View生命週期

iOS	Android	Flutter	SwiftUI
init	onCreate	createState	init
viewDidLoad		initState
viewWillAppear	onStart		.onAppear()
viewDidLayoutSubviews		build	body
viewDidAppear	onResume
viewWillDisappear	onPause
viewDidDisappear	onStop		.onDisappear()
removeFromSuperview		deactivate
deinit	onDestroy	dispose