1

In Swing I use JSplitPane to create a region with a tree view to the left(leading) and a region with a hex viewer to the right(trailing) where the user can move the divider to adjust the space each get.

Since Jetpack Compose is still relatively new, basic components like SplitView (the hypothetical name for such a component following their naming scheme) don't yet exist. The closest concept I can see is Row and Column but those are not user-resizable (as far as I can tell.)

Without resorting to embedding a Swing JSplitPane and then embedding Compose components in each side of the split pane, is there a good way to do this?

I found one example which got me 90% of the way there, but there was some removed API which is incredibly difficult to find the replacement for as the release notes don't appear to even mention it. (!!)

Johann
  • 27,536
  • 39
  • 165
  • 279
Hakanai
  • 12,010
  • 10
  • 62
  • 132
  • 1
    `onDrag` -> `Modifier.pointerInput(Unit) { detectDragGestures { change, dragAmount -> } }`, `DensityAmbient` -> `LocalDensity` – Phil Dukhov Nov 26 '21 at 06:28
  • To be honest, taking design practices like a resizable pane for a desktop web app and applying them to mobile devices is just bad practice. It is very rare to find a mobile app with split panes. This is just poor design for a mobile app. Material Design doesn't even support that. – Johann Nov 26 '21 at 06:51
  • @Johann I'm making a desktop app. To be fair, the tags _do_ say android-jetpack-compose but it didn't seem like there was a plain jetpack-compose tag to choose from. – Hakanai Nov 26 '21 at 07:03
  • @PhilipDukhov that's a good pointer in the right direction, I'll just have to read up on whether passing Unit is acceptable or not because the help docs on that one really make it sound like I'm supposed to pass in a proper ID... – Hakanai Nov 26 '21 at 07:08
  • 1
    @Hakanai you need to pass any values on which your calculations depends, which can change during view lifecycle – Phil Dukhov Nov 26 '21 at 07:11
  • 1
    There actually is a tag for compose desktop. I replaced your existing tag with it. – Johann Nov 26 '21 at 08:27
  • @Johann well spotted, I didn’t expect they would take a word out of the name so I didn’t think to search for it. Still, it would be nice to have one tag covering both too since part of the point of Jetpack Compose is to share code between multiple targets. – Hakanai Nov 30 '21 at 01:24

1 Answers1

8

There is an official implementation for that. You can add this dependency to your build.gradle:

implementation 'org.jetbrains.compose.components:components-splitpane-desktop:1.0.1'

The newest version can be found here.

There is also a demo class in the official compose repository that shows how to use it.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Jannis
  • 106
  • 2
  • 4