Question

我正在尝试使用列表滑动侧面板。问题是在带有安全区指南的设备上，我无法将横向的列表宽度设置为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甚至更复杂。因此，建议在滑动视图等情况下使用位置和偏移。

Answer 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中测试。滑块会从屏幕上完全消失-我希望这是您想要实现的目标。

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

1 个答案: