MacOS Swiftui Textfield焦点效果颜色变化

发布于 2025-01-24 03:55:15 字数 1898 浏览 1 评论 0原文

还要考虑光和黑暗主题的可能性。


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()
    }
}

enter image description here

enter image description here

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

孤蝉 2025-01-31 03:55:15

可以使用背景与重点相关状态,例如

.background(RoundedRectangle(cornerRadius: 4)
        .stroke(Color.gray, lineWidth: 0.5).cornerRadius(4)
        .background(focused ? .black : .clear)        // << here !!
        .clipShape(RoundedRectangle(cornerRadius: 4))
)

​“ rel =“ nofollow noreferrer”>测试模块在这里

It is possible to use background with focused dependent state, like

.background(RoundedRectangle(cornerRadius: 4)
        .stroke(Color.gray, lineWidth: 0.5).cornerRadius(4)
        .background(focused ? .black : .clear)        // << here !!
        .clipShape(RoundedRectangle(cornerRadius: 4))
)

demo

Complete test module is here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文