Jetpack compose menubar Desktop Menu from door opening to entry

MenuBar It is only available in the desktop version . That is, the menu of traditional desktop applications . The effect is as follows ：

If you have written a desktop version of Compose, stay main There is one in the method Window,MenuBar Need to be defined in Window Inside , It cannot be quoted elsewhere .

@Composable
fun MyUI(){
    
}
fun main() = application {
    
    Window(onCloseRequest = ::exitApplication) {
    
        MenuBar(){
    
           //....
        }
        MyUI()
        
    }
}

Now we will implement the following effects through code .

I put down the complete code , It's a little long, but it's actually very simple , You can directly copy the execution to see the effect .
The main function is MenuBar The menu options inside , And a for displaying the click results Box.

MenuBar Can define Menu That is, a menu group .Menu Can define Item That is, every menu option .

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyShortcut
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.window.MenuBar
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import com.formdev.flatlaf.FlatIntelliJLaf


@OptIn(ExperimentalComposeUiApi::class)
fun main() = application {
    
    var action by remember {
     mutableStateOf("Last action: None") }
    // There is one in the menu exit function , This variable determines whether to close the application 
    var isOpen by remember {
     mutableStateOf(true) }

   //flatlaf It's a swing The theme , It can be done by gradle Add  implementation("com.formdev:flatlaf:2.3") Use 
   // FlatIntelliJLaf.setup()


    if (isOpen) {
    
        var isSubmenuShowing by remember {
     mutableStateOf(false) }
        //onCloseRequest  It's usually written like this  onCloseRequest = ::exitApplication
        //::exitApplications It's a system call , So let's define one here isOpen Manual control 
        Window(onCloseRequest = {
     isOpen = false }) {
    

            MenuBar {
    
                //mnemonic Indicates the menu shortcut key , Press... After specifying alt+ The corresponding key can quickly pop up the menu 
                Menu(text = "File", mnemonic = 'F') {
    
                    Item(
                        text = "Copy",
                        onClick = {
     action = "Last action: Copy" },
                        // Show shortcuts 
                        shortcut = KeyShortcut(Key.C, ctrl = true)
                    )
                    Item(
                        "Paste",
                        onClick = {
     action = "Last action: Paste" },
                        shortcut = KeyShortcut(Key.V, ctrl = true)
                    )
                    Item(
                        "Save",
                        onClick = {
     action = "Last action: Save" },
                        shortcut = KeyShortcut(Key.S, ctrl = true),
                        // You can customize the settings Icon, You can specify resource Pictures under the directory , Can also inherit Painter Say it yourself 
                        icon = painterResource("save.png")
                    )
                }
                Menu("Actions", mnemonic = 'A') {
    
                    //CheckboxItem You can make judgments to hide and display some functions 
                    CheckboxItem(
                        "Advanced settings",
                        checked = isSubmenuShowing,
                        onCheckedChange = {
    
                            isSubmenuShowing = !isSubmenuShowing
                        }
                    )
                    //isSubmenuShowing It's true , These menus appear 
                    if (isSubmenuShowing) {
    
                        Menu("Settings") {
    
                            Item("Setting 1", onClick = {
     action = "Last action: Setting 1" })
                            Item("Setting 2", onClick = {
     action = "Last action: Setting 2" })
                        }
                    }
                    // Menu divider 
                    Separator()
                    //TrayIcon It's a custom Painter, It is better to use pictures directly 
                    Item("About", icon = TrayIcon, onClick = {
     action = "Last action: About" })
                    Item("Exit", onClick = {
     isOpen = false }, shortcut = KeyShortcut(Key.Escape), mnemonic = 'E')
                }
            }

            // Show which menu was clicked 
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
    
                Text(text = action)
            }

        }

    }
}
// Customize Painter, It is better to use pictures directly 
object TrayIcon : Painter() {
    
    override val intrinsicSize = Size(256f, 256f)

    override fun DrawScope.onDraw() {
    
        drawOval(Color(0xFFFFA500))
    }
}

The theme of the menu is that you can't wrap a Theme To achieve replacement , By default, it will follow the system style , It looks like swing The default looks very ugly .

You can add a third-party theme flatlaf To beautify ,Compose Officials should provide their own support in the future .

  implementation("com.formdev:flatlaf:2.3")

stay main Add the following code at the beginning of the method .

FlatIntelliJLaf.setup()

The effect is the effect at the beginning of the article .

If it helps you , Please comment and leave a message to like the exchange .
If it helps you , Please comment and leave a message to like the exchange .
If it helps you , Please comment and leave a message to like the exchange .