iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 23

Flutter Developer Learning SwiftUI. @State var lesson23 = "切換頁面"

  • 分享至 

  • xImage
  •  

Today Preview

Yes

1. 正文

昨天打了好多字...
今天輕鬆一下
講點跳頁

主要分成兩大類
app間切換 跟 app內切換
然後app內切換又分成由右往左 跟 由下往上
最後由下往上又分成可滑動關閉 跟 全屏滿頁

1.


先準備好要在頁面間傳遞的資料跟一些State
然後Link是個按鈕
點了可以開網頁或其他app(like Flutter url_launcher☘️☘️☘️)
之前UIKit有個SFSafariViewController
就是內建的網頁瀏覽器
不過SwiftUI目前沒有
要用的話請參考第17集
裡面有提到如何橋接

2.


接著就是today的重點
app內三種切換頁面的方式
NavigationLink也是一個按鈕
點了就會切換到另一頁(like Flutter Navigator.push()☘️☘️☘️)
但有個前提是這頁或前一頁必須有用NavigationView包起來
這概念就跟以前UIKit的UINavigationController一樣,有容器的概念
所以現在看到圖上按鈕是反灰的
因為Preview目前這頁沒有用NavigationView
如果從前一頁跳過來就會亮了

接下來兩個是modifier
需要用state去控制是否彈出畫面
但就不需要NavigationView了

然後這三種都把資料傳給下一頁
這一頁也會收到下一頁做的改動

3.


這邊是跳過去的那頁
由於要將改跟前一頁連動
所以要用@Binding 把item wrap起來
而關閉頁面的方式
之前用的presentationMode棄用了,改用dismiss

2. 對照表

iOS Flutter SwiftUI
openUrl url_launcher Link
UINavigationController Navigator NavigationView
present modal_bottom_sheet .sheet
present modalPresentationStyle = .fullScreen CupertinoPageRoute fullscreenDialog .fullScreenCover

Tomorrow Preview

Yes


跨界學習系列文章

Android版:iOS Developer Learning Android. Lesson 04 - Activity (了解祂的生老病死)
Flutter版:iOS Developer Learning Flutter. Lesson3 頁面跳轉


https://github.com/mark33699/FDLS


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

尚未有邦友留言

立即登入留言