これ。
NavigationStack なしでも、
自在にどこでも置きたいのだが。
👉 SwiftUIでSearchBarが使いたいので自作する | DevelopersIO
私も作ってみます、
リストが表示されるやつ。
とりあえず、横に並べて開始します。
HStack {
Button {
} label : {
Image(systemName: "magnifyingglass")
}
TextField("Search", text: .constant(""))
Button {
} label : {
Image(systemName: "xmark.circle.fill")
}
}
🧑🏻💻 フォーカスの位置の付け替え
デフォルトの TextField のフォーカスの状態を取得して、
エフェクトは無効化する。
TextField("Search", text: .constant(""))
.focused($focused)
.textFieldStyle(.plain)
それらの外にある HStack の border をフォーカス状態によって色を切り替える。
} // HStack
.border(focused ? Color.accentColor : .gray, width: 1)
🧑🏻💻 リストのオーバーラップ表示
フォーカスの状態によって、
選択肢のリスト表示を overlay します。
offset 値は入力エリアの高さです。
} // HStack
.border(focused ? Color.accentColor : .gray, width: 1)
.overlay {
if focused {
VStack {
ForEach(0...3, id: \.self) { i in
HStack {
Text("\(i)")
Spacer()
}
}
}
.background()
.offset(y: -45)
}
}
あとは、レイアウトを調整していけば OK!
🧑🏻💻 フォーカスのアニメーション
よく見てみると、フォーカスってアニメーションだったんですか !
フォーカス処理部分をバックグラウンドでアニメ化しました。
.background {
RoundedRectangle(cornerRadius: 8)
.stroke(.gray, lineWidth: 0.5)
RoundedRectangle(cornerRadius: 8)
.stroke(
focused ? .orange : .clear,
lineWidth: focused ? 5 : 16
)
}
.animation(.default, value: focused)
🧑🏻💻 まとめ
もうググってもしんどいですね。
ChatGPT や copilot などのAI系でも時間がかかるし。
👉 【SwiftUI】#Preview with @Binding arguments
【SwiftUI】ScrollView や List を snap する
👉 https://t.co/z6XUoo9RIA#プログラミング #Swift pic.twitter.com/F166h7dyd9— chanzmao (@maochanz) April 24, 2024
【SwiftUI】TextField で debounce | Debouncing TextField https://t.co/OwrPgSEH3Y #プログラミング #ios
— chanzmao (@maochanz) April 27, 2024