mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-02 17:22:01 +08:00
231 lines
10 KiB
Plaintext
231 lines
10 KiB
Plaintext
---
|
|
sidebar_position: 4
|
|
---
|
|
|
|
# メニュー
|
|
|
|
Wailsプロジェクトに、アプリケーションメニューを追加することができます。 [Menu](#menu)構造体を定義し、アプリケーション設定の[`Menu`](../reference/options.mdx#menu)オプションへ設定するか、ランタイムの[MenuSetApplicationMenu](../reference/runtime/menu.mdx#menusetapplicationmenu)メソッドを呼び出すことで、メニューを表示させることができます。
|
|
|
|
メニューを作成する例:
|
|
|
|
```go
|
|
|
|
app := NewApp()
|
|
|
|
AppMenu := menu.NewMenu()
|
|
FileMenu := AppMenu.AddSubmenu("File")
|
|
FileMenu.AddText("&Open", keys.CmdOrCtrl("o"), openFile)
|
|
FileMenu.AddSeparator()
|
|
FileMenu.AddText("Quit", keys.CmdOrCtrl("q"), func(_ *menu.CallbackData) {
|
|
runtime.Quit(app.ctx)
|
|
})
|
|
|
|
if runtime.GOOS == "darwin" {
|
|
AppMenu.Append(menu.EditMenu()) // on macos platform, we should append EditMenu to enable Cmd+C,Cmd+V,Cmd+Z... shortcut
|
|
}
|
|
|
|
err := wails.Run(&options.App{
|
|
Title: "Menus Demo",
|
|
Width: 800,
|
|
Height: 600,
|
|
Menu: AppMenu, // reference the menu above
|
|
Bind: []interface{}{
|
|
app,
|
|
},
|
|
)
|
|
// ...
|
|
```
|
|
|
|
Menu構造体を更新し、[MenuUpdateApplicationMenu](../reference/runtime/menu.mdx#menuupdateapplicationmenu)メソッドを呼び出すことで、メニューを動的に更新することも可能です。
|
|
|
|
上記の例では、ヘルパーメソッドを使用していますが、Menu構造体を手動で構築することも可能です。
|
|
|
|
## Menu
|
|
|
|
Menuは、MenuItemのコレクションです。
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
|
type Menu struct {
|
|
Items []*MenuItem
|
|
}
|
|
```
|
|
|
|
アプリケーションメニューにおいて、各MenuItemは、"編集"などの単一メニューを表します。
|
|
|
|
メニューを構築するするためのシンプルなヘルパーメソッドが提供されています:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
|
func NewMenuFromItems(first *MenuItem, rest ...*MenuItem) *Menu
|
|
```
|
|
|
|
これにより、コードのレイアウトが、実際のメニューと似たレイアウトになるため、メニュー項目を作成した後にそれを手動で追加するといった作業は必要なくなります。 ヘルパーを使用せず、メニュー項目を作成して手動でメニューに追加することもできます。
|
|
|
|
## MenuItem
|
|
|
|
MenuItemは、メニュー内の項目を表します。
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
|
// MenuItem represents a menu item contained in a menu
|
|
type MenuItem struct {
|
|
Label string
|
|
Role Role
|
|
Accelerator *keys.Accelerator
|
|
Type Type
|
|
Disabled bool
|
|
Hidden bool
|
|
Checked bool
|
|
SubMenu *Menu
|
|
Click Callback
|
|
}
|
|
```
|
|
|
|
| フィールド | 型 | 内容 |
|
|
| ----------- | ------------------------------------ | -------------------------------------------- |
|
|
| Label | string | メニューのテキスト |
|
|
| Accelerator | [\*keys.Accelerator](#accelerator) | このメニュー項目のキーバインディング |
|
|
| 型 | [型](#type) | メニュー項目の種類 |
|
|
| Disabled | bool | メニュー項目を無効化する |
|
|
| Hidden | bool | メニュー項目を非表示にする |
|
|
| Checked | bool | 項目にチェックを追加する (チェックボックス & ラジオタイプ) |
|
|
| SubMenu | [\*Menu](#menu) | サブメニューを設定する |
|
|
| Click | [Callback](#callback) | メニューがクリックされたときのコールバック関数 |
|
|
| Role | string | メニュー項目に[ロール](#role)を定義する。 現在のところ、Macでのみ有効です。 |
|
|
|
|
### Accelerator
|
|
|
|
Accelerator(キーボードショートカット) は、キーストロークとメニュー項目とのバインドを定義します。 Wailsでは、Acceleratorを、キー + [Modifier](#modifier)の組み合わせとして定義しています。 これらは`"github.com/wailsapp/wails/v2/pkg/menu/keys"`パッケージから利用可能です。
|
|
|
|
例:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
|
// Defines cmd+o on Mac and ctrl-o on Window/Linux
|
|
myShortcut := keys.CmdOrCtrl("o")
|
|
```
|
|
|
|
キーは、`+`を除いて、キーボード上の任意の一文字です(`+`は、`plus`で定義されています)。 いくつかのキーは一文字で表現できないため、名前付き文字のセットがあります:
|
|
|
|
| | | | |
|
|
|:-----------:|:-----:|:-----:|:---------:|
|
|
| `backspace` | `f1` | `f16` | `f31` |
|
|
| `tab` | `f2` | `f17` | `f32` |
|
|
| `return` | `f3` | `f18` | `f33` |
|
|
| `enter` | `f4` | `f19` | `f34` |
|
|
| `escape` | `f5` | `f20` | `f35` |
|
|
| `left` | `f6` | `f21` | `numlock` |
|
|
| `right` | `f7` | `f22` | |
|
|
| `up` | `f8` | `f23` | |
|
|
| `down` | `f9` | `f24` | |
|
|
| `space` | `f10` | `f25` | |
|
|
| `delete` | `f11` | `f36` | |
|
|
| `home` | `f12` | `f37` | |
|
|
| `end` | `f13` | `f38` | |
|
|
| `page up` | `f14` | `f39` | |
|
|
| `page down` | `f15` | `f30` | |
|
|
|
|
またWailsでは、Electronと同じ構文のAcceleratorを解析することもできます。 設定ファイルにAcceleratorを保存する際に便利です。
|
|
|
|
例:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
|
// Defines cmd+o on Mac and ctrl-o on Window/Linux
|
|
myShortcut, err := keys.Parse("Ctrl+Option+A")
|
|
```
|
|
|
|
#### Modifier
|
|
|
|
ModifierはAcceleratorキーと組み合わせて使用できるキーです:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
|
const (
|
|
// CmdOrCtrlKey represents Command on Mac and Control on other platforms
|
|
CmdOrCtrlKey Modifier = "cmdorctrl"
|
|
// OptionOrAltKey represents Option on Mac and Alt on other platforms
|
|
OptionOrAltKey Modifier = "optionoralt"
|
|
// ShiftKey represents the shift key on all systems
|
|
ShiftKey Modifier = "shift"
|
|
// ControlKey represents the control key on all systems
|
|
ControlKey Modifier = "ctrl"
|
|
)
|
|
```
|
|
|
|
Modifierを使用してAcceleratorを作成するためのヘルパーメソッドがあります:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
|
func CmdOrCtrl(key string) *Accelerator
|
|
func OptionOrAlt(key string) *Accelerator
|
|
func Shift(key string) *Accelerator
|
|
func Control(key string) *Accelerator
|
|
```
|
|
|
|
Modifierは`keys.Combo(key string, modifier1 Modifier, modifier2 Modifier, rest ...Modifier)`を使用して組み合わせることができます:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
|
// Defines "Ctrl+Option+A" on Mac and "Ctrl+Alt+A" on Window/Linux
|
|
myShortcut := keys.Combo("a", ControlKey, OptionOrAltKey)
|
|
```
|
|
|
|
### 型
|
|
|
|
各メニュー項目は5種類のうちの1タイプを指定する必要があります:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
|
const (
|
|
TextType Type = "Text"
|
|
SeparatorType Type = "Separator"
|
|
SubmenuType Type = "Submenu"
|
|
CheckboxType Type = "Checkbox"
|
|
RadioType Type = "Radio"
|
|
)
|
|
```
|
|
|
|
使い勝手の良い、メニュー項目をすばやく作成するためのヘルパーメソッドが提供されています:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
|
func Text(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
|
|
func Separator() *MenuItem
|
|
func Radio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
|
func Checkbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
|
func SubMenu(label string, menu *Menu) *Menu
|
|
```
|
|
|
|
"Add"ヘルパーメソッドを使用して、メニューに対して直接メニュー項目を追加することも可能です:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
|
func (m *Menu) AddText(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
|
|
func (m *Menu) AddSeparator() *MenuItem
|
|
func (m *Menu) AddRadio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
|
func (m *Menu) AddCheckbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
|
func (m *Menu) AddSubMenu(label string, menu *Menu) *MenuI
|
|
```
|
|
|
|
ラジオグループに関する注意事項: ラジオグループは、メニュー内でお互いに隣接しているラジオメニュー項目同士で1つのグループとして定義されます。 つまり、手動でグループ化する必要はありません。 逆に言うと、2つのラジオグループを隣接させることはできません。ラジオグループの間には、ラジオ項目ではないメニューアイテムが必要です。
|
|
|
|
### Callback
|
|
|
|
各メニュー項目には、項目がクリックされたときに呼び出されるコールバックがあります:
|
|
|
|
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
|
type Callback func(*CallbackData)
|
|
|
|
type CallbackData struct {
|
|
MenuItem *MenuItem
|
|
}
|
|
```
|
|
|
|
このコールバックには、どのメニュー項目がコールバックをトリガーしたのかを識別できる、`CallbackData`構造体が渡されます。 これは、同じコールバックを呼び出すラジオグループを作成する際などに便利です。
|
|
|
|
### Role
|
|
|
|
:::info ロール
|
|
|
|
現在、ロールはMacでのみサポートされています。
|
|
|
|
:::
|
|
|
|
メニュー項目には、もともと事前に定義されたメニュー項目のロールを設定することができます。 現在サポートされているロールは次のとおりです:
|
|
|
|
| ロール | 説明 |
|
|
| ------------ | -------------------------------------------- |
|
|
| AppMenuRole | Macアプリケーションの標準メニュー。 `menu.AppMenu()`で作成できます。 |
|
|
| EditMenuRole | Macの標準的な編集メニュー。 `menu.EditMenu()`で作成できます。 |
|