代码库地址: https://gitee.com/dongzi1998/learn-ios

常用控件

  1. Text("Hello")
  2. .font(Front)                 // 设置字体
  3. .padding(Edge.Set,CGFloat)     // 设置内边距
  4. .foregroundColor(Color)     // 设置颜色
  5. .multilineTextAlignment()
  1. // name 是资源库中图片名称
  2. Image("Gopher")
  3.     // 将此视图的尺寸限制为指定的纵横比。
  4.     // .fit 填满空间
  5.     .aspectRatio(contentMode: .fit)
  6.     .clipShape(Circle())     // 设置剪辑形状为圆形
  7.     .overlay{                // 对在此视图前面指定的视图进行分层
  8.         Circle().stroke(.gray,lineWidth: 4) // 设置圆形弧线
  9.     }
  10.     .shadow(radius: 7) // 设置阴影
  1. struct Content_Previews: PreviewProvider {
  2.     static var previews: some View {
  3.         Content()
  4.         .previewLayout(.fixed(width: 300, height: 70))
  5.     }
  6. }
  1. struct Row: View {
  2.     var text: String
  3.     var body: some View{
  4.         Text(self.text)
  5.     }
  6. }
  8. struct List: View {
  9.     var body: some View {
  10.         List{
  11.             Row(text: "row1")
  12.             Row(text: "row2")
  13.             Row(text: "row3")
  14.         }
  15.     }
  16. }
  1. List{
  2.     ForEach(landmarks,id:\.id){ landmark in
  3.         NavigationLink{
  4.             LandmarkDetail(landmark: landmark)
  5.         } label: {
  6.             LandmarkRow(landmark: landmark)
  7.         }
  8.     }
  9. }
  1. struct Detail: View {
  2.     var body: some View {
  3.         Text("detail page")
  4.     }
  5. }
  7. struct Demo: View {
  8.     var body: some View {
  9.         NavigationView {
  10.             NavigationLink{
  11.                 Detail()
  12.             }label: {
  13.                 Text("click me")
  14.             }
  15.         }
  16.     }
  17. }
  1. struct Detail: View {
  2.     var body: some View {
  3.         Image("Gopher_1")
  4.     }
  5. }
  7. struct Demo: View {
  8.     @State private var showDetail = false
  9.     var body: some View {
  10.         VStack{
  11.             if showDetail {
  12.                 Detail()
  13.             }
  14.             Spacer()
  15.             HStack{
  16.                 Toggle("展示图片", isOn: $showDetail)
  17.             }
  18.         }
  19.     }
  20. }
  1. extension AnyTransition {
  2.     static var moveAndFade: AnyTransition {
  3.         .asymmetric(
  4.             insertion: .move(edge: .trailing).combined(with: .opacity),
  5.             removal: .scale.combined(with: .opacity)
  6.         )
  7.     }
  8. }
  11. struct HikeView: View {
  12.     var hike: Hike
  13.     @State private var showDetail = false
  15.     var body: some View {
  16.         VStack {
  17.             HStack {
  18.                 HikeGraph(hike: hike, path: \.elevation)
  19.                     .frame(width: 50, height: 30)
  21.                 VStack(alignment: .leading) {
  22.                     Text(hike.name)
  23.                         .font(.headline)
  24.                     Text(hike.distanceText)
  25.                 }
  27.                 Spacer()
  29.                 Button {
  30.                     withAnimation{
  31.                         showDetail.toggle()
  32.                     }
  33.                 } label: {
  34.                     Label("Graph", systemImage: "chevron.right.circle")
  35.                         .labelStyle(.iconOnly)
  36.                         .imageScale(.large)
  37.                         // 设置旋转效果
  38.                         .rotationEffect(.degrees(showDetail ? 90 : 0))
  39.                         // 设置比例效果
  40.                         .scaleEffect(showDetail ? 1.5 : 1)
  41.                         .padding()
  42.                 }
  43.             }
  45.             if showDetail {
  46.                 HikeDetail(hike: hike)
  47.                     // 设置自定义过渡效果（移动和褪色）
  48.                     .transition(.moveAndFade)
  49.             }
  50.         }
  51.     }
  52. }
  1. withAnimation{
  2.     // do something
  3. }
  5. Lable("")

布局

  1. // 以间隔器为轴，进行扩展
  2. // 可以实现CSS多列布局
  3. Spacer()
  1. Divider()
  1. // alignment: 设置对齐方式
  2. // .leading: 左对齐
  3. // .center: 居中对齐
  4. // .trailing: 右对齐
  6. // spacing: 间距
  7. VStask(alignment:.leading,spacing: 10) {
  8.     Text("Text 1")
  9.     Text("Text 2")
  10. }
  1. HStask {
  2.     Text("Text 1")
  3.     Text("Text 2")
  4. }
  2. // showsIndicators: 是否显示滚动条
  3. // .horizontal: 水平滚动
  4. // .vertical: 垂直滚动
  5. ScrollView(.horizontal,showsIndicators: false) {
  6.                 HStack {
  7.                     ForEach(1...4,id: \.self) { id in
  8.                         CheckOutCard()
  9.                     }
  10.                 }
  11.             }
  1. struct ContentView: View {
  2.     @State private var selection: Tab = .featured
  4.     enum Tab {
  5.         case featured
  6.         case list
  7.     }
  9.     var body: some View {
  10.         TabView(selection: $selection) {
  11.             CategoryHome()
  12.                 .tag(Tab.featured)
  14.             LandmarkList()
  15.                 .tag(Tab.list)
  16.         }
  17.         // 设置选项卡视图
  18.         // .automatic 默认视图
  19.         // .page 实现分页滚动TabView的TabViewStyle
  20.         .tabViewStyle(.page)
  21.     }
  22. }

资源

创建图像视图

Step1、点击项目目录中Assets

image.png

Step2、点击设置图片

image.png
image.png