时间戳

首页 > 解决方案 > 如何在 HSplitView 的子视图上设置最大宽度

macos - 如何在 HSplitView 的子视图上设置最大宽度

问题描述

我HSplitView在 macOS 上遇到了一些问题，我不确定这是错误还是我做错了什么。

我正在尝试创建一个带有[Sidebar | Main Content | Inspector]布局的应用程序。这类似于 SF Symbols 应用程序，您可以在其中查看有关所选图标的更多信息。

我采取的方法是将Main ContentandInspector视图放在HSplitView. 在 a only 中拥有三个视图NavigationView似乎使用了 Mail 模式[List | List | Detail]，这不是我正在寻找的布局。

我看到的问题是，当我maxWidth在Inspector视图上设置 a 并将分隔线向左拖动时，Main Content视图的大小会调整为小于可用空间。父HSplitView级没有调整大小，所以我不确定我是使用了错误的修饰符还是在错误的地方使用了它们。

我在 github 上设置了一个基本的测试用例。如果你们都可以提供帮助或指导，那就太棒了。

观察到的行为 观察到的行为的 GIF

预期行为 预期行为的 GIF

import SwiftUI

struct A: View {
    var body: some View {
        VStack {
            Spacer()
            
            HStack {
                Spacer()
                
                Text("Pane A")
                
                Spacer()
            }
            
            Spacer()
        }
        .frame(
            minWidth: 200,
            maxWidth: .infinity,
            maxHeight: .infinity,
            alignment: .leading
        )
        .background(Color.red)
        .foregroundColor(.black)
        .layoutPriority(1)
    }
}

struct B: View {
    var body: some View {
        VStack {
            Spacer()
            
            HStack {
                Spacer()
                
                Text("Pane B")
                
                Spacer()
            }
            
            Spacer()
        }
        .frame(
            minWidth: 200,
            idealWidth: 250,
            maxWidth: 300,
            maxHeight: .infinity
        )
        .background(Color.purple)
        .foregroundColor(.black)
    }
}

struct ContentView: View {
    var body: some View {
        HSplitView {
            A()
            B()
        }
        .frame(
            minWidth: 0,
            maxWidth: .infinity,
            maxHeight: .infinity
        )
        .background(Color.blue)
    }
}e

谢谢！

标签： macosswiftui

解决方案

我这几天也遇到同样的问题，一下子就解决了。

需要拖动View

HSplitView {
    View1()
    View2()
}

直观上，我们会设置 View1 的最大宽度，但是 SwiftUI 拖动时，View1 超过了最大宽度，就会显示莫名的错误

HSplitView {
    View1()
        .frame(maxWidth: 300)
    View2()
}

解决 方法 设置 View2 的最小宽度，让 View 自动填充所有空间。不会有拖拽问题

HSplitView {
    View1()
    View2()
        .frame(minWidth: 500)
}

推荐阅读