Ios 如何使SwiftUI视图扩展可用空间?
我正在尝试使快捷界面视图扩展其可用空间。我有一个MapView,它使用MapKit在屏幕上显示地图。我希望这张地图能够扩大VStack中的可用空间。您可以看到它位于红色视图上方和搜索栏下方。如果我使红色视图的高度为100,则贴图视图将缩小。如果我没有在红色视图上设置高度,则地图视图会更大,但是红色视图看起来不像我想要的那样 我希望红色视图的高度为100,地图视图填充搜索栏下方和红色视图上方的所有可用高度 ContentView:Ios 如何使SwiftUI视图扩展可用空间?,ios,swift,swiftui,Ios,Swift,Swiftui,我正在尝试使快捷界面视图扩展其可用空间。我有一个MapView,它使用MapKit在屏幕上显示地图。我希望这张地图能够扩大VStack中的可用空间。您可以看到它位于红色视图上方和搜索栏下方。如果我使红色视图的高度为100,则贴图视图将缩小。如果我没有在红色视图上设置高度,则地图视图会更大,但是红色视图看起来不像我想要的那样 我希望红色视图的高度为100,地图视图填充搜索栏下方和红色视图上方的所有可用高度 ContentView: struct ContentView: View { @Obse
struct ContentView: View {
@ObservedObject
var viewModel: HomeViewModel
var body: some View {
NavigationView {
ZStack {
ColorTheme.brandBlue.value.edgesIgnoringSafeArea(.all)
VStack {
CardView {
EditText(hint: "Search", text: self.$viewModel.searchText, textContentType: UITextContentType.organizationName)
}
MapView(annotations: self.$viewModel.restaurantAnnotations)
.cornerRadius(8)
CardView(height: 100) {
HStack {
Color.red
}
}
}
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
}
卡德维尤
struct CardView<Content>: View where Content : View {
var height: CGFloat = .infinity
var content: () -> Content
var body: some View {
content()
.padding(EdgeInsets.init(top: 0, leading: 8, bottom: 8, trailing: 8))
.background(Color.white.cornerRadius(8))
.shadow(radius: 2, x: 0, y: 1)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: height)
}
}
地图视图
struct MapView: UIViewRepresentable {
@Binding
var annotations: [MKAnnotation]
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.delegate = context.coordinator
return mapView
}
func updateUIView(_ view: MKMapView, context: Context) {
view.delegate = context.coordinator
view.addAnnotations(annotations)
if annotations.count == 1 {
let coords = annotations.first!.coordinate
let region = MKCoordinateRegion(center: coords, span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))
view.setRegion(region, animated: true)
}
}
func makeCoordinator() -> MapViewCoordinator {
MapViewCoordinator(self)
}
}
MapViewCoordinator
class MapViewCoordinator: NSObject, MKMapViewDelegate {
var mapViewController: MapView
init(_ control: MapView) {
self.mapViewController = control
}
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView?{
//Custom View for Annotation
let identifier = "Placemark"
if let annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) {
annotationView.annotation = annotation
return annotationView
} else {
let annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
annotationView.isEnabled = true
annotationView.canShowCallout = true
let button = UIButton(type: .infoDark)
annotationView.rightCalloutAccessoryView = button
return annotationView
}
return nil
}
}
如您所见,地图视图没有填满可用空间
现在,所有可用空间都已填满,但红色视图高度不是100
以下是一个解决方案(使用Xcode 11.4测试):
struct CardView:View其中Content:View{
变量高度:CGFloat?=nil//
class MapViewCoordinator: NSObject, MKMapViewDelegate {
var mapViewController: MapView
init(_ control: MapView) {
self.mapViewController = control
}
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView?{
//Custom View for Annotation
let identifier = "Placemark"
if let annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) {
annotationView.annotation = annotation
return annotationView
} else {
let annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
annotationView.isEnabled = true
annotationView.canShowCallout = true
let button = UIButton(type: .infoDark)
annotationView.rightCalloutAccessoryView = button
return annotationView
}
return nil
}
}
struct CardView<Content>: View where Content : View {
var height: CGFloat? = nil // << here !!