GUI: add some tool view

Author: cofcool

desktop-gui/compose/src/main/kotlin/Main.kt

@@ -1,38 +1,21 @@
 import androidx.compose.desktop.ui.tooling.preview.Preview
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.material.Button
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
+import view.ContentView
+import view.ToolsView
 
 @Composable
 @Preview
 fun App() {
-    var text by remember { mutableStateOf("Hello, World!") }
+    var tool by remember { mutableStateOf("tool") }
 
     MaterialTheme {
         Row {
-            Column {
-                Row {
-                    Text("Tools")
-                }
-                Row {
-                    LazyColumn {
-                        items(5) {
-                            Row { Button(onClick = { println("$it") }) {
-                                Text("Hello, $it")
-                            } }
-                        }
-                    }
-                }
-            }
-            Column {
-                Text("Contents")
-            }
+            ToolsView()
+            ContentView()
         }
 
     }

desktop-gui/compose/src/main/kotlin/view/ContentView.kt

@@ -0,0 +1,37 @@
+package view
+
+import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Divider
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Preview
+@Composable
+fun ContentView() {
+    Column(
+        Modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Row(
+            modifier = Modifier.height(Dp(30F)),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text("Contents")
+        }
+        Row(modifier = Modifier.padding(2.dp)) {
+            Divider(
+                color = Color.LightGray,
+                modifier = Modifier.fillMaxWidth().height(1.dp)
+            )
+        }
+        Row {
+            Text("Content")
+        }
+    }
+}

desktop-gui/compose/src/main/kotlin/view/ToolsView.kt

@@ -0,0 +1,54 @@
+package view
+
+import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.Button
+import androidx.compose.material.Divider
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+
+@Composable
+@Preview
+fun ToolsView() {
+    Column {
+        Row {
+            Row {
+                Column(modifier = Modifier.width(120.dp)) {
+                    Row {
+                        Text(
+                            "Tools",
+                            textAlign = TextAlign.Center,
+                            modifier = Modifier.fillMaxWidth()
+                        )
+
+                    }
+                    Row {
+                        LazyColumn {
+                            items(5) {
+                                Row(
+                                    Modifier.fillMaxWidth(),
+                                    horizontalArrangement = Arrangement.SpaceEvenly
+                                ) {
+                                    Button(onClick = { println("$it") }) {
+                                        Text("Hello, $it")
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                Column(modifier = Modifier.width(2.dp)) {
+                    Divider(
+                        color = Color.LightGray,
+                        modifier = Modifier.fillMaxHeight().width(1.dp)
+                    )
+                }
+            }
+        }
+    }
+}