1.創建xcodeProject
2.選擇single View App,下一步
3.選擇SwiftUi,下一步,選擇某個位置保存你的項目
4.選中ContentView.swift
內容展示
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")///修改一下,比如改爲“你好世界”或者“你好王八蛋”然後直接運行。先感受一下swiftui的helloworld
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
5.解釋一下上面代碼的含義:首先是兩個結構體struct 。第一個實現view協議並且描述了這個視圖的佈局和內容。第二個結構聲明瞭該視圖的預覽。具體是什麼作用呢?就是提供上面結構體的預覽視圖,預覽時圖就是這個。
右側就是swiftui的實時預覽圖。
有可能顯示成這樣。此時你需要點擊右上角的Resume
6.接上面,ok這時你應該已經看到代碼的實時預覽。我們接着繼續搞,或許我們可以自定義一個TextView。swift已經使用了“.”語法。所以
可以試試這樣
Text("12123").font(.title).foregroundColor(.red)
忽然打開了新世界。好簡單啊。有木有!!
7.在你的實時預覽中選中你的Text,
就像這樣,你可以使用Inspect進行Text屬性的自定義。按你的腦子來,隨意折騰
可以修改文本內容,字體顏色,字體大小。。。等等。
8.到了這裏text組件基本瞭解。我們再看看swiftui怎麼佈局呢,只有組件肯定不行哦
在選中文本的時候,彈出框中,有這樣的內容
可以自己點擊看看同時對照代碼,看看會發生什麼
VStack {
Text("你嚇跑了我的雅美蝶") .font(.title)
Text("你賠我")
}
看看這個長什麼樣子。
然後看看
HStack {
Text("你嚇跑了我的雅美蝶") .font(.title)
Text("你賠我")
}
長什麼樣子,一切就會了然於胸了。
9.Text組件和Vstack以及HStack已經介紹。下面再來一波Image View 。這樣圖文並茂,也就顯得內容充實了
先導入一張圖片
導入以後,可以這樣操作
Image("turtlerock") ///turtlerock是你的圖片名稱
你可以使用系統提供的api進行圖片的修改
比如這樣Image("turtlerock") .clipShape(Circle())。
10.總結回顧,小作業。
圖片組件-文本組件-佈局組件,都已經學完。今天做一個
訂單item吧,作爲擴展,學習一下Button。