SwiftUIに入門する
⌘+クリックでVStackの入れ子など出来る。
https://scrapbox.io/files/64cfabf65b30f2001bbc5aad.png
ライブラリボタンと呼ぶらしい
「Text」と打ってドラッグするとText("placeholder")が挿入される。
検索も出来るのかな?
ラベルにアイコンがつけれるみたい。SF SymbolsというAppleがだしてるソフトで使えるアイコン一覧が見れる。
Label("300", systemImage: "hourglass.tophalf.fill")
https://scrapbox.io/files/64cfad1ae2c88a001cfbccae.png
SF Symbols hourglassで検索した図
VStackにalignmentを設定できる
leading:右寄せ (先頭に立つという意味)
trailing:左寄せ (後続という意味)
https://scrapbox.io/files/64d22c3c50b1f8001b93d926.png
Textに.fontとしてフォントサイズを指定できる。caption以外にも色々ある
https://scrapbox.io/files/64d22c8f8b77da001ce6c588.png
HStackヘッダー内の子ビューの推論されたアクセシビリティ ラベルと値を無視します。
の意味がよくわからなかったが、調べてみたらスクリーンリーダーを扱う時個々の要素ごとに読み上げられてしまうので期待どうりに動作しない場合がある。そこで.accessibilityElement(children: .ignore)することで一旦全てのアクセシビリティラベルを無視することができる。その上で.accessibilityLabel("Time remaining")とすることでこのグループの要素は"Time remaining"であることがわかる。
ModelsにTheme.swiftを作成し、enumでThemeを定義した。
DailiyScrum.swiftを作成し、Themeと打つとTheme.swiftで定義したThemeが読み込まれるのがよくわからない。Pythonなどのスクリプト言語は大体インポートしたものしか使えないので違和感。
ハマった。
設定したThemeのscrum.theme.mainColorを定義したけどチュートリアル通りに色が変わらなくて10分損した。
どうやら、上にあるダウンロードリンクからプロジェクトをダウンロードして使うみたいでそこにはテーマカラーがAssetsに含まれている状態だった。対処としては新規で作ってしまったので、チュートリアルページからダウンロードしてきたプロジェクトからテーマ情報をコピーして作成中のプロジェクトへペーストしたら治った。
ライブラリ(+ボタン)を押して何かをすることが多くなったので、ショートカットを調べた。
Shift + ⌘ + Lで開く。
ライトモード・ダークモードで比較してみることができる機能がある。https://scrapbox.io/files/64d4ed79e47d3c001b458386.pnghttps://scrapbox.io/files/64d4ed7ecc944a001c337f99.png
Color Shceme Variantsを選択すると右図のようになる。
foregroundColorを指定してLight・Darkで色がおかしくならないようにしている。
foregroundColorとは何か。手前の要素色を変える?ドキュメント見たけど非推奨になっている。
scrum.theme.accentColorとなっているが、Colorクラス?にはaccentColorが存在する?
急に色々出てきて困惑。なんとなくやっていることはわかるが、makeBodyっていつ呼ばれるんだ?extensiton?where?self?Configurationって色々なものに化ける?LabelStyleってSwiftUIのもの?
code:TrailingIconLabelStyle.swift
import SwiftUI
struct TrailingIconLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
HStack {
configuration.title
configuration.icon
}
}
}
extension LabelStyle where Self == TrailingIconLabelStyle {
static var trailingIcon: Self { Self() }
}
ラベルスタイルのカスタマイズについては以下がわかりやすかった。
extensitionについてはクラスの継承に近い?突っ込んだ話になると複雑そう。。
code:ScrumView.swift
-----
struct ScrumsView: View {
var body: some View {
List(scrums, id: \.title) { scrum in
// ^^ これなに?
}
}
}
-----
\.の部分はKeyPathと呼ばれる機能と関わっているらしい。簡単にいうと(多分)\.titleはscrum.titleと同じ意味合いになるということ。https://scrapbox.io/files/64dae8fd69f3d5001c7fe385.png
scrum.titleと同じと書いたが、scrum.titleではエラーがでる。定義されていないからだ。なので\.titleとする必要がある。
モデルにIDを定義すると(Identifiable)にするとListのidは描かなくてよくなる
https://scrapbox.io/files/64dae9e60d6e5a001ce5f14d.png
.listRowBackgroundとは何か。
このように載っている。引数にViewが定義されているが、今回Colorだがなぜ動くのか。
ColorはViewの一つなのか?
code:ScrumView.swift
var body: some View {
NavigationStack {
List(scrums) { scrum in
NavigationLink(destination: Text(scrum.title)) {
CardView(scrum: scrum)
}
.listRowBackground(scrum.theme.mainColor)
}
.navigationTitle("Daily Scrums")
.toolbar {
Button(action: {}) {
Image(systemName: "plus")
}
}
}
}
.navigationTitleを付けると
https://scrapbox.io/files/64db149575e054001c4674dc.png
こんな風に表示され、.toolbarで
https://scrapbox.io/files/64db14c09715f9001b874ceb.png
ボタンをつけたりできる。ボタンの下にTextを増やすと、右側にテキストが挿入される。これはHStackと同じ挙動?
ちなみに、VStackも入れることができた。
.toolbarを使うことによって一貫した位置関係が構築できるようになっている?
NavigationLinkにdestinationの引数があるが、この引数にViewを入れることもできる。
code:DetailView.swift
HStack {
Label("Length", systemImage: "clock")
Spacer()
Text("\(scrum.lengthInMinutes) minutes")
}
.accessibilityElement(children: .combine)
VoiceOver は 2 つの要素を 1 つのステートメント (たとえば、「長さ、10 分」) として読み上げます。修飾子を使用しないと、VoiceOver ユーザーは各要素間を再度スワイプする必要があります。
self.attendees = attendees.map { Attendee(name: $0) }
今回の場合$0には文字列が入る。
@ObservedObject,@StateObject,@EnvironmentObjectが新登場した。
@main はエントリポイントの宣言で、実際にはAppに定義された static な main 関数がコールされる。この関数こそが SwiftUI を起動する部分であり、システムはイベントループを開始し、SwiftUI のライフサイクルを機能させるようにセットアップする。
SwiftUI のライフサイクル
https://scrapbox.io/files/64e74522f5138e001b5976a4.png
AVFoundationでメディアの操作ができる?(音量など)
code:sample.swift
import AVFoundation
code:sample.swift
struct DateView: View {
var date: Date
var body: some View {
Text(date, style: .date)
}
}
このTextビューは日付とスタイルを取得し、日付のローカライズされた文字列を表示します。
非同期処理
code:.swift
final class UserStore {
let participants = await fetchParticipants()
let records = await fetchRecords(participants: participants)
return records
}
}
async,awaitはJavaScriptに似ているな。