柚子快報(bào)邀請碼778899分享：ios SwiftUI入門篇

http://yzkb.51969.com/

1.?介紹

SwiftUI是由蘋果公司推出的現(xiàn)代化用戶界面（UI）框架，用于開發(fā)iOS、macOS、watchOS和tvOS應(yīng)用程序。它于2019年首次發(fā)布，是蘋果在Swift編程語言之上的一層抽象，旨在簡化和改進(jìn)應(yīng)用程序的UI開發(fā)過程。相比UIKit具有多方面的優(yōu)勢和特點(diǎn)，這些特點(diǎn)使得它成為iOS和其他Apple平臺(tái)開發(fā)中的強(qiáng)大工具：

????????聲明式語法：

SwiftUI：開發(fā)者通過簡單的Swift代碼描述UI的結(jié)構(gòu)和外觀，采用聲明式語法。這種方式比傳統(tǒng)的UIKit的命令式編程風(fēng)格更直觀和易于理解。

UIKit：開發(fā)者需要編寫大量的代碼來配置和管理UI元素的屬性和行為，這種方式容易導(dǎo)致代碼的復(fù)雜性和難以維護(hù)性。

????????實(shí)時(shí)預(yù)覽和交互性：

SwiftUI：結(jié)合Xcode的實(shí)時(shí)預(yù)覽功能，開發(fā)者可以即時(shí)查看和交互他們所寫的UI代碼，無需在模擬器或真機(jī)上運(yùn)行應(yīng)用程序。

UIKit：開發(fā)者需要不斷地在模擬器或真機(jī)上運(yùn)行應(yīng)用程序來查看UI效果，這增加了開發(fā)周期和調(diào)試的復(fù)雜性。

???????????????????????????????????????????跨平臺(tái)開發(fā)：

SwiftUI：支持iOS、macOS、watchOS和tvOS平臺(tái)的開發(fā)，可以共享大部分代碼和UI邏輯，減少了重復(fù)工作。UIKit：雖然UIKit也能夠跨平臺(tái)開發(fā)，但是每個(gè)平臺(tái)之間的UI代碼和布局通常需要顯著的適配和調(diào)整。

????????自動(dòng)化布局：

SwiftUI：提供了一系列簡單且強(qiáng)大的布局視圖（如VStack、HStack、ZStack等），幫助開發(fā)者輕松地實(shí)現(xiàn)復(fù)雜的UI布局。

UIKit：雖然Auto Layout提供了強(qiáng)大的布局管理系統(tǒng)，但是配置和管理約束條件需要編寫大量的代碼，對于復(fù)雜布局來說較為繁瑣。

????????狀態(tài)管理和數(shù)據(jù)綁定：

SwiftUI：引入了屬性綁定（@State、@Binding）和狀態(tài)對象（@StateObject、@ObservedObject），使得數(shù)據(jù)與UI視圖之間的綁定更加簡單和直觀。

UIKit：開發(fā)者需要手動(dòng)管理數(shù)據(jù)和UI視圖之間的同步，通常需要使用委托、通知或KVO等模式。

????????現(xiàn)代化設(shè)計(jì)支持：

SwiftUI：內(nèi)置支持現(xiàn)代化設(shè)計(jì)語言，如暗黑模式、動(dòng)態(tài)字體調(diào)整等，能夠自動(dòng)響應(yīng)系統(tǒng)級別的外觀變化。

UIKit：雖然也能夠支持現(xiàn)代化設(shè)計(jì)語言，但是需要開發(fā)者顯式地處理外觀變化和主題切換。

綜上所述，SwiftUI通過其聲明式語法、實(shí)時(shí)預(yù)覽、跨平臺(tái)開發(fā)支持以及更簡單的布局和狀態(tài)管理等特點(diǎn)，顯著提升了iOS開發(fā)的效率和開發(fā)體驗(yàn)，使得開發(fā)者能夠更快速地構(gòu)建出現(xiàn)代化和響應(yīng)式的應(yīng)用程序。

2.?環(huán)境搭建

????????2.1?Xcode安裝和配置

從Mac AppStore或者蘋果開發(fā)者網(wǎng)站?Sign In - Apple?下載并安裝Xcode，可以依據(jù)需要，安裝iPhone/iPad/Apple VisionPro模擬器，支持模擬器/真機(jī)調(diào)試。

2.2?創(chuàng)建第一個(gè)SwiftUI項(xiàng)目

