セクション 103

Row(行)ビューを更新

共有した LandmarkRow ビューは macOS で機能しますが、新しい視覚環境を考慮して改善点を探すために再検討する価値があります。このビューは 3 つのプラットフォームすべてで使用されるため、加えた変更がすべてのプラットフォームで機能するように注意する必要があります。

行(row)を変更する前に、リストのプレビューを設定します。これは、行う変更は、文脈での行の外観によって決まるためです。

ステップ 1

LandmarkList.swift を開き、最小幅を追加します。

これによりプレビューが改善されますが、ユーザが macOS ウィンドウのサイズを変更したときにリストが小さくなりすぎないようにすることもできます。

プレビューその 1

LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
4. @EnvironmentObject var modelData: ModelData
5. @State private var showFavoritesOnly = false
7. var filteredLandmarks: [Landmark] {
8. modelData.landmarks.filter { landmark in
9. (!showFavoritesOnly || landmark.isFavorite)
10. }
11. }
13. var body: some View {
14. NavigationView {
15. List {
16. Toggle(isOn: $showFavoritesOnly) {
17. Text("Favorites only")
18. }
20. ForEach(filteredLandmarks) { landmark in
21. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
22. LandmarkRow(landmark: landmark)
23. }
24. }
25. }
26. .navigationTitle("Landmarks")
.frame(minWidth: 300)
27. }
28. }
29. }
31. struct LandmarkList_Previews: PreviewProvider {
32. static var previews: some View {
33. LandmarkList()
34. .environmentObject(ModelData())
35. }
36. }

ステップ 2

リストビューのプレビューをピン止め固定して、変更を加えたときに行(row)がコンテキスト内でどのように表示されるかを確認できるようにします。

ステップ 3

LandmarkRow.swift を開き、イメージのコーナーに丸みを追加して、より洗練された外観にします。

プレビューその 2

LandmarkRow.swift

1. import SwiftUI
3. struct LandmarkRow: View {
4. var landmark: Landmark
6. var body: some View {
7. HStack {
8. landmark.image
9. .resizable()
10. .frame(width: 50, height: 50)
.cornerRadius(5)
11. Text(landmark.name)
13. Spacer()
15. if landmark.isFavorite {
16. Image(systemName: "star.fill")
17. .imageScale(.medium)
18. .foregroundColor(.yellow)
19. }
20. }
21. }
22. }
24. struct LandmarkRow_Previews: PreviewProvider {
25. static var landmarks = ModelData().landmarks
27. static var previews: some View {
28. Group {
29. LandmarkRow(landmark: landmarks[0])
30. LandmarkRow(landmark: landmarks[1])
31. }
32. .previewLayout(.fixed(width: 300, height: 70))
33. }
34. }

ステップ 4

ランドマーク名を VStack で囲み、park(公園) を二次的情報として追加します。

プレビューその 3

LandmarkRow.swift

10. .frame(width: 50, height: 50)
11. .cornerRadius(5)
VStack(alignment: .leading) {
12. Text(landmark.name)
.bold()
Text(landmark.park)
.font(.caption)
.foregroundColor(.secondary)
}
14. Spacer()

ステップ 5

行の内容の周りに垂直方向の padding(詰め物)を追加して、各行にもう少し余裕を持たせます。

プレビューその 4

LandmarkRow.swift

26. }
27. }
.padding(.vertical, 4)
28. }
29. }
31. struct LandmarkRow_Previews: PreviewProvider {

この更新により、macOS での外観が改善されますが、リストを使用する他のプラットフォームも考慮する必要があります。最初に watchOS を考慮しましょう。

ステップ 6

リストの watchOS プレビューを表示するには、WatchLandmarks ターゲットを選択します。

ここでは、最小の行幅は適切ではありません。これと次のセクション内のリストに加えるその他の変更のため、最善の解決策は、幅の制約を省略した watch 固有のリストを作成することです。

プレビューその 5

LandmarkRow.swift

1. import SwiftUI
3. struct LandmarkRow: View {
4. var landmark: Landmark
6. var body: some View {
7. HStack {
8. landmark.image
9. .resizable()
10. .frame(width: 50, height: 50)
11. .cornerRadius(5)
12. VStack(alignment: .leading) {
13. Text(landmark.name)
14. .bold()
15. Text(landmark.park)
16. .font(.caption)
17. .foregroundColor(.secondary)
18. }
20. Spacer()
22. if landmark.isFavorite {
23. Image(systemName: "star.fill")
24. .imageScale(.medium)
25. .foregroundColor(.yellow)
26. }
27. }
28. .padding(.vertical, 4)
29. }
30. }
32. struct LandmarkRow_Previews: PreviewProvider {
33. static var landmarks = ModelData().landmarks
35. static var previews: some View {
36. Group {
37. LandmarkRow(landmark: landmarks[0])
38. LandmarkRow(landmark: landmarks[1])
39. }
40. .previewLayout(.fixed(width: 300, height: 70))
41. }
42. }

ステップ 7

新しい SwiftUI ビューを LandmarkListswift という名前の WatchLandmarks Extension フォルダに追加します。このフォルダは WatchLandmarks Extension のみをターゲットとし、古いファイルの WatchLandmarks Extension ターゲットメンバーシップを削除します。

ステップ 8

古い LandmarkList の内容を新しいものにコピーしますが、frame 修飾子は除きます。

内容の幅は適切になりましたが、各行の情報が多すぎます。

プレビューその 6

LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
4. @EnvironmentObject var modelData: ModelData
5. @State private var showFavoritesOnly = false
7. var filteredLandmarks: [Landmark] {
8. modelData.landmarks.filter { landmark in
9. (!showFavoritesOnly || landmark.isFavorite)
10. }
11. }
13. var body: some View {
14. NavigationView {
15. List {
16. Toggle(isOn: $showFavoritesOnly) {
17. Text("Favorites only")
18. }
20. ForEach(filteredLandmarks) { landmark in
21. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
22. LandmarkRow(landmark: landmark)
23. }
24. }
25. }
26. .navigationTitle("Landmarks")
27. }
28. }
29. }
31. struct LandmarkList_Previews: PreviewProvider {
32. static var previews: some View {
33. LandmarkList()
34. .environmentObject(ModelData())
35. }
36. }

ステップ 9

LandmarkRow に戻り、#if 条件を追加して、watchOS ビルドに追加のテキストが表示されないようにします。

行(row)の場合、違いが小さいため、条件付きコンパイルを使用するのが適切です。

プレビューその 7

LandmarkRow.swift

13. Text(landmark.name)
14. .bold()
#if !ios(watchOS)
15. Text(landmark.park)
16. .font(.caption)
17. .foregroundColor(.secondary)
#endif
18. }
20. Spacer()

最後に、変更が iOS でどのように機能するかを検討します。

ステップ 10

Landmarks ビルドターゲットを選択して、iOS のリストがどのように表示されるかを確認します。

変更は iOS で適切に機能するため、このプラットフォームの更新を行う必要はありません。