简体   繁体   English

SwiftUI:视图之间的交互

[英]SwiftUI: Interaction between Views

I have the following problem and i'm completely new to the complete swift/swiftui-"thing".我有以下问题,我对完整的 swift/swiftui-“东西”完全陌生。

I have a ContentView containing a MapView and MapViewControls - when pressing the buttons in MapViewControls the MapView should change to show a specific annotation centered on my map (2nd button is for centering on User Location).我有一个包含 MapView 和 MapViewControls 的 ContentView - 当按下 MapViewControls 中的按钮时,MapView 应更改为显示以我的 map 为中心的特定注释(第二个按钮用于以用户位置为中心)。 How can i accomplish?我怎样才能完成?

ContentView:内容视图:

import SwiftUI
import MapKit

struct ContentView: View
{
    @State private var expandedInfoView: Bool = false
    
    var body: some View
    {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom))
        {
            GeometryReader
            {
                proxy in
                VStack(alignment: .center)
                {
                    MapView()
                    VStack
                    {
                        HStack
                        {
                            Spacer()
                            MapViewControls()
                                .padding(.top, -700)
                        }
                    }
                    LogoView()
                        .onTapGesture
                        {
                            withAnimation
                            {
                                expandedInfoView.toggle()
                            }
                        }
                        .padding(.top, -110)
                }
                .sheet(isPresented: $expandedInfoView)
                {
                    InfoView()
                }
            }
        }
    }
}

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

MapView:地图视图:

import SwiftUI
import MapKit
import CoreLocation

struct MapView: UIViewRepresentable
{
    let fszCoordinates = CLLocation(latitude: XXX, longitude: YYY)
    var locationManager = CLLocationManager()

    func setupManager()
    {
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        locationManager.requestAlwaysAuthorization()
    }
  
    func makeUIView(context: Context) -> MKMapView
    {
        setupManager()
        
        let fszAnnotation = MKPointAnnotation()
        fszAnnotation.coordinate = CLLocationCoordinate2D(latitude: fszCoordinates.coordinate.latitude, longitude: fszCoordinates.coordinate.longitude)
        fszAnnotation.title = "TITLE"
        fszAnnotation.subtitle = "SUBTITLE"
        
        let mapView = MKMapView(frame: UIScreen.main.bounds)
        mapView.showsUserLocation = true
        mapView.userTrackingMode = .followWithHeading
        mapView.showsScale = true
        mapView.showsTraffic = true
        mapView.showsCompass = true
        mapView.showAnnotations([fszAnnotation], animated: true)
        
        let buttonLocateUser = MKUserTrackingButton(mapView: mapView)
        buttonLocateUser.layer.backgroundColor = UIColor(white: 1, alpha: 0.8).cgColor
        buttonLocateUser.layer.borderColor = UIColor.white.cgColor
        buttonLocateUser.layer.borderWidth = 1
        buttonLocateUser.layer.cornerRadius = 5
        buttonLocateUser.translatesAutoresizingMaskIntoConstraints = false
        mapView.addSubview(buttonLocateUser)
        
        let scale = MKScaleView(mapView: mapView)
        scale.legendAlignment = .trailing
        scale.translatesAutoresizingMaskIntoConstraints = false
        mapView.addSubview(scale)
        
        NSLayoutConstraint.activate([buttonLocateUser.bottomAnchor.constraint(equalTo: mapView.bottomAnchor, constant: -25),
                                     buttonLocateUser.trailingAnchor.constraint(equalTo: mapView.trailingAnchor, constant: -10),
                                         scale.trailingAnchor.constraint(equalTo: buttonLocateUser.leadingAnchor, constant: -10),
                                         scale.centerYAnchor.constraint(equalTo: buttonLocateUser.centerYAnchor)])
        
        return mapView
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context)
    {
    }
}

struct MapView_Previews: PreviewProvider
{
    static var previews: some View
    {
        MapView()
    }
}

MapViewControls:地图视图控件:

import SwiftUI

struct MapViewControls: View
{
    var body: some View
    {
        VStack(spacing: 6)
        {
            VStack(spacing: 12)
            {
                Button
                {
                    buttonActionZoomToFSZIT()
                }
                label:
                {
                    Image(systemName: "house.circle")
                }
                Divider()
                Button
                {
                    buttonActionZoomToUser()
                }
                label:
                {
                    Image(systemName: "location.circle")
                }
            }
            .frame(width: 40)
            .padding(.vertical, 12)
            .background(Color(UIColor.secondarySystemGroupedBackground))
            .cornerRadius(8)
        }
        .font(.system(size: 20))
        .foregroundColor(.blue)
        .padding()
        .shadow(color: Color(UIColor.black.withAlphaComponent(0.1)), radius: 4)
    }
    
    func buttonActionZoomToFSZIT()
    {
        print("button tapped")
        
    }
    
    func buttonActionZoomToUser()
    {
        print("button tapped")
    }
}

struct MapViewControls_Previews: PreviewProvider
{
    static var previews: some View
    {
        MapViewControls()
    }
}

Nevermind, i solved it by myself after @vadian's comment (thank you mate).没关系,我在@vadian 发表评论后自己解决了(谢谢队友)。

ContentView:内容视图:

import SwiftUI
import MapKit

