MacOS Swiftui Textfield焦点效果颜色变化
还要考虑光和黑暗主题的可能性。
import SwiftUI
struct FindNavigatorSearchBar: View {
@ObservedObject
var state: WorkspaceDocument.SearchState
let title: String
@Binding
var text: String
@FocusState
private var focusState: Bool
var body: some View {
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(Color(nsColor: .secondaryLabelColor))
textField
if !text.isEmpty { clearButton }
}
.padding(.horizontal, 5)
.padding(.vertical, 3)
.background(focusState ? .quaternary : .tertiary)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 0.5).cornerRadius(8))
.cornerRadius(8)
}
private var textField: some View {
TextField(title, text: $text)
.focused($focusState)
.disableAutocorrection(true)
.textFieldStyle(PlainTextFieldStyle())
}
private var clearButton: some View {
Button {
self.text = ""
state.search("")
} label: {
Image(systemName: "xmark.circle.fill")
}
.foregroundColor(.secondary)
.buttonStyle(PlainButtonStyle())
}
}
struct SearchBar_Previews: PreviewProvider {
static var previews: some View {
HStack {
FindNavigatorSearchBar(
state: .init(WorkspaceDocument.init()),
title: "placeholder",
text: .constant("value")
)
}
.padding()
}
}
How can I get an effect similar to what you see in the images, like it does on xcode.
Also consider the possibility of light and dark themes.
import SwiftUI
struct FindNavigatorSearchBar: View {
@ObservedObject
var state: WorkspaceDocument.SearchState
let title: String
@Binding
var text: String
@FocusState
private var focusState: Bool
var body: some View {
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(Color(nsColor: .secondaryLabelColor))
textField
if !text.isEmpty { clearButton }
}
.padding(.horizontal, 5)
.padding(.vertical, 3)
.background(focusState ? .quaternary : .tertiary)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 0.5).cornerRadius(8))
.cornerRadius(8)
}
private var textField: some View {
TextField(title, text: $text)
.focused($focusState)
.disableAutocorrection(true)
.textFieldStyle(PlainTextFieldStyle())
}
private var clearButton: some View {
Button {
self.text = ""
state.search("")
} label: {
Image(systemName: "xmark.circle.fill")
}
.foregroundColor(.secondary)
.buttonStyle(PlainButtonStyle())
}
}
struct SearchBar_Previews: PreviewProvider {
static var previews: some View {
HStack {
FindNavigatorSearchBar(
state: .init(WorkspaceDocument.init()),
title: "placeholder",
text: .constant("value")
)
}
.padding()
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
可以使用背景与重点相关状态,例如
“ rel =“ nofollow noreferrer”>测试模块在这里
It is possible to use background with focused dependent state, like
Complete test module is here