enter image description here

Как вы можете видеть на изображении, у меня есть 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)
2
Paul 30 Авг 2020 в 22:01

2 ответа

Лучший ответ

Вам нужен визуальный эффект в фоновом режиме (он используется по умолчанию для списков в стиле боковой панели)

Демо подготовлено и протестировано с Xcode 11.4 / macOS 10.15.6

demo

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())
1
Asperi 31 Авг 2020 в 11:23

Вы можете использовать для фона Color.white.opacity (0.01) или Color.clear в вашем случае:

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

Или

      .background(
        RoundedRectangle(cornerRadius: 5)
        .fill(Color.clear))
   
0
dig 30 Авг 2020 в 19:14