How to customize a view's width in NavigationSplitView 관련

SwiftUI by Example

---

Back to Home

---

How to customize a view's width in NavigationSplitView | SwiftUI by Example

---

How to customize a view's width in NavigationSplitView

Updated for Xcode 15

SwiftUI's NavigationSplitView uses a system-standard width for the view it presents, but with the navigationSplitViewColumnWidth() modifier you can attempt to customize this.

Note

The system can choose to ignore the width you specify. At the time of writing this modifier is ignored on iPhone, and on iPad only works for values lower than the default size.

In its simplest form, sending a single value to navigationSplitViewColumnWidth() causes it to use a fixed size, no smaller or larger:

NavigationSplitView {
    Text("Sidebar")
        .navigationSplitViewColumnWidth(100)
} content: {
   Text("Content")
        .navigationSplitViewColumnWidth(200)
} detail: {
    Text("Detail")
}

Download this as an Xcode project

However, if you're happy to allow flexibility – and if you're platform supports it, which right now might just be macOS – you an provide minimum, ideal, and maximum sizes instead, like this:

NavigationSplitView {
    Text("Sidebar")
        .navigationSplitViewColumnWidth(min: 100, ideal: 200, max: 300)
} content: {
   Text("Content")
        .navigationSplitViewColumnWidth(min: 100, ideal: 200, max: 300)
} detail: {
    Text("Detail")
}

Download this as an Xcode project

Similar solutions…

How to customize the display mode of NavigationSplitView | SwiftUI by Example

---

How to customize the display mode of NavigationSplitView

How to make two views the same width or height | SwiftUI by Example

---

How to make two views the same width or height

How to create a two-column or three-column layout with NavigationSplitView | SwiftUI by Example

---

How to create a two-column or three-column layout with NavigationSplitView

How to control which NavigationSplitView column is shown in compact layouts | SwiftUI by Example

---

How to control which NavigationSplitView column is shown in compact layouts

How to let users customize toolbar buttons | SwiftUI by Example

---

How to let users customize toolbar buttons