C40ea6def08fd1746bf63fead29a2375
SwiftUI 界面大全之商城类App内容管理复杂界面(教程含源码)

实战需求

SwiftUI 界面大全之商城类App内容管理复杂界面(教程含源码)

本文价值与收获

看完本文后,您将能够作出下面的界面

SwiftUI 界面大全之商城类App内容管理复杂界面

SwiftUI 界面大全之商城类App内容管理复杂界面

SwiftUI 界面大全之商城类App内容管理复杂界面

SwiftUI 界面大全之商城类App内容管理复杂界面

看完本文您将掌握的技能

1、标签式列表展示
2、动画进场内容展示
3、书桌式阴影展示
4、组合动画显示
5、动画收藏按钮


实战代码

1、 主界面

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            HomeView()
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

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

2、自定义圆角

import Foundation

import SwiftUI

// https://stackoverflow.com/a/58606176
struct RoundedCornersShape: Shape {

    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape(RoundedCornersShape(radius: radius, corners: corners) )
    }
}

3、模型
```
import Foundation

enum Status: String {
case healthy = "Healthy"
case deteriorating = "Deteriorating"

top Created with Sketch.