SwiftUI(4)

目录

一、视图大小调整:

1. .frame(width:,height:)

2. .clipped()

3. .resizable()

4. .aspectRatio()

5.GeometryReader

二、滚动视图

1.frame(maxWidth: .infinity)

2.init

三、导航连接

四、路径

五、SwiftUI中新地图框架MapKit

1.使用的基本步骤:

2.地图交互

3.地图样式

4.地图控件

Map(scope: mapScope) { ... }

MapCompass(scope: mapScope)

.mapScope(mapScope)

.mapControls { ... }

MapPitchToggle()

MapUserLocationButton()

MapCompass()

5.地图相机位置


一、视图大小调整:

1. .frame(width:,height:)

width 和 height 参数指定了视图的宽度和高度

2. .clipped()

用于确定当视图的内容超出其边界时是否应该裁剪(即隐藏)超出的部分。当应用 clipped 修饰符时,任何超出视图边界的内容都将被裁剪掉,不会显示。如果不应用 clipped 修饰符,则超出视图边界的内容可能会根据视图的具体情况而显示或隐藏。

3. .resizable()

默认情况下,某些视图(如 Image)具有固定的尺寸,并且不会根据其父视图的布局自动调整大小。通过应用 resizable 修饰符,可以改变这种行为,使视图内容能够响应不同的尺寸要求。

4. .aspectRatio()

用于设置视图的宽高比。这个修饰符允许指定一个固定的比例,以确保视图在调整大小时保持这个比例不变。这对于创建具有特定比例(如正方形、矩形或特定宽高比的图像)的视图非常有用。

例如:创建一个正方形的视图,可以使用 .aspectRatio(1, contentMode: .fit).contentMode 参数用于指定当视图的内容与其边界不匹配时如何处理内容。.fit 意味着内容将按比例缩放以适应视图的边界。而fill就以为着填充。

5.GeometryReader

一个特殊的视图容器,它用于读取并传递其内容的几何信息(如尺寸和坐标)给其子视图。GeometryReader 本身并不渲染任何可视内容,而是将其子视图放置在一个能够访问其大小和布局信息的环境中。

例如:

  1. GeometryReader { geo in ... }GeometryReader 是一个特殊的视图容器,用于读取并传递其内容的几何信息(如尺寸和坐标)给其子视图。在这个例子中,geo 是个 GeometryProxy 对象,它代表了 GeometryReader 的内部空间。

  2. Image("Example"): 这创建了一个显示名为 "Example" 的图片的视图。

  3. .resizable(): 这使得图像可以调整大小。默认情况下,一些图像可能不允许调整大小,因此这个修饰符是必要的,特别是根据 GeometryReader 的尺寸来缩放图像时。

  4. .aspectRatio(contentMode: .fit): 这确保了图像在缩放时保持其原始的宽高比。.fit 内容模式意味着图像将被缩放以适应其容器的大小,同时保持其原始的宽高比,这可能导致图像的某些部分在缩放时不可见(即被裁剪)。

  5. .frame(width: geo.size.width): 这设置了图像的宽度为 GeometryReader 的宽度(geo.size.width)。由于图像的宽高比被保持,其高度将自动调整以匹配这个宽度。

二、滚动视图

1.frame(maxWidth: .infinity)

特定的调用设置了视图的最大宽度为无限大(.infinity)。这通常意味着希望这个视图在其父容器中尽可能宽,但不超过其父容器的实际宽度。这常用于创建一个水平填充的视图,使其宽度与其父容器匹配,而高度则根据内容或其他约束来确定。

例如,假设有一个水平滚动的视图(如 ScrollView),并且希望其中的内容视图尽可能宽以填充整个滚动区域,可以使用其实现。

2.init

init 是用来初始化视图结构体的特殊方法。创建一个遵循 View 协议的结构体时,通常需要提供一个或多个初始化方法(init 函数),以便能够创建该视图的实例并设置其初始状态。

在 SwiftUI 中,初始化方法可以有多种形式,但通常它们会接受一些参数,这些参数用于配置视图的初始属性。这些参数可以是简单的数据类型,如 StringIntColor 等,也可以是其他视图或自定义类型的实例。

