SwiftUI

Question

我在 NavigationView.

中有一个样式为 SidebarListStyle（iOS 14 中新增）的列表

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()) 添加到 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)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

左：启动方式，右：启动后的样子

↑ 这就是我想要的样子。

但是，现在横向模式仅限于full-width列表，我也不想要。

编辑：@Omid 的回答

我添加了背景颜色以匹配默认颜色：

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

但是启动故障仍然存在。

编辑：@pawello2222 的回答

工作正常，只是旋转时出现奇怪的过渡。

Answer 1

你可以把颜色改成你想要的！

Text(word)
  .listRowBackground(Color.yellow)

Answer 2

问题

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

这是因为在 iOS 14 中，NavigationView 或 List 的默认样式不再总是相同。参见：

解决方案

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

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 设置样式的列表后面的白色背景

SwiftUI - How to remove white background behind List that is styled with SidebarListStyle, in portrait mode

ios

swift

swiftui-navigationview

↑ 这就是我想要的样子。

编辑：@Omid 的回答

编辑：@pawello2222 的回答

问题

解决方案