ねはぴれ

List

今回はSwiftUIのListを使ってアプリを作ります。

目次

はじめに

今回はSwiftUIのListを使って最終的にはこのような画面を作ります。

記事の画像

簡単なリスト

リストは例えば設定アプリの部分などに使われています。

記事の画像

ということで、まずは簡単なリストを作ってみましょう。

List {
	Text("New York")
	Text("London")
	Text("Tokyo")
}
記事の画像

Textでこのように表示されます。

定数を使って表示

前回の記事で出てきた定数を使って表示してみましょう。


次の定数を定義してください。

let fruits = ["apple","orange","banana","mango","melon","water melon","strawberry","blueberry","kiwi","lemon"]

次に、さっきの

List {
	Text("New York")
	Text("London")
	Text("Tokyo")
}

これを下のコードに置き換えてください。

List(fruits, id: \.self) { fruit in
	Text(fruit)
}
記事の画像 
List(fruits, id: \.self) { fruit in

この行で、List() 関数を使用して、fruits配列をリストとして表示します。
id: パラメータで、リストの要素を識別するためのキーを指定します。この場合、要素を識別するために、要素自体をキーとして指定しています。


Listの公式ドキュメント

Section

ListのSectionを紹介します。
まずはコードと画面をご覧ください。


List {
	Section("fruits") {
		Text("apple")
		Text("orange")
		Text("banana")
	}
	Section("languages") {
		Text("Swift")
		Text("Python")
		Text("Javascript")
	}
}
記事の画像

Sectionでリストのグループ化ができます。


グループのタイトルは Section(ここに書きましたが)
headerを使っても同じようにできます。

List {
	Section {
		Text("apple")
		Text("orange")
		Text("banana")
	} header: {
		Text("fruits")
	}
	Section {
		Text("Swift")
		Text("Python")
		Text("Javascript")
	} header: {
		Text("languages")
	}
}


ここまでで気付いたかもしれませんが、Sectionのタイトルが大文字になっています。

そこで.textCase(nil)モディファイアを使うことで、小文字でも表示できるようにできます。

List {
	Section("fruits") {
		Text("apple")
		Text("orange")
		Text("banana")
	}
	.textCase(nil)
	Section {
		Text("Swift")
		Text("Python")
		Text("Javascript")
	} header: {
		Text("languages")
	}
	.textCase(nil)
}
記事の画像

textCase(_:)の公式ドキュメント

NavigationStack

次に、NavigationStackを使います。
とりあえずコードと画面を見てください。

struct ContentView: View {

	let fruits = ["apple","orange","banana","mango","melon","water melon","strawberry","blueberry","kiwi","lemon"]
	
	
	var body: some View {
		
		NavigationStack {
			List(fruits, id:\.self) { fruit in
				Text(fruit)
			}
			.navigationTitle("Fruits")
		}
	}
}
記事の画像

NavigationStackはNavigationLinkというのを使って、別の画面に遷移させるのが普通の使い方ですが、ビューにタイトルがあるとわかりやすいので使います。


そこで1つ注意なのが
.navigationTitle()の場所です。

navigationTitleはNavigationStackの中に記述します。


NavigationStackの公式ドキュメント

.navigationTitleの公式ドキュメント



ということで練習問題として世界時計の画面を作ってもらいます。

練習問題

今までの知識を使って画面を完成させましょう。

記事の画像

色やフォントサイズなど載せておきます。

テキスト .font .foregroundStyle .fontWeight
今日、-9時間 .subheadline .gray -----
ロンドン .title ----- -----
9:00 .system(size: 50) ----- .light


.fontWeightは文字の太さを指定できます。


あともう一つ、VStackの中のビューを左寄せにするやり方を紹介します。

VStack(alignment: .leading)

※今回は変数や定数は使わず、時間を取得するコードは書かないでやってください。

🔥🔥🔥🔥🔥











答え

struct ContentView: View {
	var body: some View {
		NavigationStack {
			List {
				HStack {
					VStack(alignment: .leading) {
						Text("今日、-9時間")
							.font(.subheadline)
							.foregroundStyle(.gray)
						Text("ロンドン")
							.font(.title)
					}
					Spacer()
					Text("9:00")
						.font(.system(size: 50))
						.fontWeight(.light)
				}
				HStack {
					VStack(alignment: .leading) {
						Text("今日、+0時間")
							.font(.subheadline)
							.foregroundStyle(.gray)
						Text("東京")
							.font(.title)
					}
					Spacer()
					Text("18:00")
						.font(.system(size: 50))
						.fontWeight(.light)
				}
				HStack {
					VStack(alignment: .leading) {
						Text("今日、-15時間")
							.font(.subheadline)
							.foregroundStyle(.gray)
						Text("シカゴ")
							.font(.title)
					}
					Spacer()
					Text("3:00")
						.font(.system(size: 50))
						.fontWeight(.light)
				}
				HStack {
					VStack(alignment: .leading) {
						Text("今日、-14時間")
							.font(.subheadline)
							.foregroundStyle(.gray)
						Text("ニューヨーク")
							.font(.title)
					}
					Spacer()
					Text("4:00")
						.font(.system(size: 50))
						.fontWeight(.light)
				}
				HStack {
					VStack(alignment: .leading) {
						Text("今日、-7時間")
							.font(.subheadline)
							.foregroundStyle(.gray)
						Text("ケープタウン")
							.font(.title)
					}
					Spacer()
					Text("11:00")
						.font(.system(size: 50))
						.fontWeight(.light)
				}
			}
			.navigationTitle("世界時計")
		}
	}
}


解説

まず、NavigationStackと.navigationTitleを使って「世界時計」というタイトルのビューを作成します。


次にHStackの構造を見ていきましょう。

HStack {
	VStack(alignment: .leading) {
		Text("今日、-9時間")
			.font(.subheadline)
			.foregroundStyle(.gray)
		Text("ロンドン")
			.font(.title)
	}
	Spacer()
	Text("9:00")
		.font(.system(size: 50))
		.fontWeight(.light)
}

HStackで「今日、-9時間 & ロンドン」と「9:00」を分けています。

「今日、-9時間」と「ロンドン」はVStackで囲っていますが、「alignment: .leading」で左寄せにしています。

関連記事