例如:

三、导航连接

  1. NavigationLink:

    • NavigationLink 是 SwiftUI 中用于创建导航链接的组件。当用户点击这个链接时,它会导航到一个新的视图或屏幕。
    • NavigationLink 通常与 NavigationView 一起使用,以提供完整的导航体验。
  2. destination::

    • destination 是 NavigationLink 的一个参数,它指定了当用户点击链接时要导航到的目标视图。

四、路径

Path 是一个用于创建自定义图形形状的结构体。通过使用 Path,可以绘制复杂的图形、线条、曲线等,并在 SwiftUI 视图中显示它们。Path 提供了一系列的方法来定义路径的各个部分,如线条的起点、终点、控制点等。

例如:

  1. Path { ... }
    使用 Path 结构体来创建一个自定义路径。Path 结构体用于绘制自定义形状。

  2. { path in ... }
    这是一个闭包,它接受一个 Path 类型的参数 path,用于定义路径的各个部分。

  3. path.move(to: CGPoint(x: 200, y: 100))
    设置路径的起始点。这里,起始点的坐标是 (200, 100)。

  4. path.addLine(to: CGPoint(x: 100, y: 300))
    从当前点(起始点)画一条直线到点 (100, 300)。

  5. path.addLine(to: CGPoint(x: 300, y: 300))
    从上一个点 (100, 300) 画一条直线到点 (300, 300)。

  6. path.addLine(to: CGPoint(x: 200, y: 100))
    从上一个点 (300, 300) 画一条直线回到起始点 (200, 100)。

  7. .stroke(Color.blue.opacity(0.25), lineWidth: 10)
    对 Path 应用一个修饰符来指定它应该如何被绘制。这里使用 .stroke 修饰符,它定义了路径的描边颜色(半透明的蓝色)和线条宽度(10点)。

五、SwiftUI中新地图框架MapKit

在 SwiftUI 中,MapKit 框架用于在应用中集成地图功能。MapKit 提供了丰富的 API 来显示地图、添加标注、绘制覆盖物以及响应用户交互。虽然 SwiftUI 本身是一个声明式 UI 框架,专门用于构建用户界面,但 MapKit 并不是专门为 SwiftUI 设计的。然而,仍然可以在 SwiftUI 应用中使用MapKit,并通过 UIViewControllerRepresentable 协议将其集成到 SwiftUI 视图层次结构中。

如何在 SwiftUI 中使用 MapKit ?

1.使用的基本步骤:

1.创建 MapView

首先,需要创建一个遵守 UIViewControllerRepresentable 协议的封装器,这样就可以在 SwiftUI 中使用 MapKit 的 MKMapView

 2. 在 SwiftUI 中使用 MapView

3. 添加标注和覆盖物

还可以使用 MapKit 的其他功能,如添加标注(annotations)和覆盖物(overlays)。这通常涉及实现 MKMapViewDelegate 的相关方法,并在 MKMapView 实例上设置标注和覆盖物。
4. 响应地图交互

通过实现 MKMapViewDelegate 的方法,可以响应用户的地图交互,如缩放、平移、选择标注等。
5. 自定义样式和行为

MapKit 提供了丰富的选项来自定义地图的样式和行为,包括改变地图类型(如标准、卫星、混合等)、显示交通状况、添加指南针控件等。

2.地图交互

为了控制用户与地图的交互方式,可以传递一组允许的模式。默认情况下允许所有模式(平移、缩放、倾斜、旋转)。

~Map 是一个用于显示地图的视图。interactionModes 参数允许指定用户可以与地图进行哪些交互。.pan 和 .pitch 是 MapInteractionMode 枚举中的两个值,分别表示平移和倾斜交互。

  • .pan: 允许用户通过拖动来平移地图。
  • .pitch: 允许用户通过手势来改变地图的倾斜角度。

当在 Map 视图中使用 interactionModes: [.pan, .pitch] 时,正在指定用户可以与地图进行平移和倾斜操作。

