ios開發-swiftui基於xcode11

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。

發佈了23 篇原創文章 · 獲贊 8 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章