打開Xcode，創(chuàng)建新項(xiàng)目，配置項(xiàng)目信息：

名稱（e.g:“MyFirstSwiftUIApp”）

組織標(biāo)識(shí)符（e.g:“com.yourcompany”）

選擇開發(fā)團(tuán)隊(duì)

選擇開發(fā)語言（Swift或Objective-C）和界面（Storyboard或SwiftUI）

即可創(chuàng)建并預(yù)覽項(xiàng)目，運(yùn)行第一個(gè)SwiftUI項(xiàng)目。

3.?SwiftUI基礎(chǔ)

3.1?SwiftUI的視圖結(jié)構(gòu)和聲明式語法

3.1.1?視圖結(jié)構(gòu)

SwiftUI的視圖結(jié)構(gòu)是基于一種嵌套和組合的方式來構(gòu)建UI界面的，核心的視圖類型包括：

????????View：所有的UI組件都是視圖（View）。視圖可以是簡單的文本、圖像，也可以是更復(fù)雜的組合視圖。

????????Container Views：這些視圖用于組合其他視圖，常見的容器視圖包括：

VStack：垂直堆棧，將子視圖垂直排列。

HStack：水平堆棧，將子視圖水平排列。

ZStack：層疊視圖，將子視圖層疊在一起。

List：列表視圖，顯示動(dòng)態(tài)內(nèi)容列表。

????????Control Views：用于用戶交互的視圖，如按鈕（Button）、滑塊（Slider）、文本輸入框（TextField）等。

????????Modifier：修飾符可以應(yīng)用于視圖，以更改其外觀或行為。例如，.foregroundColor(.blue)可以設(shè)置文本顏色為藍(lán)色。

3.1.2?聲明式語法

SwiftUI使用聲明式語法來描述UI的外觀和行為，與傳統(tǒng)的命令式編程風(fēng)格有顯著不同。聲明式語法的關(guān)鍵點(diǎn)包括：

????????簡單和直觀：您只需描述UI應(yīng)該顯示什么樣子，而不是告訴計(jì)算機(jī)如何繪制它。

????????無需手動(dòng)更新：當(dāng)視圖的狀態(tài)（state）發(fā)生變化時(shí)，SwiftUI會(huì)自動(dòng)更新視圖的顯示，而不需要手動(dòng)管理UI的刷新。

????????數(shù)據(jù)驅(qū)動(dòng)：視圖通常會(huì)綁定到某些數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，視圖會(huì)相應(yīng)地更新。這通過屬性綁定（@State、@Binding）、狀態(tài)對象（@StateObject、@ObservedObject）來實(shí)現(xiàn)。

????????組合性：可以將小的視圖組合成更大的視圖，形成復(fù)雜的UI結(jié)構(gòu)。這種組合性使得UI的構(gòu)建更加靈活和模塊化。

????????預(yù)覽功能：Xcode的實(shí)時(shí)預(yù)覽功能允許開發(fā)者在編寫代碼時(shí)即時(shí)看到UI的外觀，這大大提高了開發(fā)效率。

3.1.3?示例代碼

下面是一個(gè)簡單的SwiftUI代碼示例，展示了視圖結(jié)構(gòu)和聲明式語法的應(yīng)用：

import SwiftUI

struct ContentView: View {

????@State private var isButtonVisible = true??// 屬性包裝器用于管理視圖狀態(tài)

????

????var body: some View {

????????VStack { // 垂直堆棧視圖 (VStack)

????????????Text("Hello, SwiftUI!") // 簡單文本視圖

????????????

????????????if isButtonVisible {

????????????????Button("Toggle Button") {

????????????????????self.isButtonVisible.toggle()

????????????????}

????????????}

????????}

????????.padding() // 修飾符，添加內(nèi)邊距

????}

}

// 實(shí)時(shí)預(yù)覽

struct ContentView_Previews: PreviewProvider {

????static var previews: some View {

????????ContentView()

????}

}

3.2?布局和視圖組合

在SwiftUI中，布局和視圖組合是構(gòu)建用戶界面的關(guān)鍵部分。SwiftUI提供了一系列容器視圖和布局視圖，使得開發(fā)者能夠以簡單和直觀的方式創(chuàng)建復(fù)雜的布局和組合視圖。

3.2.1?布局視圖

SwiftUI中的布局視圖是用來排列和組織其他視圖的容器，常用的布局視圖包括：

