Swift ui macos 背景透明TextField [英] Swift ui macos background transparent TextField

问题描述

正如你从图片中看到的，我有一个 TextField 和在 list 之后.

As you can see from the image I have a TextField and after list.

列表有透明背景，我使用的是.listStyle(SidebarListStyle()).

The list has a transparent background, I'm using .listStyle(SidebarListStyle()).

但是我如何获得 TextField 所在的透明背景.

But how do I get a transparent background where the TextField is located.

代码:

VStack(alignment: .leading, spacing: 0) {

    TextField("Username", text: $username)
    .padding(.leading, 20)
    .padding(.trailing, 20)
    .background(
        RoundedRectangle(cornerRadius: 5)
            .fill(Color.white.opacity(0.3)
        )
        .padding(.leading, 20)
        .padding(.trailing, 20)
    )
    .padding(.top)
    .padding(.bottom)

    List(restaurants) { restaurant in
        RestaurantRow(restaurant: restaurant)
    }.listStyle(SidebarListStyle())

}.padding(0)
.frame(width: 400.0, height: 400.0, alignment: .top)

推荐答案

您需要在后台使用视觉效果视图(默认用于侧边栏样式列表)

You need visual effect view in background (it is used by default for sidebar styled lists)

演示准备&使用 Xcode 11.4/macOS 10.15.6 测试

Demo prepared & tested with Xcode 11.4 / macOS 10.15.6

struct VisualEffectView: NSViewRepresentable {
    func makeNSView(context: Context) -> NSVisualEffectView {
        let view = NSVisualEffectView()

        view.blendingMode = .behindWindow    // << important !!
        view.isEmphasized = true
        view.material = .appearanceBased
        return view
    }

    func updateNSView(_ nsView: NSVisualEffectView, context: Context) {
    }
}

并将其放在需要的区域，在本例中位于 TextField

and put it to needed area, in this case below TextField

    TextField("Username", text: $username)
    .padding(.leading, 20)
    .padding(.trailing, 20)
    .background(
        RoundedRectangle(cornerRadius: 5)
            .fill(Color.white.opacity(0.3)
        )
        .padding(.leading, 20)
        .padding(.trailing, 20)
    )
    .padding(.top)
    .padding(.bottom)
    .background(VisualEffectView())

这篇关于Swift ui macos 背景透明TextField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！