iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 2

Flutter Developer Learning SwiftUI. @State var lesson2 = "啟動畫面"

  • 分享至 

  • xImage
  •  

Today Preview

Yes

外貿協會

今天來跟大家聊聊我寫mobile app覺得第二重要的東西 -> launch view
(第一重要的是app icon)
這玩意呢
以前在Flutter就是要到原生iOS資料夾裡去處理了
只不過以前都是用Launch.storyboard
今天我們來看看SwiftUI專案怎麼處理

還沒試之前
我想說可以用SwiftUI寫launch
覺得很興奮
不過查了才發現
只能用靠設定的
想想也合理啦
launch view就是拿來在app還沒初始化前暫時擋一下的東西
SwiftUI的引擎應該也還沒啟動
以前Launch.storyboard也不能寫扣啊

  1. 首先我們先去Target裡的info
    可以看到 “Launch Screen” 的下面有 “UILaunchScreen”
    但這組key裡面並沒有value
    這時我們可以注意到,專案裡面的file tree竟然沒有以前熟悉的info.plist

  2. 在“UILaunchScreen”上點了“+”之後
    info.plist才生出來
    不過卻沒有任何key可以選

  3. 點右鍵看看plist的source code

  4. 才發現雖然外面名字不一樣
    但裡面的key卻重複了
    所以我們必須把第二個UILaunchScreen刪掉
    接下來就可以正常設定了
    有幾個屬性可以設定

    1. image
    2. safe area
    3. color
    4. navigation bar
    5. tab bar
    6. tool bar
  5. 首先,我們先來試試safe area的效果(感謝依舊帥氣的深情哥友情客串)
    開。

  6. 關。
    ....我是看不出來差在哪裡啦

  7. 再來試試bottom雙bar
    tab bar -> 下方留白較高

  8. tool bar -> 下方留白較矮

  9. 兩bar皆開 -> ...竟然跟tool bar一樣高
    這什麼邏輯我就不懂了...

  10. 說到底,上述的設定還是很陽春的
    除非你想只顯示一張大圖或是一個小logo在中間
    不然根本無法滿足需求
    沒辦法,只好走回老路子
    沒想到我們在第一關就被storyboard擊敗

先new個Launch.storyboard
拉好我們想要的畫面
然後設定Launch screen interface file base name
執行。
蝦米!
怎麼黑屏了

  1. 原來是忘了指定rootViewController
    勾選後,就可以正常顯示了

  2. 最後提醒,如果上述改動沒有生效,要重啟Simulator(重裝app沒用)

Tomorrow Preview


跨界學習系列文章

Android版:iOS Developer Learning Android. Lesson 03 - 專案相關設定 (實現iOS上的Target管理)
Flutter版:iOS Developer Learning Flutter. Lesson2 第一印象


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson1 = "Hello World"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson3 = "常用Modifier"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言