iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 26

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

  • 分享至 

  • xImage
  •  

Today Preview

Yes
Yes

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

本地儲存

iOS Android Flutter SwiftUI
UserDefault SharedPreferences SharedPreferences AppStorage

Tomorrow Preview

Yes


跨界學習系列文章

Android版:iOS Developer Learning Android. Lesson 04 - Activity (了解祂的生老病死)
Flutter版:iOS Developer Learning Flutter. Lesson19 Life Cycle


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson25 = "頁籤(下)"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson27 = "call RESTful API"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言