本文介绍了SwiftUI-如何在肖像模式下删除以SidebarListStyle样式设置的List后面的白色背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个样式为的答案

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

 文本(单词).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

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后面的白色背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 14:26
查看更多