VStack：垂直堆棧視圖，將子視圖垂直排列。

VStack {

????Text("Item 1")

????Text("Item 2")

????Text("Item 3")

}

HStack：水平堆棧視圖，將子視圖水平排列。

HStack {

????Text("Left")

????Spacer()

????Text("Right")

}

ZStack：層疊視圖，將子視圖層疊在一起。

ZStack {

????Circle()

????????.foregroundColor(.blue)

????????.frame(width: 100, height: 100)

????

????Text("Centered Text")

????????.foregroundColor(.white)

}

List：列表視圖，用于顯示動(dòng)態(tài)內(nèi)容列表。

List {

????Text("Item 1")

????Text("Item 2")

????Text("Item 3")

}

Form：表單視圖，用于顯示表單和輸入控件。

Form {

????TextField("Username", text: $username)

????SecureField("Password", text: $password)

????Button("Login") {

????????// Login action

????}

}

3.2.2?視圖組合

視圖組合是指將多個(gè)視圖組合在一起形成復(fù)雜的UI結(jié)構(gòu)，可以通過嵌套不同的布局視圖和控件視圖來實(shí)現(xiàn)。例如：???????

VStack {

????Text("Welcome to SwiftUI!")

????????.font(.largeTitle)

????

????HStack {

????????Image(systemName: "star.fill")

????????????.foregroundColor(.yellow)

????????Text("SwiftUI Basics")

????????????.font(.title)

????}

????

????Spacer()

????

????Button("Get Started") {

????????// Action to start the app

????}

????.padding()

}

.padding()

在這個(gè)例子中：

使用?VStack?將視圖垂直堆疊。

在?VStack?中使用?HStack?將圖標(biāo)和標(biāo)題水平排列。

使用?Spacer()?在垂直堆棧中創(chuàng)建一個(gè)可伸縮的空間。

在底部添加一個(gè)帶有動(dòng)作的按鈕，并對其進(jìn)行內(nèi)邊距修飾。

4.?基本組件

4.1?文本（Text）

Text?是用來顯示文本內(nèi)容的視圖組件。它允許您在應(yīng)用程序中輕松地顯示靜態(tài)和動(dòng)態(tài)文本，同時(shí)支持對文本進(jìn)行樣式和布局設(shè)置。讓我們來詳細(xì)了解?Text?的用法和一些常見的樣式設(shè)置。

4.1.1?基本用法

使用?Text?最簡單的方式是傳入一個(gè)字符串作為其內(nèi)容：

struct ContentView: View {

????var body: some View {

????????Text("Hello, SwiftUI!")

????}

}

4.1.2?樣式設(shè)置

通過在?Text?上使用修飾符來設(shè)置文本的樣式，比如字體、顏色、對齊方式等。

字體和顏色

Text("Welcome")

????.font(.title)

????.foregroundColor(.blue)

對齊方式

Text("Centered Text")

????.multilineTextAlignment(.center)

加粗和斜體

Text("Bold and Italic")

????.bold()

????.italic()

4.1.3?動(dòng)態(tài)文本

在?Text?中使用字符串插值或者變量來顯示動(dòng)態(tài)文本內(nèi)容。例如：

struct ContentView: View {

????let username = "John Doe"

????

????var body: some View {

????????Text("Welcome, \(username)!")

????????????.font(.headline)

????????????.foregroundColor(.green)

????}

}

4.1.4?多行文本

如果文本內(nèi)容較長或者需要顯示多行文本，您可以使用?Text?的?lineLimit(nil)?和?multilineTextAlignment()?來設(shè)置文本的行數(shù)限制和對齊方式。

Text("This is a long text that may span multiple lines depending on the available space.")

????.lineLimit(nil)

????.multilineTextAlignment(.leading)

4.2?圖像（Image）

Image?是用來顯示圖像內(nèi)容的視圖組件。它允許您在應(yīng)用程序中加載和顯示圖像，并支持對圖像進(jìn)行大小調(diào)整、裁剪和其他樣式設(shè)置。讓我們來詳細(xì)了解?Image?的用法和一些常見的樣式設(shè)置。

4.2.1?基本用法

使用?Image?最簡單的方式是指定圖像的名稱，SwiftUI會(huì)自動(dòng)查找和加載相應(yīng)的圖像資源。通常，您需要將圖像資源添加到項(xiàng)目的?Assets.xcassets?中。

