セクション 102

行のビューを作成

このチュートリアル内でビルドする最初のビューは、各ランドマークの詳細を表示するための行です。この行のビューは、表示するランドマークのプロパティ内に情報を格納するため、1 つのビューで任意のランドマークを表示できます。後で、複数の行を組み合わせてランドマークのリストにします。

ステップ 1

Views グループに LandmarkRow.swift という名前の 新しい SwiftUI ビューを作成します。

ステップ 2

プレビューがまだ表示されていない場合は、[Editor(エディタ)] > [Canvas(キャンバス)] を選択してキャンバスを表示し、[Resume(再開)] をクリックします。

ステップ 3

LandmarkRow の格納されたプロパティとして Landmark を追加します。

LandmarkRow 型は初期化中に landmark インスタンスを必要とするため、 landmark プロパティを追加すると、プレビューは機能しなくなります。

    LandmarkRow.swift

1. import SwiftUI
3. struct LandmarkRow: View {
var landmark: Landmark
4. var body: some View {
5. Text("Hello, World!")

プレビューを修正するには、プレビュープロバイダーを変更する必要があります。

ステップ 4

LandmarkRow_Previews の previews 静的プロパティで、landmarkRow イニシャライザに landmark パラメータを追加し、landmarks 配列の最初の要素を指定します。

プレビューには、"Hello、World！" というテキストが表示されます。

    LandmarkRow.swift

11. struct LandmarkRow_Previews: PreviewProvider {
12. static var previews: some View {
LandmarkRow(landmark: landmarks[0])
13. }
14. }

これを修正すると、行のレイアウトをビルドできます。

ステップ 5

既存のテキストビューを HStack に埋め込みます。

    LandmarkRow.swift

6. var body: some View {
HStack {
Text("Hello,World!")
}
7. }
8. }

ステップ 6

landmark プロパティの名前を使用するようにテキストビューを変更します。

    LandmarkRow.swift

6. var body: some View {
7. HStack {
Text(landmark.name)
8. }
9. }

ステップ 7

テキストビューの前に画像を追加し、その後にスペーサー(Spacer)を追加して、行を完成させます。

    LandmarkRow.swift

6. var body: some View {
7. HStack {
landmark.image
.resizable()
.frame(width: 50, height: 50)
8. Text(landmark.name)