3.地图样式

  • Map { ... }: 这里是一个 Map 视图的基本定义。可以在其中定义地图的中心坐标、区域、交互模式等,以及为每个标注定义自定义视图表示(如果需要的话)。

  • .mapStyle(...): 这是一个修饰符,用于设置地图的样式。

  • .hybrid(...): 这指定了地图的样式为混合样式,即结合了普通地图和卫星图像

  • showsTraffic: true: 这表示地图将显示交通状况信息,如道路拥堵情况等

  • pointsOfInterest: .including([.publicTransport]): 这表示地图将显示兴趣点,并且特别包括公共交通站点。pointsOfInterest 可以用来控制地图上哪些类型的兴趣点应该被显示。在这个例子中,它只显示了公共交通站点。

  • elevation: .realistic: 设置地图的高程为现实主义风格,这通常意味着地形特征(如山丘、建筑物等)会以更真实的方式呈现。

通过链式调用 .mapStyle 修饰符并传入相应的参数,可以很容易地定制 Map 视图的外观和行为,以满足你的应用需求。

请注意,为了使 Map 视图正常工作,应用需要链接 MapKit 框架,并且需要在 Info.plist 文件中添加相应的权限(如果你的应用需要访问用户的位置信息)。此外,.mapStyle 修饰符及其参数可能在不同的 iOS 版本中有所不同。

4.地图控件

标准的地图控件,如指南针、用户位置、倾斜、比例尺和缩放控件都实现为 SwiftUI 视图。

Map(scope: mapScope) { ... }

Map 是一个用于显示地图的视图。它接受一个 scope 参数,该参数是一个命名空间对象,用于同步地图的状态。在这个例子中,mapScope 被传递给 Map 视图,这意味着 Map 视图将使用这个命名空间对象来同步其状态。

在 { ... } 闭包中,你可以定义地图的各种属性和行为,比如坐标区域、标注、交互模式等。具体的实现细节没有在这个代码片段中给出。

MapCompass(scope: mapScope)

MapCompass 可能是一个自定义的指南针视图,用于显示地图的当前方向。它也接受一个 scope 参数,并使用了相同的 mapScope 命名空间对象。这意味着 MapCompass 视图将与 Map 视图同步,显示相同的方向或状态。

.mapScope(mapScope)

这个修饰符可能是自定义的,用于将 mapScope 命名空间与 VStack 视图(以及它的子视图)相关联。这确保了任何依赖 mapScope 的子视图或组件都可以正确地与之交互。具体的实现细节取决于这个修饰符是如何定义的。

.mapControls { ... }

这是一个自定义修饰符(或可能是一个假设的修饰符,因为 SwiftUI 标准库中并没有 .mapControls 这个修饰符)。从名字上推测,这个修饰符可能用于添加或管理地图的控件,如缩放控件、指南针、用户位置按钮等。

MapPitchToggle()

MapPitchToggle 可能是一个自定义的视图组件,用于切换地图的倾斜角度(pitch)。在地图应用中,pitch 是指地图相对于地面的倾斜程度。通过这个控件,用户可以选择查看地图的平面视图或三维视图。

MapUserLocationButton()

MapUserLocationButton 可能是一个显示用户当前位置的按钮。当用户点击这个按钮时,地图通常会重新定位到用户的当前位置,并可能以某种方式标记这个位置。这是许多地图应用中常见的功能。

MapCompass()

MapCompass 是显示地图指南针的视图组件。指南针通常用于指示地图的北方向,帮助用户确定方向。在一些复杂的地图应用中,指南针还可能包含其他导航信息或功能。

5.地图相机位置

initialPosition 是 Map 视图的一个初始化参数,用于设置地图首次显示时的位置和缩放级别。

initialPosition 参数通常接受一个 MKCoordinateRegion 类型的值,这个值包含了地图的中心坐标 (CLLocationCoordinate2D) 和一个表示地图显示区域大小的 MKCoordinateSpanCLLocationCoordinate2D 由纬度和经度组成,而 MKCoordinateSpan 由纬度和经度的跨度(即地图显示的区域范围)组成。

  • 29
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值