メモ > 技術 > IDE: Xcode > SwiftUIその他
SwiftUIその他
■引っ張って更新
ContentView.swift
import SwiftUI
struct ContentView: View {
@State var articles: [String] = [
"Article 1",
"Article 2",
"Article 3",
"Article 4",
"Article 5",
]
var body: some View {
NavigationView {
List($articles, id: \.self) { $article in
Text(article)
}
.refreshable {
articles.append("New Article")
}
.navigationTitle("Article List")
}
}
}
#Preview {
ContentView()
}
【SwiftUI 3.0】refreshable で Pull To Refresh を実装 - .NET ゆる〜りワーク
https://www.yururiwork.net/archives/1864
SwiftUI3.0より前は、「引っ張って更新」には対応していなかった
【SwiftUI】Pull to refresh(UIRefreshControl)を実装する - .NET ゆる〜りワーク
https://www.yururiwork.net/archives/1534
■リストを検索
ContentView.swift
import SwiftUI
struct ContentView: View {
@State private var query = ""
private let characters = [
"Alice",
"The White Rabbit",
"The Queen of Heart",
"The King of Heart",
"The Cheshire Cat",
"アリス",
"ホワイトラビット",
"ハートのクイーン",
"ハートのキング",
"チェシャー猫",
]
var body: some View {
NavigationView {
VStack {
List(filtered, id: \.self) {
Text($0)
}
.listStyle(.insetGrouped)
}
.searchable(text: $query)
.navigationTitle("Characters")
}
}
private var filtered: [String] {
guard !query.isEmpty else {
return characters
}
return characters.filter {
$0.localizedCaseInsensitiveContains(query)
}
}
}
#Preview {
ContentView()
}
How to add a search bar to filter your data - a free SwiftUI by Example tutorial
https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-a-search-bar-to-filter-your-data
■複数行入力欄にプレースホルダーを設定
ZStackを使って「入力が無ければ代わりのテキストを表示する」のように調整する
コードが長くなるので、使いまわせる部品にするといいかもしれない
Form {
TextField("Name", text: $name)
ZStack {
if memo.isEmpty {
VStack {
HStack {
Text("Memo")
.padding(EdgeInsets(
top: 8,
leading: 0,
bottom: 0,
trailing: 0
))
.opacity(0.25)
Spacer()
}
Spacer()
}
}
TextEditor(text: $memo)
.padding(EdgeInsets(
top: 0,
leading: -4,
bottom: 0,
trailing: 0
))
.frame(height: 100)
}
}
【SwiftUI】TextEditorにプレースホルダーを表示する - Qiita
https://qiita.com/cappie5551/items/dfbfcb69b99bb3400b89
■NavigationView
NavigationViewを使用した際、iPadではデフォルトで左側に一覧が表示されるようになる
以下のように「.navigationViewStyle(StackNavigationViewStyle())」を指定することで、iPadでも全面表示にできる
struct ContentView: View {
var body: some View {
NavigationView {
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
SwiftUIのNavigationViewについて - Qiita
https://qiita.com/k-motoyan/items/6b5077d06efccb426344
SwiftUIのNavigationViewでiPhoneとiPadの動作を合わせる
https://zenn.dev/yorifuji/articles/swiftui-navigationviewstyle-stack
SwiftUI iPadタブレットで全面表示にする。左側に小さくならないようにする
https://ao-system.net/note/137
■NavigationLinkのページからNavigationLinkのページへ遷移した際の余計な空白対策
ページ遷移先ではNavigationViewを削除すると解消される
ただし単にその対応だと、Form -> TextField に反映されるはずの入力初期値が反映されない現象が発生した
(タップすると、そのタイミングで何故か反映される)
正しい対応かどうかは不明だが、Form -> HStack -> TextField とHStackを挟むと正常に表示された
【SwiftUI】NavigationLinkの画面遷移時に発生する謎の空白問題について | プログラマーになった 「中卒」 男のブログ
https://chusotsu-program.com/swiftui-navigationlink-blank/
■プロパティの変更を検知
onChangeメソッドを使うと、@State や @Published の変化を検知して処理を行うことができる
【SwiftUI】プロパティの変更を検知する方法【onChange】 - .NET ゆる〜りワーク
https://www.yururiwork.net/archives/1481
■画面の向きを固定
Infoの画面で設定できる
Supported interface orientations(iPhone)
内の項目を
Portrait(bottom home button)
だけにすると、画面が縦向きだけで固定される
【SwiftUI】 アプリの画面を縦向きまたは横向きに固定して、画面の回転を防ぐ方法
https://www.motokis-brain.com/article/65
■設定画面
【SwiftUI】入力フォームを簡単に作れるFormビュー | プログラマーになった 「中卒」 男のブログ
https://chusotsu-program.com/swiftui-form/
【SwiftUI】Form を使って設定アプリもどきの画面を作成する - .NET ゆる〜りワーク
https://www.yururiwork.net/archives/511
■ハンバーガーメニューを作る
SwiftUIでサイドメニューを実装してみた | DevelopersIO
https://dev.classmethod.jp/articles/swiftui_overlay_sidemenu/
■参考メモ
[Swift] SwiftUIのチートシート - Qiita
https://qiita.com/hcrane/items/eb847ca7fb7a0b9e8073
【SwiftUI】List の使い方【総まとめ】 - .NET ゆる〜りワーク
https://www.yururiwork.net/%E3%80%90swiftui%E3%80%91list-%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%...
【SwiftUI】Form を使って設定アプリもどきの画面を作成する - .NET ゆる〜りワーク
https://www.yururiwork.net/%e3%80%90swiftui%e3%80%91form-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e8%a8%...
普通にURLSessionとCombineでURLSession - Qiita
https://qiita.com/Sho-heikun/items/4da148b4e1618c3eec82
APIのデータを利用する - SwiftUIへの道
https://d1v1b.com/swiftui/use_data_from_api
API - SwiftUIでWebAPIから結果を表示したい|teratail
https://teratail.com/questions/222072
【SwiftUI】外部APIを叩いて取得した結果をListに表示する - Qiita
https://qiita.com/MilanistaDev/items/64dca8c9d5099a19529e
【Swift】SwiftUIのListでスクロール末尾で次のデータを読み込み表示する方法 - Qiita
https://qiita.com/shiz/items/f0f663f8fb926d914990
Swift 4.0 エラー処理入門 - Qiita
https://qiita.com/koishi/items/67cf4d0f51c4d79f1d22
[Swift] Swiftのエラー処理についてざっくりとまとめてみた | DevelopersIO
https://dev.classmethod.jp/articles/about-error-handling/