これ。
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!
🧑🏻💻 まとめ
もうググってもしんどいですね。
ChatGPT や copilot などのAI系でも時間がかかるし。