struct ContentView: View
{
    @State private var expandedInfoView: Bool = false
    @State private var buttonDecision: Int = 0
    
    var body: some View
    {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom))
        {
            GeometryReader
            {
                proxy in
                VStack(alignment: .center)
                {
                    MapView(mapCenter: $buttonDecision)
                    VStack
                    {
                        HStack
                        {
                            Spacer()
                            MapViewControls(mapCenter: $buttonDecision)
                                .padding(.top, -700)
                        }
                    }
                    LogoView()
                        .onTapGesture
                        {
                            withAnimation
                            {
                                expandedInfoView.toggle()
                            }
                        }
                        .padding(.top, -150)
                }
                .sheet(isPresented: $expandedInfoView)
                {
                    InfoView()
                }
            }
        }
    }
}

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

MapView:地图视图:

import SwiftUI
import MapKit
import CoreLocation

struct MapView: UIViewRepresentable
{
    @Binding var mapCenter: Int
    let fszCoordinates = CLLocation(latitude: XXX, longitude: YYY)
    var locationManager = CLLocationManager()

    func setupManager()
    {
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        locationManager.requestAlwaysAuthorization()
    }
  
    func makeUIView(context: Context) -> MKMapView
    {
        setupManager()
        
        let fszAnnotation = MKPointAnnotation()
        fszAnnotation.coordinate = CLLocationCoordinate2D(latitude: fszCoordinates.coordinate.latitude, longitude: fszCoordinates.coordinate.longitude)
        fszAnnotation.title = "TITLE"
        fszAnnotation.subtitle = "SUBTITLE"
        
        let mapView = MKMapView(frame: UIScreen.main.bounds)
        mapView.userTrackingMode = .follow
        mapView.showsScale = true
        mapView.showsCompass = true
        mapView.setCenter(CLLocationCoordinate2D(latitude: fszCoordinates.coordinate.latitude, longitude: fszCoordinates.coordinate.longitude), animated: true)
        mapView.showAnnotations([fszAnnotation], animated: false)
        
        let buttonLocateUser = MKUserTrackingButton(mapView: mapView)
        buttonLocateUser.layer.backgroundColor = UIColor(white: 1, alpha: 0.8).cgColor
        buttonLocateUser.layer.borderColor = UIColor.white.cgColor
        buttonLocateUser.layer.borderWidth = 1
        buttonLocateUser.layer.cornerRadius = 5
        buttonLocateUser.translatesAutoresizingMaskIntoConstraints = false
        mapView.addSubview(buttonLocateUser)
        
        let scale = MKScaleView(mapView: mapView)
        scale.legendAlignment = .trailing
        scale.translatesAutoresizingMaskIntoConstraints = false
        mapView.addSubview(scale)
        
        NSLayoutConstraint.activate([buttonLocateUser.bottomAnchor.constraint(equalTo: mapView.bottomAnchor, constant: -25),
                                     buttonLocateUser.trailingAnchor.constraint(equalTo: mapView.trailingAnchor, constant: -10),
                                         scale.trailingAnchor.constraint(equalTo: buttonLocateUser.leadingAnchor, constant: -10),
                                         scale.centerYAnchor.constraint(equalTo: buttonLocateUser.centerYAnchor)])
        
        return mapView
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context)
    {
        if ($mapCenter.wrappedValue == 0)
        {
            uiView.setCenter(CLLocationCoordinate2D(latitude: fszCoordinates.coordinate.latitude, longitude: fszCoordinates.coordinate.longitude), animated: true)
        }
        else if ($mapCenter.wrappedValue == 1)
        {
            uiView.setCenter(CLLocationCoordinate2D(latitude: uiView.userLocation.coordinate.latitude, longitude: uiView.userLocation.coordinate.longitude), animated: true)
        }
    }
}

struct MapView_Previews: PreviewProvider
{
    @State static var fszCoordinates = 0
    static var previews: some View
    {
        MapView(mapCenter: $fszCoordinates)
    }
}

MapViewControls:地图视图控件:

import SwiftUI

struct MapViewControls: View
{
    @Binding var mapCenter: Int
    
    var body: some View
    {
        VStack(spacing: 6)
        {
            VStack(spacing: 12)
            {
                Button
                {
                    buttonActionZoomToFSZIT()
                }
                label:
                {
                    Image(systemName: "house.circle")
                }
                Divider()
                Button
                {
                    buttonActionZoomToUser()
                }
                label:
                {
                    Image(systemName: "location.circle")
                }
            }
            .frame(width: 40)
            .padding(.vertical, 12)
            .background(Color(UIColor.secondarySystemGroupedBackground))
            .cornerRadius(8)
        }
        .font(.system(size: 20))
        .foregroundColor(.blue)
        .padding()
        .shadow(color: Color(UIColor.black.withAlphaComponent(0.1)), radius: 4)
    }
    
    func buttonActionZoomToFSZIT()
    {
        self.mapCenter = 0
    }
    
    func buttonActionZoomToUser()
    {
        self.mapCenter = 1
    }
}

struct MapViewControls_Previews: PreviewProvider
{
    @State static var fszCoordinates = 0
    
    static var previews: some View
    {
        MapViewControls(mapCenter: $fszCoordinates)
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM