[英]Swift ui macos background transparent TextField
正如您從圖像中看到的,我有一個TextField
和 after 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))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.