无法在横向中将列表的宽度设置为 0答案

【问题标题】：Can't set width of a List to 0 in landscape无法在横向中将列表的宽度设置为 0
【发布时间】：2020-06-10 06:22:30
【问题描述】：

我正在尝试使用列表进行滑动侧面板。问题是在带有安全区域指南的设备上，我无法在横向上将列表的宽度设置为 0。

struct ContentView: View {
  var body: some View {
    HStack {
        Spacer()
        List {
            Text("1")
            Text("2")
        }
        .frame(width:0)
    }
    .background(Color.green)
  }
}

在纵向模式下，它看起来像：

横向：

知道如何完全隐藏列表吗？

在没有安全区域的设备上，一切正常，没有问题。

我发现解决方法是添加例如

Rectangle().frame(width: 0)

到同一个 HStack，那么在所有情况下都不会显示列表，但这看起来很奇怪。

6 月 10 日更新： 我一直在与 Apple DTS 团队讨论这个问题，他们证实我正在观察系统错误（现在通过 FB7729714 向工程团队报告）。另一方面，他们指出我设置视图的宽度会导致子视图的重新布局，因此设置为 0 是更复杂的事情。因此建议在滑动视图等情况下使用位置和偏移量。

【问题讨论】：

您到底想达到什么目的？为什么List 必须在屏幕上可见？
@pawello2222，正如我在开头所写的那样，在我的应用程序中，我有一个侧面板，可以通过按下控制按钮来关闭或打开（从右侧滑出或滑入）。一切都很顺利。但在测试过程中，我发现在类似 iPhoneX 的设备上的横向模式下，侧面板并没有完全隐藏，无论我做什么，它都会留在屏幕上。问题仅在于列表位于面板内部时。有趣的是 - 如果我将 Rectangle().frame(width:0) 添加到同一个 HStack 中，侧面板会很好地关闭。如果我添加间距 (HStack(spacing:0) {...) - 再次，列表是“不可隐藏”

标签： swiftui

【解决方案1】：

由于您没有提供更多信息，我不确定您的代码看起来如何，但这里是您如何在 SwiftUI 中实现滑动菜单而不需要额外的黑客攻击。

您使用GeometryReader、offset 和动画过渡显示/隐藏侧面板：

struct ContentView: View {
    @State var showMenu = false

    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                ZStack(alignment: .leading) {
                    MainView(showMenu: self.$showMenu)
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .offset(x: self.showMenu ? geometry.size.width : 0)
                        .disabled(self.showMenu ? true : false)
                    if self.showMenu {
                        MenuView()
                            .frame(width: geometry.size.width)
                            .transition(.move(edge: .leading))
                    }
                }
            }
            .background(Color.red)
            .navigationBarTitle("Side Menu", displayMode: .inline)
            .navigationBarItems(leading: (
                Button(action: {
                    withAnimation {
                        self.showMenu.toggle()
                    }
                    }) {
                    Image(systemName: "line.horizontal.3")
                        .imageScale(.large)
                }
                ))
        }
    }
}

struct MainView: View {
    @Binding var showMenu: Bool

    var body: some View {
        Button(action: {
            withAnimation {
                self.showMenu = true
            }
        }) {
            Text("Show Menu")
        }
    }
}

struct MenuView: View {
    var body: some View {
        List {
            Text("Item 1")
            Text("Item 2")
            Spacer()
        }
        .background(Color.green)
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

这段代码的完整解释在本教程中：How To Create A Side Menu In SwiftUI。

您也可以尝试将其添加到您的Views 以填满整个屏幕：

.edgesIgnoringSafeArea()

在 Xcode 11.5 中测试。滑块从屏幕上完全消失 - 我希望这是您想要实现的。

【讨论】：