Tag: SwiftUI/BuildingListsAndNavigation
struct Landmark: Hashable, Codable { var id: Int var name: String var park: String var state: String var description: String }
struct Landmark: Hashable, Codable { var id: Int var name: String var park: String var state: String var description: String private var imageName: String var image: Image { Image(imageName) } }
struct Landmark: Hashable, Codable { var id: Int var name: String var park: String var state: String var description: String private var imageName: String var image: Image { Image(imageName) } private var coordinates: Coordinates var locationCoordinate: CLLocationCoordinate2D { CLLocationCoordinate2D( latitude: coordinates.latitude, longitude: coordinates.longitude) } struct Coordinates: Hashable, Codable { var latitude: Double var longitude: Double } }
var landmarks: [Landmark] = load("landmarkData.json") func load<T: Decodable>(_ filename: String) -> T { let data: Data guard let file = Bundle.main.url(forResource: filename, withExtension: nil) else { fatalError("Couldn't find \(filename) in main bundle.") } do { data = try Data(contentsOf: file) } catch { fatalError("Couldn't load \(filename) from main bundle:\n\(error)") } do { let decoder = JSONDecoder() return try decoder.decode(T.self, from: data) } catch { fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)") }
struct LandmarkRow: View { var landmark: Landmark var body: some View { HStack { landmark.image .resizable() .frame(width: 50, height: 50) Text(landmark.name) Spacer() } } } struct LandmarkRow_Previews: PreviewProvider { static var previews: some View { LandmarkRow(landmark: landmarks[0]); } }
struct LandmarkRow_Previews: PreviewProvider { static var previews: some View { LandmarkRow(landmark: landmarks[1]).previewLayout(.fixed(width: 300, height: 70)) } }
Group { LandmarkRow(landmark: landmarks[0]) .previewLayout(.fixed(width: 300, height: 70)) LandmarkRow(landmark: landmarks[1]) .previewLayout(.fixed(width: 300, height: 70)) }
リストビューを実装する。
struct LandmarkList: View { var body: some View { List { LandmarkRow(landmark: landmarks[0]) LandmarkRow(landmark: landmarks[1]) } } }
Listにコレクションを表示。
struct LandmarkList: View { var body: some View { List(landmarks, id: \.id) { landmark in LandmarkRow(landmark: landmark) } }
リストと詳細をナビゲートできるようにする。
struct LandmarkDetail: View { var body: some View { VStack { MapView() .ignoresSafeArea(edges: .top) .frame(height: 300) CircleImage() .offset(y: -130) .padding(.bottom, -130) VStack(alignment: .leading) { Text("Turtle Rock") .font(.title) .foregroundColor(.primary) HStack { Text("Joshua Tree National Park") Spacer() Text("California") } .font(.subheadline) .foregroundColor(.secondary) Divider() Text("About Turtle Rock") .font(.title2) Text("Descriptive text goes here.") } .padding() Spacer() } } }
struct ContentView: View { var body: some View { LandmarkList() } }
struct LandmarkList: View { var body: some View { NavigationView { List(landmarks) { landmark in NavigationLink(destination: LandmarkDetail()) { LandmarkRow(landmark: landmark) } } .navigationTitle("Landmarks") } } } -ライブプレビューで遷移を確認可能。
詳細ビューにデータを引き渡す。
struct CircleImage: View { var image: Image var body: some View { image .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth: 4)) .shadow(radius: 7) } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage(image: Image("turtlerock")) } }
struct 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: 34.011_286, longitude: -116.166_868)) } }
struct LandmarkDetail: View { var landmark: Landmark var body: some View { ScrollView { MapView(coordinate: landmark.locationCoordinate) .ignoresSafeArea(edges: .top) .frame(height: 300) CircleImage(image: landmark.image) .offset(y: -130) .padding(.bottom, -130) VStack(alignment: .leading) { Text(landmark.name) .font(.title) .foregroundColor(.primary) HStack { Text(landmark.park) Spacer() Text(landmark.state) } .font(.subheadline) .foregroundColor(.secondary) Divider() Text("About \(landmark.name)") .font(.title2) Text(landmark.description) } .padding() } .navigationTitle(landmark.name) .navigationBarTitleDisplayMode(.inline) } } struct LandmarkDetail_Previews: PreviewProvider { static var previews: some View { Group { LandmarkDetail(landmark: landmarks[0]) } } }
プレビューを修正する。
struct LandmarkList: View { var body: some View { NavigationView { List(landmarks) { landmark in NavigationLink(destination: LandmarkDetail(landmark: landmark)) { LandmarkRow(landmark: landmark) } } .navigationTitle("Landmarks") } } } struct LandmarkList_Previews: PreviewProvider { static var previews: some View { ForEach(["iPhone SE (2nd generation)", "iPhone XS Max"], id: \.self) { deviceName in LandmarkList() .previewDevice(PreviewDevice(rawValue: deviceName)) .previewDisplayName(deviceName) } } }