E0b4cbc4c975b8fc7af9668a35177f83
SwiftUI 界面大全之停车管理地图App源码Parking

实战需求

SwiftUI 界面大全之停车管理地图App源码Parking

本文价值与收获

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

SwiftUI 界面大全之停车管理地图App源码Parking

SwiftUI 界面大全之停车管理地图App源码Parking

SwiftUI 界面大全之停车管理地图App源码Parking

SwiftUI 界面大全之停车管理地图App源码Parking

看完本文您将掌握的技能

  • 简约功能性界面布局
  • SwiftUI整合地图支持地图标签POI
  • SwiftUI实现地图标签和界面联动
  • 抽屉式界面弹出
  • 自定义长短stepper组件实现时间选择
  • 底部自定义搜索组件

实战代码

1、主界面
```
import SwiftUI
import MapKit

struct ContentView: View {

@StateObject var parkingFinder = ParkingFinder()

var body: some View {
    ZStack(alignment: .top) {
        // background
        Color.white.ignoresSafeArea()
        // map view
        Map(coordinateRegion: $parkingFinder.region, annotationItems: parkingFinder.spots) { spot in
            MapAnnotation(coordinate: spot.location, anchorPoint: CGPoint(x: 0.5, y: 0.5)) {
                Button(action: {
                    parkingFinder.selectedPlace = spot
                }, label: {
                    SpotAnnotatonView(fee: "\(Int(spot.fee))", selected: spot.id == parkingFinder.selectedPlace?.id)
                })
            }
        }
        .cornerRadius(40)
        .edgesIgnoringSafeArea(.top)
        .offset(y: -70)

        VStack {
            // top navigation
            TopNavigationView()
            Spacer()
            // parking card view
            ParkingCardView(parkingPlace: parkingFinder.selectedPlace ?? parkingFinder.spots[0])
                .offset(y: -25)
                .onTapGesture {
                    parkingFinder.showDetail = true
                }
            // search view
            SearchView()
        }
        .padding(.horizontal)

        if parkingFinder.showDetail {
            // parking detail view when click on card
            ParkingDetailView(parkingFinder: parkingFinder, region: MKCoordinateRegion(center: parkingFinder.selectedPlace?.location ?? parkingFinder.spots[0].location, span: MKCoordinateSpan(latitudeDelta: 0.001, longitudeDelta: 0.001)))
        }
    }
    .onAppear {
        parkingFinder.selectedPlace = parkingFinder.spots[0]
    }
}

}

top Created with Sketch.