Sitemap

How to use SplitView SwiftUI

2 min readMar 17, 2022

In my development, I used HSplitView and VSplitView to design the layout. Is very simple when you use SplitView In SwiftUI.

First.

You can do it like this.

Press enter or click to view image in full size
SplitView

And,how do I set the size of each view?

You would say: Just set the width and height of their frames.

Second.

Yes, I do it .

.frame(width: 100)
....
.frame(height: 150)
Press enter or click to view image in full size

It’s like what I want, but you can’t move the divider, it’s fixed. Then, I used the idealWidth and idealHeight properties instead. It like the first.

Wath can I do? I want to define their initial size, and I want the dividing line to be movable。

Last。

I did this, if you have a better way please let me know.

We need to determine whether the mouse is on the dividing line. If it is on the dividing line, set the width and height to be nil, and the dividing line is draggable at this time.

Because, we couldn’t get that state, so we had to add the divider and handle the mouse state ourselves. Also, we need to update the size of the view in time.

In the development of the implementation, you need to remove the useless, our custom dividing lines.

This way, I got it.

--

--

No responses yet