Swift UI MacOS背景透明TextField

如何解决Swift UI MacOS背景透明TextField

从图像中可以看到，我有一个TextField，在list之后。

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

但是如何获取TextField所在的透明背景。

代码：

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)

解决方法

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

使用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下方

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

,

您可以在背景中使用Color.white.opacity（0.01）或Color.clear：

     .background(
       RoundedRectangle(cornerRadius: 5)
       .fill(Color.white.opacity(0.01))
     

或

      .background(
        RoundedRectangle(cornerRadius: 5)
        .fill(Color.clear))