[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])
        }
    }
}

发布了19 篇原创文章 · 获赞 8 · 访问量 1454

猜你喜欢

转载自blog.csdn.net/qq_44864362/article/details/104103551