SwiftUI学习<二>

1、@State和withAnimation：

struct LandmarkDetail: View {
    let landmark: Landmark
    @State var zoomed = false // 结构体属性不能修改值,添加@State即可
    
    var body: some View {
        // 叠加效果
        ZStack(alignment: .bottomTrailing) {
            Image("Windmill")
                .resizable()
                .aspectRatio(contentMode: zoomed ? .fill : .fit)
                .navigationBarTitle("试试", displayMode: .inline)
                // 让文字靠最下显示
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .onTapGesture {
                    // 添加动画效果
                    withAnimation {
                        zoomed.toggle() // 直接修改属性值取反
                        // reloadData
                    }
                }
            if !zoomed { // 文字显示与否
                Text("北京呀~")
                    .font(.largeTitle)
                    .foregroundColor(.secondary)
            }
        }
    }
}

2、效果实现：

image.png

struct LandmarkDetail: View {
    var body: some View {
        VStack {
            Image("Windmill")
                .clipShape(Circle()) // 圆形
                .overlay(Circle().stroke(Color.red, lineWidth: 4)) // 外圈遮罩
                .shadow(radius: 10) // 阴影
            VStack(alignment: .leading, spacing: 8) { // vstack间隔
                Text("东方明珠")
                    .font(.title)
                HStack {
                    Text("上海")
                        .font(.subheadline)
                    // 两端对齐
                    Spacer()
                    Text("上海市")
                        .font(.subheadline)
                }
            }
        }
        .padding()  // 全部间隔
    }
}

3、MKMapView的使用：

image.png

import SwiftUI

struct LandmarkDetail: View {
    var body: some View {
        VStack {
            MapView()
                .edgesIgnoringSafeArea(.top)
                .frame(height: 350)
            Image("Windmill")
                .clipShape(Circle()) // 圆形
                .overlay(Circle().stroke(Color.red, lineWidth: 4)) // 外圈遮罩
                .shadow(radius: 10) // 阴影
                // 叠加效果 一定要在最后设置
                .offset(x: 0, y: -130)
                .padding(.bottom, -130)
            VStack(alignment: .leading, spacing: 8) { // vstack间隔
                Text("东方明珠")
                    .font(.title)
                HStack {
                    Text("上海")
                        .font(.subheadline)
                    // 两端对齐
                    Spacer()
                    Text("上海市")
                        .font(.subheadline)
                }
            }
            .padding()  // 全部间隔
            Spacer()
        }
        .navigationTitle(Text("天安门"))
    }
}

struct LandmarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            LandmarkDetail()
        }
    }
}

4、显示设备名称：

import SwiftUI

struct LandMarkList: View {
    var body: some View {
        NavigationView {
            List {
                // Switch
                Toggle(isOn: .constant(true), label: {
                    Text("只显示收藏")
                })
                ForEach(landmarks) { landmark in
                    NavigationLink(destination: LandmarkDetail(landmark: landmarks[0])) {
                        LandMarkCell(landmark: landmark)
                    }
                }
            }
            .navigationTitle(Text("中国地标"))
        }
    }
}

struct LandMarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandMarkList()
            .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
            .previewDisplayName("iPhone 8")
        LandMarkList()
            .previewDevice(PreviewDevice(rawValue: "iPhone XS"))
            .previewDisplayName("iPhone XS")
//        ForEach(["iPhone 8", "iPhone XS"].identified(by: \.self)) { deviceName in
//            LandMarkList()
//                .previewDevice(PreviewDevice(rawValue: deviceName))
//                .previewDisplayName(deviceName)
//            LandMarkList()
//        }
    }
}