SwiftUI-如何在肖像模式下删除以SidebarListStyle样式设置的List后面的白色背景 [英] SwiftUI - How to remove white background behind List that is styled with SidebarListStyle, in portrait mode

问题描述

我有一个样式为的答案

我添加了一种与默认颜色匹配的背景颜色:

 文本(单词).listRowBackground(Color(UIColor.systemGroupedBackground)) 

但是发射故障仍然存在.

---

解决方案

您可以根据 @Environment(\.horizo​​ntalSizeClass)使用不同的 NavigationStyle :

  struct CustomNavigationStyle:ViewModifier {@Environment(\.horizo​​ntalSizeClass)var horizo​​ntalSizeClass@ViewBuilderfunc body(content:Content)->一些视图{如果horizo​​ntalSizeClass == .compact {content.navigationViewStyle(StackNavigationViewStyle())} 别的 {content.navigationViewStyle(DoubleColumnNavigationViewStyle())}}} 

  NavigationView {...}.modifier(CustomNavigationStyle()) 

I have a list styled with SidebarListStyle (new in iOS 14) inside a NavigationView.

struct ContentView: View {
    let data = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen"]
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section")) {
                    ForEach(data, id: \.self) { word in
                        Text(word)
                    }
                }
            }
            .listStyle(SidebarListStyle())
            .navigationBarTitle(Text("Title"), displayMode: .large)
        }
    }
}

The problem is that there is a white rectangle behind each of the rows in the list, but only in portrait mode. It's fine in landscape.

I don't want that white background, anyone know how to remove it? Also, when launching the app, it seems to glitch -- at first it's fine, then it adds the white background.

Weirdly, if I add .navigationViewStyle(StackNavigationViewStyle()) to the NavigationView, the white background disappears and it launches fine.

struct ContentView: View {
    let data = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen"]
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section")) {
                    ForEach(data, id: \.self) { word in
                        Text(word)
                    }
                }
            }
            .listStyle(SidebarListStyle())
            .navigationBarTitle(Text("Title"), displayMode: .large)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Left: How it launches, right: How it looks after launching

↑ This is how I want it to be.

However, now the landscape mode is limited to a full-width list, which I don't want either.

Edit: @Omid's answer

I added a background color to match the default one:

Text(word)
.listRowBackground(Color(UIColor.systemGroupedBackground))

But the launching glitch is still there.

Edit: @pawello2222's answer

Works alright, just a weird transition when rotating.

解决方案

Problem

Weirdly, if I add .navigationViewStyle(StackNavigationViewStyle()) to the NavigationView, the white background disappears and it launches fine.

This is because in iOS 14 the default styles of NavigationView or List are no longer always the same. See:

• SwiftUI iOS14 - NavigationView + List - Won't fill space

---

Solution

You can use a different NavigationStyle depending on the @Environment(\.horizontalSizeClass):

struct CustomNavigationStyle: ViewModifier {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    @ViewBuilder
    func body(content: Content) -> some View {
        if horizontalSizeClass == .compact {
            content.navigationViewStyle(StackNavigationViewStyle())
        } else {
            content.navigationViewStyle(DoubleColumnNavigationViewStyle())
        }
    }
}

NavigationView {
    ...
}
.modifier(CustomNavigationStyle())

这篇关于SwiftUI-如何在肖像模式下删除以SidebarListStyle样式设置的List后面的白色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！