### コンテンツのリスト
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)
これはエンドレスやな…
