SwiftUI - 如何在侧边栏列表样式（SidebarListStyle）下，移除横屏模式下带有白色背景的List？

Question

我有一个使用SidebarListStyle样式（iOS 14中新增）的列表，位于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)
        }
    }
}

问题在于列表中的每一行都有一个白色矩形，但仅在纵向模式下出现，横向模式下正常。

我不想要这个白色背景，有谁知道如何去除它？此外，在启动应用程序时，似乎会出现故障--起初很好，然后添加了白色背景。

奇怪的是，如果我在NavigationView中添加.navigationViewStyle(StackNavigationViewStyle())，则白色背景消失并且启动良好。

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

左侧：如何启动，右侧：启动后的外观

↑ 这是我想要的样子。

然而，现在横屏模式仅限于全宽度列表，这也不是我想要的。

编辑：@Omid的答案

我添加了一个背景颜色来匹配默认颜色：

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

但是启动故障仍然存在。

编辑：@pawello2222的答案

运行良好，只是在旋转时有一种奇怪的过渡效果。

- aheze

---

你能解释一下吗？现在你遇到了行背景色的问题或者启动时的动画？告诉我你想要发生什么？ - ios coder

我有两个问题合并成一个。当它启动时，行会从清晰的背景闪烁到白色背景。我希望它在启动时没有闪烁，并保持清晰的背景。我会添加一个gif。 - aheze

你不能更改那个 fickers，它在 SwiftUI 上支持动画。 - ios coder

@Omid 嗯，这很奇怪... - aheze

这个略带轻盈的动画是在SwiftUI中完成的。 - ios coder

Answer 1

问题

奇怪的是，如果我在 NavigationView 中添加 .navigationViewStyle(StackNavigationViewStyle()) ，白色背景将消失并且会正常启动。

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

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

---

解决方法

您可以根据 @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())

- pawello2222

---

不错！运行得很好，但是不幸的是在从竖屏切换到横屏和再次切换回来时出现了奇怪的动画。不过没关系，可以看一下我帖子的编辑。 - aheze

Answer 2

你可以将颜色更改为你想要的任何颜色！

Text(word)
  .listRowBackground(Color.yellow)

- ios coder

---

谢谢你的回答。不过我找到了其他问题——当我第一次启动应用程序时，它瞬间很好，但突然之间就有了白色背景。当我尝试了你的答案后，同样的事情发生了。请看我帖子的编辑。 - aheze