1. 程式人生 >實用技巧 >其它 >SwiftUI 學習筆記(一) 開篇

SwiftUI 學習筆記(一) 開篇


技術標籤:iosswift

接觸到SwiftUI純屬偶然。

學校老師佈置作業,小孩要拍照上傳作業到釘釘,微信裡面。直接通過微信,釘釘拍照上傳的圖片是沒有經過處理的,考慮到老師的負擔,我負責幫娃娃對圖片進行黑白處理,這樣老師收到圖片後可以很好的閱讀。首先下載了【掃描全能王】,拍照處理成黑白後再導到相簿中,再通過釘釘上傳。偶爾一次我就做了,經常要這麼玩,有點不高興了,閒來無事,就決定自己寫一個拍照處理再分享到釘釘的APP吧。

影象處理嘛,剛好也用java玩過opencv,那就在App裡呼叫Opencv來處理就好了,本來一開始想用React-Native來做,一看要整合opencv很麻煩,那就再查查swift整合opencv吧,還不錯,有一個專案整合非常簡單,那就上swift吧。

工作時一直在Windows平臺上開發,蘋果釋出的新功能我也不知道,也不管了,開啟OSX機器,啟動xcode,一路Next下去,一個工程建好了。開工,一看自動生成的程式碼,咦,怎麼看不懂,也沒有看到storyboard,一下就蒙了,我好像還是習慣很久以前的Object-C嘛。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

這個程式碼,完全不懂嘛。網上查了一下,哦,SwiftUI是蘋果最近推出的東西,好像和我以前玩過的React-Native, Flutter有點像啊,正好,那就來練練手吧。

好吧,先來畫一個基本畫面看看,如果確實簡單,那就用SwiftUI來玩玩吧。

SwiftUI 學習筆記(一) 開篇

寫一個TabView,很簡單嘛,就和Flutter, React-Native差不多嘛。

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView{
            Text("Page1").padding()
                .tabItem { Image(systemName: "house") }
            Text("About").padding()
                .tabItem { Image(systemName: "person") }
        }
    }
}

嗯,馬上加一個導航條,首頁來個List,應該很簡單啊。改程式碼,開工,第一個TabItem使用導航條

struct HomeView: View {
    var body: some View {
        NavigationView{
            List{
                NavigationLink(
                destination: Text("Destination"),
                label: {
                    Text("導航條1")
                })
            NavigationLink(
                destination: Text("Destination Page"),
                label: {
                    Text("導航條2")
                })
            }.navigationBarTitle("首頁", displayMode: .inline)
        }
    }
}


struct ContentView: View {
    var body: some View {
        TabView{
            HomeView()
                .tabItem { Image(systemName: "house") }
            Text("About").padding()
                .tabItem { Image(systemName: "person") }
        }
    }
}

SwiftUI 學習筆記(一) 開篇

很輕鬆出來了啊。沒事介面點幾下,咦,不對啊,問題來了,進入導航頁面後,下面的TabBar不隱藏!!!

SwiftUI 學習筆記(一) 開篇

暈了,網上查關鍵字,SwiftUI hide tabbar, SwiftUI hide tabview,來來回回就是那幾個答案,要在每個subview中去處理!!!這個好像不符合我的想法吧。做Subview的時候為啥要去管誰呼叫啊!不是要鬆耦合嘛。好吧,再調查,有人說要把NavigationView放在TabView一起,嗯,確實好用,但是。。。問題來了,點選Tab,裡面的內容沒問題,會隨著tab變化,但頂部一直顯示【首頁】啊,不是應該點選Tab的時候,頂部應該在【首頁】,【關於】之間變動嗎?好吧,保留問題,繼續調查。