struct ContentView: View {

????var body: some View {

????????Image("yourImageName")

????}

}

4.2.2?圖像樣式和調(diào)整

圖像調(diào)整

可以使用修飾符來調(diào)整圖像的大小、比例和裁剪。

Image("yourImageName")

????.resizable() // 可調(diào)整大小

????.scaledToFit() // 按原始寬高比縮放適合父視圖

????.frame(width: 200, height: 200) // 設(shè)置框架大小

圖像修飾

可以對圖像進(jìn)行進(jìn)一步的修飾，例如添加圓角、邊框或者使用遮罩。

Image("yourImageName")

????.resizable()

????.clipShape(Circle()) // 添加圓形遮罩

????.overlay(Circle().stroke(Color.blue, lineWidth: 4)) // 添加藍(lán)色邊框

????.shadow(radius: 10) // 添加陰影效果

4.2.3?加載網(wǎng)絡(luò)圖像

要加載來自URL的圖像，可以使用?URLImage?庫或者自定義?View。以下是一個(gè)簡單的示例，演示如何加載網(wǎng)絡(luò)圖像：

struct RemoteImage: View {

????var imageUrl: String

????

????var body: some View {

????????if let url = URL(string: imageUrl), let imageData = try? Data(contentsOf: url) {

????????????Image(uiImage: UIImage(data: imageData)!)

????????????????.resizable()

????????????????.scaledToFit()

????????????????.frame(width: 200, height: 200)

????????} else {

????????????Text("Image not found")

????????}

????}

}

struct ContentView: View {

????var body: some View {

????????RemoteImage(imageUrl: "https://example.com/yourImage.jpg")

????}

}

4.3?按鈕（Button）

Button?是用來創(chuàng)建用戶可以點(diǎn)擊的交互性控件。它允許您在應(yīng)用程序中添加按鈕，以觸發(fā)各種操作和響應(yīng)用戶的輸入。讓我們來詳細(xì)了解?Button?的用法和一些常見的設(shè)置。

4.3.1?基本用法

使用?Button?最簡單的方式是在其構(gòu)造函數(shù)中傳入一個(gè)視圖（通常是?Text?或者?Image），作為按鈕的標(biāo)簽。

struct ContentView: View {

????var body: some View {

????????Button(action: {

????????????// 點(diǎn)擊按鈕后的操作

????????????print("Button tapped!")

????????}) {

????????????Text("Tap me!")

????????????????.font(.title)

????????????????.foregroundColor(.white)

????????????????.padding()

????????????????.background(Color.blue)

????????????????.cornerRadius(10)

????????}

????}

}

4.3.2?按鈕樣式和修飾

自定義按鈕樣式

可以通過添加不同的修飾符來自定義按鈕的外觀和行為。

Button(action: {

????// 點(diǎn)擊按鈕后的操作

}) {

????HStack {

????????Image(systemName: "person.fill")

????????Text("Login")

????????????.fontWeight(.semibold)

????}

????.padding()

????.foregroundColor(.white)

????.background(Color.green)

????.cornerRadius(8)

????.shadow(radius: 5)

}

動(dòng)態(tài)按鈕

可以根據(jù)視圖狀態(tài)來動(dòng)態(tài)更改按鈕的標(biāo)簽或樣式。

struct ContentView: View {

????@State private var isLogged = false

????

????var body: some View {

????????Button(action: {

????????????self.isLogged.toggle()

????????}) {

????????????Text(isLogged ? "Logout" : "Login")

????????????????.fontWeight(.semibold)

????????????????.padding()

????????????????.foregroundColor(.white)

????????????????.background(isLogged ? Color.red : Color.blue)

????????????????.cornerRadius(8)

????????}

????}

}

4.3.3?按鈕響應(yīng)和動(dòng)作

每個(gè)按鈕都需要一個(gè)操作（action），當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)操作會(huì)被觸發(fā)。操作通常是一個(gè)閉包，用于定義按鈕點(diǎn)擊后的行為。

Button(action: {

????print("Button tapped!")

}) {

????Text("Tap me!")

}

???????5.?列表和導(dǎo)航

5.1?列表視圖（List）

List?是一個(gè)用于顯示可滾動(dòng)的內(nèi)容列表的視圖組件。List?適用于展示動(dòng)態(tài)和靜態(tài)數(shù)據(jù)，它支持多種自定義選項(xiàng)和交互功能。下面是對?List?視圖的詳細(xì)介紹，包括基本用法、動(dòng)態(tài)數(shù)據(jù)展示和自定義樣式。

