新手学IOS开发-APP界面布局基础开发( 三 ) _IOS

修改代码后， Xcode右侧的预览界面显示如下软件界面：

文章插图

有了选项卡后，我们可以在选项卡中添加其它界面组件，我们将第一个tabItem前面的Text删除，并从上文介绍的组件选择框中选择List组件

文章插图
选择List组件
List组件则是创建一个列表，此时代码如下：

struct ContentView: View {var body: some View {VStack {TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {List {.tabItem { Text("主页") }.tag(1)Text("").tabItem { Text("位置") }.tag(2)Text("").tabItem { Text("我的") }.tag(3).padding()

我们在List {}中添加Text ， Button ， TextField(文本输入框)等，也可从组件选择器中选择，熟悉后直接添加代码更加方便，代码如下：

import SwiftUIstruct ContentView: View {var body: some View {TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {List {Text("IOS开发")Button("JAVA开发") {TextField("其它请输入", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/).tabItem { Text("主页") }.tag(1)Text("").tabItem { Text("位置") }.tag(2)Text("").tabItem { Text("我的") }.tag(3)struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()

可以看到app预览变为：

文章插图
主页预览
其它界面组件，读者可自己学习探索，后续笔者会介绍一些常用组件供大家学习。
添加地图位置
通过上文的学习，相信读者已经学会了基础的布局，咱们这一节学习如何使用地图。
第一步：在右侧的项目结构文件中选择ios_study ，右键选择New File ，如下图：

文章插图
创建文件
在弹出的文件创建框中选择SwiftUI View ，表示创建一个新的界面

文章插图
创建swiftui view
点击Next ，在文件名中输入MapView ，再点击create ，此时创建了一个名为MapView的组件代码文件，咱们删除其中不需要的Text("Hello, World")后，如下：

import SwiftUIstruct MapView: View {var body: some View {struct MapView_Previews: PreviewProvider {static var previews: some View {MapView()

修改为如下代码，如果读者是初学者不明白其意义也无仿，咱们就当是提前接触了：

import Foundationimport SwiftUIimport MapKitstruct MapView: View {var coordinate: CLLocationCoordinate2D@State private var region = MKCoordinateRegion()var body: some View {Map(coordinateRegion: $region).onAppear {setRegion(coordinate)private func setRegion(_ coordinate: CLLocationCoordinate2D) {region = MKCoordinateRegion(center: coordinate,span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)struct MapView_Previews: PreviewProvider {static var previews: some View {MapView(coordinate: CLLocationCoordinate2D(latitude: 40.22077, longitude: 116.23128))

右侧预览中显示：