[1]SwiftUI

Text

Text(landmark.location)
	.font(.subheadline)//字體的大小
	.foregroundColor(.secondary)//secondary一個比較常用的灰色字體
    .padding(.all)//四周都設置空格

StackView

HStack 左右
VStack 上下
ZStack 前後

StackView裏面對其的方式

VStack(alignment:.leading) {
	******
}

ImageView

Image(landmark.imageName)
	.cornerRadius//邊角
	.resizable()//填充可變
	.aspectRatio(contentMode:zoomed ? .fill : .fit)//改變填充方式
	.frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: .infinity)//自定義frame的大小
	.onTapGesture {//事件的觸發
	                   withAnimation(.linear(duration: 1)){//只要因爲zoomed的改變而更新的數據，都有animation
	                       self.zoomed.toggle()//true和false的切換
   }
}

NavigationView

NavigationView {
//NavigationLink連接下一個視圖，視圖加括號進行傳值
	NavigationLink(destination: LandmarkDetail(landmark: landmark)){
            Image(landmark.thumbnailName)
                .cornerRadius(8)
            VStack(alignment: .leading) {
                Text(landmark.name)
                Text(landmark.location)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
}
.navigationBarTitle(Text("****"))//Navigation標題

TableView

List(landmarks) { landmark in
                
//list ForEach等要求被循環的每個元素都有一個唯一標識符
//兩種方法：
//1.ArrayData.identified(by:\.id)id爲每個元素的唯一標識符屬性
//2.數組中元素遵循Identifiable id用UUID結構體
   ******
}

上述的方法2:

struct Landmark : Identifiable {
    var id = UUID()
}

ExtractedView
用ExtractedView分離子視圖簡化代碼,括號內進行傳值

struct ContentView: View {
    var body: some View {
        
    LandmarkCell(landmark: landmark)//用ExtractedView分離子視圖簡化代碼,括號內進行傳值
    }
}

struct LandmarkCell : View {
    
    let landmark:Landmark
    var body: some View {
    	*****
    }
}

Animation

@State var zoomed = false //使得可以改變該值，並且在改變該值之後自動重新運行程序

withAnimation(.linear(duration: 1)){//只要因爲zoomed的改變而更新的數據，都有animation
	self.zoomed.toggle()//true和falsehq的切換
}

if !zoomed {
    Text(landmark.location)
        .font(.largeTitle)
        .foregroundColor(.secondary)
        .padding(.all)
        .transition(.move(edge: .trailing))//大小改變是ainimate移動是transition
            }

調試

靜態的模型顯現

struct LandmarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView{
            LandmarkDetail(landmark: landmarks[0])
        }
    }
}

SceneDelegate

生命週期函數的管理者由AppDelegate改爲SceneDelagate

if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: contentView)//決定rootview的位置即啓動之後的第一個頁面。
            self.window = window
            window.makeKeyAndVisible()
        }

ContentView：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(landmarks) { landmark in
                
                //list ForEach等要求被循環的每個元素都有一個唯一標識符
                //兩種方法：
                //1.ArrayData.identified(by:\.id)id爲每個元素的唯一標識符屬性
                //2.數組中元素遵循Identifiable id用UUID結構體
                
                LandmarkCell(landmark: landmark)//用ExtractedView分離子視圖簡化代碼
            }
            .navigationBarTitle(Text("世界地標"))
        }
    }
}

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

struct LandmarkCell : View {
    
    let landmark:Landmark
    var body: some View {
        NavigationLink(destination: LandmarkDetail(landmark: landmark)){
            Image(landmark.thumbnailName)
                .cornerRadius(8)
            VStack(alignment: .leading) {
                Text(landmark.name)
                Text(landmark.location)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

LandmarkDetail：

import SwiftUI

struct LandmarkDetail: View {
    
    let landmark:Landmark
    @State var zoomed = false //使得可以改變該值，並且在改變該值之後自動重新運行程序
    
    
    var body: some View {
        ZStack(alignment:.bottomTrailing) {
            Image(landmark.imageName)
                .resizable()
                .aspectRatio(contentMode:zoomed ? .fill : .fit)
                .navigationBarTitle(Text(landmark.name),displayMode: .inline)
                .frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: .infinity)
                .onTapGesture {//事件的觸發
                    withAnimation(.linear(duration: 1)){//只要因爲zoomed的改變而更新的數據，都有animation
                        self.zoomed.toggle()//true和falsehq的切換
                    }
            }
            
            if !zoomed {
                Text(landmark.location)
                    .font(.largeTitle)
                    .foregroundColor(.secondary)
                    .padding(.all)
                    .transition(.move(edge: .trailing))//大小改變是ainimate移動是transition
            }
            
        }
    }
}

struct LandmarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView{
            LandmarkDetail(landmark: landmarks[0])
        }
    }
}