SwiftUI做个具有现代感的卡片(2020年教程)

SwiftUI基础之Stack容器的使用VStack HStack

预期效果

SwiftUI做个具有现代感的卡片(2020年教程)_第1张图片

代码

import SwiftUI

struct InfoStackView: View {
    var body: some View {
        HStack {
            
            Image("circle")
                .resizable()
                .scaledToFit()
                .clipShape(Circle())
                .overlay(Circle()
                    .stroke(Color.white, lineWidth: 3))
                .shadow(radius: 5)
            //                .frame(width: 180, height:180, alignment: .center)
            
            
            VStack(alignment:.leading) {
                Text("销闲清课图")
                    .font(.title)
                    .foregroundColor(.white)
                
                Text("由孙克弘绘制")
                    .font(.subheadline)
                    .foregroundColor(.white)
                HStack{
                    Image(systemName: "t.square.fill")
                        .foregroundColor(.pink)
                    
                    Text(": 明代")
                        .font(.subheadline)
                        .foregroundColor(Color.white)
                        .bold()
                        .italic()
                    
                }
            }.padding()
            
        }.frame(width: 380, height: 200)
            .background(Color.orange)
            .cornerRadius(8)
            .shadow(radius: 5)
        
        
    }
}

struct InfoStackView_Previews: PreviewProvider {
    static var previews: some View {
        InfoStackView()
    }
}

更多SwiftUI教程和代码关注专栏

你可能感兴趣的:(ios,swift)