システム：MacのOS 10.15.1、XCodeの11.2.1、 SWIFT 5.0
書き込み時間：2019年11月30日
1.説明
（代わりに前のテーブルビューの）リスト表示、ナビゲーション：この例では、要素が含まれています。この例では、前の例に続い複合ビューとマップビュー：SwiftUI戦闘二つそれはページを詳述するように、。
詳細については、を参照してください公式サイトのチュートリアルを
2.要素やコードのダウンロード
https://github.com/zgpeace/BuildingListsAndNavigation
最初のプロジェクトは、次のディレクトリ始点>ランドマークを使用してください
3.データモデル
Landmark.swiftそれは定義しstruct、フィールド構造のデータを
landmarkData.json保存するデータのリストを
Data.swiftロードファイルを達成するためのlandmarkData.jsonデータであり、構築するLandmark.swiftモデル配列をlet landmarkData: [Landmark] = load("landmarkData.json")
LandmarkDetail.swiftコンテンツがあるにContentView.swiftコンテンツの内部。
Landmark.swift我々は契約を実装する必要がありIdentifiableそうでない場合は通話が一覧に文句を言うだろう、。
リストは、識別データを扱います。次のいずれかの方法で、あなたのデータの識別を行うことができます。あなたのデータと一緒に一意の各要素を識別することを財産へのキーのパスを渡すことで、またはあなたのデータ型が特定できるプロトコルに準拠することによって。
import SwiftUI
import CoreLocation
struct Landmark: Hashable, Codable, Identifiable {
var id: Int
var name: String
fileprivate var imageName: String
fileprivate var coordinates: Coordinates
var state: String
var park: String
var category: Category
var locationCoordinate: CLLocationCoordinate2D {
CLLocationCoordinate2D(
latitude: coordinates.latitude,
longitude: coordinates.longitude)
}
enum Category: String, CaseIterable, Codable, Hashable {
case featured = "Featured"
case lakes = "Lakes"
case rivers = "Rivers"
}
}
extension Landmark {
var image: Image {
ImageStore.shared.image(name: imageName)
}
}
struct Coordinates: Hashable, Codable {
var latitude: Double
var longitude: Double
}
細胞株は、ビューの作成4。
結果を達成するため、次の通りである：
の作成SwiftUI viewと命名LandmarkRow.swift。
//
// LandmarkRow.swift
// Landmarks
//
// Created by zgpeace on 2019/11/30.
// Copyright © 2019 Apple. All rights reserved.
//
import SwiftUI
struct LandmarkRow: View {
var landmark: Landmark
var body: some View {
HStack() {
landmark.image
.resizable()
.frame(width: 50, height: 50)
Text(landmark.name)
}
}
}
struct LandmarkRow_Previews: PreviewProvider {
static var previews: some View {
Group {
LandmarkRow(landmark: landmarkData[0])
LandmarkRow(landmark: landmarkData[1])
}
.previewLayout(.fixed(width: 300, height: 70))
}
}
コード分析：
- プレビューグループ：グループ同時に複数のビューをプレビューすることができます
- previewLayout：あなたはのサイズを設定することができます
プレビュー：
リストビューを作成します。5.
新しいSwiftUI view命名LandmarkList.swift。
import SwiftUI
struct LandmarkList: View {
var body: some View {
NavigationView {
List(landmarkData) { landmark in
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
LandmarkRow(landmark: landmark)
}
}
.navigationBarTitle(Text("Landmarks"))
}
}
}
struct LandmarkList_Previews: PreviewProvider {
static var previews: some View {
ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
}
}
}
コード分析：
NavigationView：追加ナビゲーション.navigationBarTitle(Text("Landmarks"))：ナビゲーションバーの設定タイトルNavigationLink(destination: LandmarkDetail(landmark: landmark))：詳細ページにジャンプし、子供をクリックします
次のようにプレビュー効果は次のとおりです。
動的データ取得絵柄のページへ6ラウンド
import SwiftUI
struct CircleImage: View {
var image: Image
var body: some View {
image.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
}
}
struct CircleImage_Previews: PreviewProvider {
static var previews: some View {
CircleImage(image: landmarkData[0].image)
}
}
プレビュー：
動的なデータ・アクイジション7.マップページ
import SwiftUI
import MapKit
struct MapView: UIViewRepresentable {
var coordinate: CLLocationCoordinate2D
func makeUIView(context: Context) -> MKMapView {
MKMapView(frame: .zero)
}
func updateUIView(_ view: MKMapView, context: Context) {
let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
let region = MKCoordinateRegion(center: coordinate, span: span)
view.setRegion(region, animated: true)
}
}
struct MapView_Previews: PreviewProvider {
static var previews: some View {
MapView(coordinate: landmarkData[0].locationCoordinate)
}
}
ライブプレビューには、マップの必要性を確認するには：
動的なデータ・アクイジション8.詳細ページ
import SwiftUI
struct LandmarkDetail: View {
var landmark: Landmark
var body: some View {
VStack {
MapView(coordinate: landmark.locationCoordinate)
.edgesIgnoringSafeArea(.top)
.frame(height: 300)
CircleImage(image: landmark.image)
.offset(x: 0, y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text(landmark.name)
.font(.title)
HStack(alignment: .top) {
Text(landmark.park)
.font(.subheadline)
Spacer()
Text(landmark.state)
.font(.subheadline)
}
}
.padding()
Spacer()
}
.navigationBarTitle(Text(landmark.name), displayMode: .inline)
}
}
struct LandmarkDetail_Previews: PreviewProvider {
static var previews: some View {
LandmarkDetail(landmark: landmarkData[0])
}
}
プレビュー：
9. SceneDelegate最初のページ更新
この関数は、以下のように変更します。
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
// Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
// If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
// This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
// Use a UIHostingController as window root view controller
if let windowScene = scene as? UIWindowScene {
let window = UIWindow(windowScene: windowScene)
window.rootViewController = UIHostingController(rootView: LandmarkList())
self.window = window
window.makeKeyAndVisible()
}
}
前記装置はまた、アプリをプレビューするために提供され得ます
参照
https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation
https://developer.apple.com/tutorials/swiftui/tutorials