5.1.1?基本用法

要?jiǎng)?chuàng)建一個(gè)簡單的列表視圖，您只需將視圖內(nèi)容傳遞給?List?？梢杂渺o態(tài)內(nèi)容或動(dòng)態(tài)數(shù)據(jù)來填充列表項(xiàng)。

靜態(tài)內(nèi)容

struct ContentView: View {

????var body: some View {

????????List { // 顯示了三個(gè)列表項(xiàng)

????????????Text("Item 1")

????????????Text("Item 2")

????????????Text("Item 3")

????????}

????}

}

???????

5.1.2?動(dòng)態(tài)數(shù)據(jù)

通常情況下，List?用于展示動(dòng)態(tài)數(shù)據(jù)，您可以將數(shù)據(jù)綁定到?List?中，從而實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)的UI更新。

基本動(dòng)態(tài)數(shù)據(jù)

struct ContentView: View {

????let items = ["Item 1", "Item 2", "Item 3", "Item 4"]

????

????var body: some View {

????????List(items, id: \.self) { item in

????????????Text(item)

????????}

????}

}

使用自定義數(shù)據(jù)模型

struct Item: Identifiable {

????var id = UUID()

????var name: String

????var detail: String

}

struct ContentView: View {

????let items = [

????????Item(name: "Item 1", detail: "Detail 1"),

????????Item(name: "Item 2", detail: "Detail 2"),

????????Item(name: "Item 3", detail: "Detail 3")

????]

????

????var body: some View {

????????List(items) { item in

????????????VStack(alignment: .leading) {

????????????????Text(item.name)

????????????????????.font(.headline)

????????????????Text(item.detail)

????????????????????.font(.subheadline)

????????????}

????????????.padding()

????????}

????}

}

如果您的數(shù)據(jù)模型更加復(fù)雜，可以創(chuàng)建一個(gè)自定義的結(jié)構(gòu)體并使用它。

???????

5.1.3?自定義列表項(xiàng)

可以自定義每個(gè)列表項(xiàng)的視圖，添加更多的視圖元素和樣式。

struct Item: Identifiable {

????var id = UUID()

????var name: String

????var detail: String

}

struct ContentView: View {

????let items = [

????????Item(name: "Item 1", detail: "Detail 1"),

????????Item(name: "Item 2", detail: "Detail 2"),

????????Item(name: "Item 3", detail: "Detail 3")

????]

????

????var body: some View {

????????List(items) { item in

????????????VStack(alignment: .leading) {

????????????????Text(item.name)

????????????????????.font(.headline)

????????????????Text(item.detail)

????????????????????.font(.subheadline)

????????????}

????????????.padding()

????????}

????}

}

5.1.4?列表的交互

List?支持多種交互功能，如行的刪除、移動(dòng)等。

刪除列表項(xiàng)

struct ContentView: View {

????@State private var items = ["Item 1", "Item 2", "Item 3"]

????

????var body: some View {

????????List {

????????????ForEach(items, id: \.self) { item in

????????????????Text(item)

????????????}

????????????.onDelete(perform: delete) // 修飾符允許用戶從列表中刪除項(xiàng)目

????????}

????}

????

????func delete(at offsets: IndexSet) {

????????items.remove(atOffsets: offsets)

????}

}

移動(dòng)列表項(xiàng)

struct ContentView: View {

????@State private var items = ["Item 1", "Item 2", "Item 3"]

????

????var body: some View {

????????List {

????????????ForEach(items, id: \.self) { item in

????????????????Text(item)

????????????}

????????????.onMove(perform: move) // 修飾符允許用戶移動(dòng)列表中的項(xiàng)目

????????}

????????.navigationBarItems(trailing: EditButton()) // 進(jìn)入編輯模式的按鈕

????}

????

????func move(from source: IndexSet, to destination: Int) {

????????items.move(fromOffsets: source, toOffset: destination)

????}

}

5.2?導(dǎo)航視圖（NavigationView）

NavigationView?是用于在應(yīng)用程序中創(chuàng)建導(dǎo)航層次結(jié)構(gòu)的視圖容器。它允許用戶通過導(dǎo)航鏈接（NavigationLink）在不同的視圖之間切換，并提供了導(dǎo)航欄的功能，如標(biāo)題、按鈕和其他交互元素。下面是對?NavigationView?的詳細(xì)介紹，包括基本用法、導(dǎo)航鏈接、以及自定義導(dǎo)航欄。

