问题描述
我有一个样式为的答案
我添加了一种与默认颜色匹配的背景颜色:
文本(单词).listRowBackground(Color(UIColor.systemGroupedBackground))
但是发射故障仍然存在.
解决方案
您可以根据 @Environment(\.horizontalSizeClass)
使用不同的 NavigationStyle
:
struct CustomNavigationStyle:ViewModifier {@Environment(\.horizontalSizeClass)var horizontalSizeClass@ViewBuilderfunc body(content:Content)->一些视图{如果horizontalSizeClass == .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
This is because in iOS 14 the default styles of NavigationView
or List
are no longer always the same. See:
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后面的白色背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!