How to implement the right detail panel by swiftUI?

Question

Created Oct ’21

Replies 3

Boosts 0

Views 1.9k

Participants 3

The video wwdc21-10062 claimed that by using swiftUI developers can build an app with a detail panel (like the right sidebar in Xcode), but didn't say how to implement that.

I have tried to use HSplitView but failed.

My code is like:

var body: some View {
    NavigationView {
        Text("sidebar")
        HSplitView {
            Text("Primary View")
            Text("Detail Panel")
        }
    }
}

Boost

Answer 1

Don Nissen OP

Feb ’22

Remove the HSplitView. This should give you three sections.

0

Answer 2

Peter_Schorn OP

Feb ’22

Try this:

NavigationView {
  Text("sidebar")
  HSplitView {
    Text("Primary View")
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .background(.blue)
    Text("Detail Panel")
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .background(.red)
  }
}

The background colors aren't even necessary. They just allow you to better visualize the bounds of each section of the HSplitView.

0

Answer 3

Peter_Schorn OP

Feb ’22

NavigationView {
  Text("sidebar")
  HSplitView {
    Text("Primary View")
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .background(.blue)
      .layoutPriority(1)
    Text("Detail Panel")
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .background(.red)
  }
}

0