SwiftUI2.0更新内容二

1. ColorPicker
   颜色选择模块，用于选择颜色，或者自己取色，配色等等。
   新建SwiftUI文件，命名为chooseColor,加入如下代码

struct chooseColor: View {
    @State private var textColor = Color(.sRGB, red: 0.98, green: 0.9, blue: 0.2)
		 var body: some View {
           VStack {
               ColorPicker("挑选颜色", selection: $textColor)
               Text("\(textColor.description)")
                .foregroundColor(textColor)
           }   
       }
}

当选取颜色变化后，Text中文本文字显示选取的颜色名字，并且文字颜色变成所选中的颜色。




不提供透明度选择，则可以这样初始化ColorPicker

ColorPicker("挑选颜色", selection: $textColor, supportsOpacity: false)

2. toolbar() modifier
   为NavigationView通过toolbar()增加ToolbarItem
   代码如下：

struct toolbarWithbutton: View {
    @State private var yourText = "What's up!"
    var body: some View {
        NavigationView { 
            Text(yourText)
                .padding()
                .navigationTitle("SwiftUI")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button("First") {
                            yourText = "First Pressed"
                                }
                        Button("Second") {
                             yourText = "Second Pressed"
                                }
                    }
                }
        }
    }
}

在视图底部显示2个button类型ToolbarItem，当点击button时，改变文字

这样修改代码，可以水平放置button

.toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        HStack {
                            Button("First") {
                                        yourText = "First Pressed"
                            }
                            Button("Third"){
                                yourText = "Third Pressed"
                            }
                        }

预览视图

3. MapView
终于可以不用从UIkit中移植地图了。

struct ShowMapView: View {
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 25.89883765, longitude: 109.21606928), span: MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02))
     var body: some View {
            VStack{
            Map(coordinateRegion: .constant(region))
            Image(systemName: "circle")
                .resizable()
                .frame(width: 250, height: 250)
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.white, lineWidth: 4))
                .shadow(radius: 10)
                .padding(.top, -130)
            }  
        }
}

定义了一个景点经纬度，以及范围。没有配置地图注释。Map调用时还有几种初始化方式，带注释，轨迹等等。目前还搞清楚怎么操作，继续研究…
在地图上附加了系统自带circle图，可以考虑换成景点图片，就好看了。