Jetpack Compose 从开门到入门之 MenuBar桌面菜单（Desktop Menu）

MenuBar是桌面版本才有的功能。也就是传统桌面应用的菜单。效果如下：

如果你写过桌面版本的Compose,在main方法里面有一个Window,MenuBar需要定义在Window里面，在别的地方是不能引用的。

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

下面我们将通过代码实现下面的效果。

我下了完整的代码，虽然有点长但其实非常的简单，可以直接复制执行看下效果。
主要功能就是MenuBar里面的菜单选项，以及一个用于显示点击结果的Box。

MenuBar可以定义Menu也就是一个菜单组。Menu可以定义Item也就是每一个菜单选项。

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") }//菜单里面有一个exit功能，这个变量判断是否关闭应用var isOpen by remember { mutableStateOf(true) }//flatlaf是一个swing主题，可以通过在gradle中添加 implementation("com.formdev:flatlaf:2.3")使用// FlatIntelliJLaf.setup()if (isOpen) {var isSubmenuShowing by remember { mutableStateOf(false) }//onCloseRequest 一般写成这样 onCloseRequest = ::exitApplication//::exitApplications是系统调用，这里我们定义一个isOpen手动控制Window(onCloseRequest = { isOpen = false }) {MenuBar {//mnemonic表示菜单快捷键，指定后按alt+对应的键是可以快速弹出菜单的Menu(text = "File", mnemonic = 'F') {Item(text = "Copy",onClick = { action = "Last action: Copy" },//显示快捷键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),//可以自定义设置Icon，可以指定resource目录下的图片，也可以继承Painter自己话一个icon = painterResource("save.png"))}Menu("Actions", mnemonic = 'A') {//CheckboxItem可以做判断隐藏显示一些功能CheckboxItem("Advanced settings",checked = isSubmenuShowing,onCheckedChange = {isSubmenuShowing = !isSubmenuShowing})//isSubmenuShowing为真，这些菜单才出现if (isSubmenuShowing) {Menu("Settings") {Item("Setting 1", onClick = { action = "Last action: Setting 1" })Item("Setting 2", onClick = { action = "Last action: Setting 2" })}}//菜单分割线Separator()//TrayIcon是一个自定义Painter，还是直接用图片比较好Item("About", icon = TrayIcon, onClick = { action = "Last action: About" })Item("Exit", onClick = { isOpen = false }, shortcut = KeyShortcut(Key.Escape), mnemonic = 'E')}}//显示哪个菜单被点击Box(modifier = Modifier.fillMaxSize(),contentAlignment = Alignment.Center) {Text(text = action)}}}
}
//自定义Painter，还是直接用图片比较好
object TrayIcon : Painter() {override val intrinsicSize = Size(256f, 256f)override fun DrawScope.onDraw() {drawOval(Color(0xFFFFA500))}
}

菜单的主题是无法通过外面包裹一个Theme来实现更换的，默认情况下会跟随系统样式，样子就是swing默认的样子非常的丑。

可以通过添加第三方主题flatlaf来美化，Compose官方将来应该会提供自己的支持。

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

在main方法开头添加下面的代码。

FlatIntelliJLaf.setup()

效果就是文章开头的效果。

如果对你有帮助，请评论留言点赞交流。
如果对你有帮助，请评论留言点赞交流。
如果对你有帮助，请评论留言点赞交流。

Jetpack Compose 从开门到入门之 MenuBar桌面菜单（Desktop Menu）相关推荐

Jetpack Compose入门详解（实时更新）
Jetpack Compose入门详解前排提醒前言(Compose是什么) 1.实战准备一.优势与缺点二.前四课三.标准布局组件 1.Column 2.Row 3.Box 四.xml和com ...
Android原生UI开发框架《Jetpack Compose入门到精通》最全上手指南
前言在去年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明 ...
告别XML，Android新声明式UI框架《Jetpack Compose入门到精通》最全开发指南
什么是Jetpack Compose? Jetpack Compose是Android的新声明式UI框架.长期以来, Android 开发人员习惯于使用带有状态视图的xml编写UI,这些状态视图通过逐 ...
《Jetpack Compose 从入门到实战》带你踏上 Compose 开发之旅~
写书的契机 Jetpack Compose 首次亮相于 2019 年的 Google I/O 大会,彼时的我正在为抖音客户端研发一款基于原生视图渲染的声明式 UI 框架,由于声明式开发理念在当时还过于 ...
重磅首发！Jetpack Compose 完全开发手册，从入门到精通！
前言 Jetpack 架构组件及标准化开发模式的确立,意味着 Android 开发已步入成熟阶段.现在的Android岗招人的时候也非常看重应试者对 Jetpack 架构组件的理解程度. 今天 ...
Jetpack Compose 从入门到入门（六）
本篇说说Compose中的Canvas. 1. Canvas @Composable fun Canvas(modifier: Modifier,onDraw: DrawScope.() -> ...
Jetpack Compose 从入门到入门（三）
本篇开始介绍Jetpack Compose 中的修饰符Modifier.修饰符可以用来执行以下操作: 更改可组合项的大小.布局.行为和外观. 添加信息,如无障碍标签. 处理用户输入. 添加高级互动,如 ...
Jetpack Compose 从入门到入门（四）
本篇开始介绍Jetpack Compose 中常用的组件.有一部分之前的文章中也出现过,今天详细说明一下. 1. Text 日常最常用的应该就是显示文字,所以有必要说一下Text控件.首先源码如下: ...
Jetpack Compose入门
简介 Jetpack Compose是用于构建原生Android界面的新工具包.它是一种声明式的UI布局,其官方声称可简化并加快Android上的界面开发,使用更少的代码.强大的工具和直观的Kotli ...

Jetpack Compose 从开门到入门之 MenuBar桌面菜单（Desktop Menu）

Jetpack Compose 从开门到入门之 MenuBar桌面菜单（Desktop Menu）相关推荐

最新文章

热门文章