5.2.1?基本用法

NavigationView?包裹在其他視圖的外層，提供導(dǎo)航和管理導(dǎo)航層次結(jié)構(gòu)的功能。

struct ContentView: View {

????var body: some View {

????????NavigationView {

????????????Text("Welcome to SwiftUI")

????????????????.navigationTitle("Home")

????????}

????}

}

5.2.2?導(dǎo)航鏈接

NavigationLink?用于在視圖之間創(chuàng)建導(dǎo)航鏈接。當(dāng)用戶點(diǎn)擊鏈接時(shí)，會(huì)推送目標(biāo)視圖到導(dǎo)航堆棧中。

基本導(dǎo)航鏈接

struct ContentView: View {

????var body: some View {

????????NavigationView {

????????????VStack {

????????????????NavigationLink(destination: DetailView()) { //創(chuàng)建了一個(gè)可以點(diǎn)擊的區(qū)域，點(diǎn)擊時(shí)會(huì)導(dǎo)航到 DetailView

????????????????????Text("Go to Detail View")

????????????????}

????????????????.padding()

????????????}

????????????.navigationTitle("Home")

????????}

????}

}

struct DetailView: View { //顯示了一個(gè)簡單的文本，并設(shè)置了導(dǎo)航欄標(biāo)題為 "Detail"

????var body: some View {

????????Text("This is the detail view")

????????????.navigationTitle("Detail")

????}

}

導(dǎo)航鏈接與數(shù)據(jù)

還可以通過導(dǎo)航鏈接傳遞數(shù)據(jù)到目標(biāo)視圖。

???????

struct ContentView: View {

????let items = ["Item 1", "Item 2", "Item 3"]

????

????var body: some View {

????????NavigationView {

????????????List(items, id: \.self) { item in

????????????????NavigationLink(destination: DetailView(item: item)) {

????????????????????Text(item)

????????????????}

????????????}

????????????.navigationTitle("Items")

????????}

????}

}

struct DetailView: View {// 接受一個(gè) item 參數(shù)，通過 NavigationLink 將選中的項(xiàng)傳遞到目標(biāo)視圖。

????let item: String

????

????var body: some View {

????????Text("Detail for \(item)")

????????????.navigationTitle(item)

????}

}

5.2.3?自定義導(dǎo)航欄

NavigationView?提供了一些方法來定制導(dǎo)航欄的外觀和行為，例如添加按鈕或修改標(biāo)題。

添加導(dǎo)航欄按鈕

struct ContentView: View {

????var body: some View {

????????NavigationView {

????????????VStack {

????????????????Text("Welcome to SwiftUI")

????????????}

????????????.navigationTitle("Home")

????????????.navigationBarItems(trailing: Button(action: {

????????????????// 右側(cè)按鈕的動(dòng)作

????????????????print("Edit tapped")

????????????}) {

????????????????Image(systemName: "pencil")

????????????})

????????}

????}

}

使用自定義視圖作為導(dǎo)航欄標(biāo)題

可以使用自定義視圖作為導(dǎo)航欄標(biāo)題，以實(shí)現(xiàn)更多樣的設(shè)計(jì)。

struct ContentView: View {

????var body: some View {

????????NavigationView {

????????????VStack {

????????????????Text("Welcome to SwiftUI")

????????????}

????????????.navigationTitle("Home")

????????????.navigationBarTitleDisplayMode(.inline)

????????????.navigationBarItems(leading: HStack {

????????????????Image(systemName: "star.fill")

????????????????Text("Favorites")

????????????})

????????}

????}

}

5.2.4?導(dǎo)航欄樣式

可以調(diào)整導(dǎo)航欄的樣式，例如背景顏色、透明度等。

???????

struct ContentView: View {

????init() {

????????UINavigationBar.appearance().backgroundColor = UIColor.systemTeal

????????UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]

????}

????

????var body: some View {

????????NavigationView {

????????????VStack {

????????????????Text("Welcome to SwiftUI")

????????????}

????????????.navigationTitle("Home")

????????????.navigationBarTitleDisplayMode(.large)

????????}

????}

}

柚子快報(bào)邀請碼778899分享：ios SwiftUI入門篇

http://yzkb.51969.com/

相關(guān)閱讀