### コンテンツのリスト
List, NavigationView, navigationTitle, navigationBarTitleDisplayMode
var body: some View { List { Text("Content 1") Text("Content 2") Text("Content 3") Text("Content 4") Text("Content 5") Text("Content 6") } }
個別にviewを定義して呼び出す
struct ContentView: View { var body: some View { List { Text("Content 1") Text("Content 2") Photo1().frame(height:150) Text("Content 4") Photo2().frame(height:150) Text("Content 6") } } } struct Photo1: View { var body: some View { HStack { Image("bus") .resizable() .aspectRatio(contentMode: .fit) Text("えぼし号") .padding(.horizontal) } } } struct Photo2: View { var body: some View { HStack { Image("lighthouse") .resizable() .aspectRatio(contentMode: .fit) Text("白灯台") .padding(.horizontal) } } }
リストにタイトル
L NavigationViewのnavigationTitleを利用する
var body: some View { NavigationView { List { Text("Content 1") Text("Content 2") Photo1().frame(height:150) Text("Content 4") Photo2().frame(height:150) Text("Content 6") } .navigationTitle("タイトル") } }
### 配列をリスト表示する
List, \.self, count, indices, ForEach-in, Array, append(), searchable, fillter(), inout
– Embed in List
List(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { item in Text("hello world") }
– Embed in HStack
List(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { item in HStack { Text(String(item)) Text("hello world") } }
配列から要素を取り出してリストで表示
let metro = ["銀座線", "丸の内線", "日比谷線", "東西線", "千代田線", "半蔵門線", "南北線", "副都心線"] struct ContentView: View { var body: some View { List(0 ..< 8) { item in HStack { Text(String(item)) Text(metro[item]) } } } }
配列の要素の個数に影響されないコードにする
List(0 ..< metro.count, id: \.self) { item in HStack { Text(String(item)) Text(metro[item]) } } // このように書ける var body: some View { List(metro.indices, id: \.self) { item in HStack { Text(String(item)) Text(metro[item]) } } }
### 配列
import SwiftUI let week:[String] var nums:[Int] var colors:[Color] week = ["日","月","火","水","木","金","土"] nums = [4, 8, 15, 16, 23, 42] colors = [.red, .yellow, .green]
型推論
let week = ["日","月","火","水","木","金","土"] var nums = [4, 8, 15, 16, 23, 42]
レンジで指定した要素を更新
var colors = ["green", "red", "blue", "pink"] colors[1...2] = ["赤", "青", "黄"] print(colors)
配列の追加
var words:[String] = [] words.append("花") words.append("鳥") words.append("風") words.append("月") print(words)
空配列
L append(contentsOf:)で複数の要素を一度に追加できる
var members = [String]() members.append("英樹") members.append("高次") members.append(contentsOf: ["結城", "義郎", "正義"]) print(members)
配列の連結
L += で連結する
var data = Array<Double>() let data1 = [3.6, 5.7, 2.2] let data2 = [4.0, 3.1, 5.3] data += data1 data += data2 data.sort() print(data)
配列のスライス
let colorList = ["blue", "yellow", "red", "green", "pink"] let myColor = colorList[1...3] print(myColor)
配列から順に要素を取り出す ForEach-in
let colors:[Color] = [.red, .blue, .green, .orange, .yellow] // 省略 VStack { ForEach(colors.indices, id: \.self){index in Rectangle() .frame(width: 150, height: 30) .foregroundColor(colors[index]) } }
randomElement()を使えば配列からランダムに要素を取り出すことができ、shuffle()あるいはshuffled()でシャッフルして並び替えることができる
fillter()関数を利用することで、リストに並んでいる値を検索で絞り込んで表示することができる
リストを検索表示
struct ContentView: View { let spots = ["東京都美術館", "国立新美術館", "国立近代美術館","東京国立博物館", "江戸東京博物館","国立科学博物館","新江ノ島水族館", "川崎水族館", "しながわ水族館"] @State private var searchText = "東京" var body: some View { NavigationView { List { ForEach(searchResults, id: \.self){ name in Text(name) } } .searchable(text: $searchText, prompt: "スポットの検索") .keyboardType(.default) .navigationTitle("人気スポット") } } var searchResults: [String] { if searchText.isEmpty { return spots } else { return spots.filter {$0.contains(searchText)} } } }
参照型
func incrimentNums(nums:inout [Int]){ for i in 0..<nums.count{ nums[i] += 1 } } var data = [3, 5, 9] print(data) incrimentNums(nums: &data) print(data)
これはエンドレスやな…