mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-02 12:30:48 +08:00
298 lines
9.5 KiB
Plaintext
298 lines
9.5 KiB
Plaintext
---
|
||
title: 对话框
|
||
sidebar_position: 5
|
||
---
|
||
|
||
# 对话框
|
||
|
||
## 概述
|
||
|
||
运行时的这一部分提供对原生对话框的调用，例如文件选择器和消息框。
|
||
|
||
:::info Javascript
|
||
JS 运行时当前不支持对话框。
|
||
:::
|
||
|
||
### 打开选择目录对话框
|
||
|
||
打开一个对话框，提示用户选择目录。可以使用 [打开选择文件对话框参数选项](#打开选择文件对话框参数选项)进行自定义。
|
||
|
||
Go 方法签名: `OpenDirectoryDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
|
||
|
||
返回值: 所选目录（如果用户取消则为空白）或错误
|
||
|
||
### 打开选择文件对话框
|
||
|
||
打开一个对话框，提示用户选择文件。可以使用[打开选择文件对话框参数选项](#打开选择文件对话框参数选项)进行自定义。
|
||
|
||
Go 方法签名: `OpenFileDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
|
||
|
||
返回值: 所选文件（如果用户取消则为空白）或错误
|
||
|
||
### 打开选择多个文件对话框
|
||
|
||
打开一个对话框，提示用户选择多个文件。可以使用[打开选择文件对话框参数选项](#打开选择文件对话框参数选项)进行自定义。
|
||
|
||
Go 方法签名: `OpenMultipleFilesDialog(ctx context.Context, dialogOptions OpenDialogOptions) ([]string, error)`
|
||
|
||
返回值: 选定的文件（如果用户取消则为零）或错误
|
||
|
||
### 保存文件对话框
|
||
|
||
打开一个对话框，提示用户选择文件名以进行保存。可以使用[保存文件对话框参数选项](#保存文件对话框参数选项)自定义。
|
||
|
||
Go 方法签名: `SaveFileDialog(ctx context.Context, dialogOptions SaveDialogOptions) (string, error)`
|
||
|
||
返回值: 所选文件（如果用户取消则为空白）或错误
|
||
|
||
### 消息对话框
|
||
|
||
使用消息对话框显示消息。可以使用[消息对话框参数选项](#消息对话框参数选项)进行自定义。
|
||
|
||
Go 方法签名: `MessageDialog(ctx context.Context, dialogOptions MessageDialogOptions) (string, error)`
|
||
|
||
返回值: 所选按钮的文本或错误
|
||
|
||
## 参数选项
|
||
|
||
### 打开选择文件对话框参数选项
|
||
|
||
```go
|
||
type OpenDialogOptions struct {
|
||
DefaultDirectory string
|
||
DefaultFilename string
|
||
Title string
|
||
Filters []FileFilter
|
||
ShowHiddenFiles bool
|
||
CanCreateDirectories bool
|
||
ResolvesAliases bool
|
||
TreatPackagesAsDirectories bool
|
||
}
|
||
```
|
||
|
||
| 字段 | 描述 | Win | Mac | Lin |
|
||
| -------------------------- | --------------------------------- | --- | --- | --- |
|
||
| DefaultDirectory | 对话框打开时显示的目录 | ✅ | ✅ | ✅ |
|
||
| DefaultFilename | 默认文件名 | ✅ | ✅ | ✅ |
|
||
| Title | 对话框的标题 | ✅ | ✅ | ✅ |
|
||
| [Filters](#文件过滤) | 文件过滤器列表 | ✅ | ✅ | ✅ |
|
||
| ShowHiddenFiles | 显示系统隐藏的文件 | | ✅ | ✅ |
|
||
| CanCreateDirectories | 允许用户创建目录 | | ✅ | |
|
||
| ResolvesAliases | 如果为 true，则返回文件而不是别名 | | ✅ | |
|
||
| TreatPackagesAsDirectories | 允许导航到包 | | ✅ | |
|
||
|
||
### 保存文件对话框参数选项
|
||
|
||
```go
|
||
type SaveDialogOptions struct {
|
||
DefaultDirectory string
|
||
DefaultFilename string
|
||
Title string
|
||
Filters []FileFilter
|
||
ShowHiddenFiles bool
|
||
CanCreateDirectories bool
|
||
TreatPackagesAsDirectories bool
|
||
}
|
||
```
|
||
|
||
| 字段 | 描述 | Win | Mac | Lin |
|
||
| -------------------------- | ---------------------- | --- | --- | --- |
|
||
| DefaultDirectory | 对话框打开时显示的目录 | ✅ | ✅ | ✅ |
|
||
| DefaultFilename | 默认文件名 | ✅ | ✅ | ✅ |
|
||
| Title | 对话框的标题 | ✅ | ✅ | ✅ |
|
||
| [Filters](#文件过滤) | 文件过滤器列表 | ✅ | ✅ | ✅ |
|
||
| ShowHiddenFiles | 显示系统隐藏的文件 | | ✅ | ✅ |
|
||
| CanCreateDirectories | 允许用户创建目录 | | ✅ | |
|
||
| TreatPackagesAsDirectories | 允许导航到包 | | ✅ | |
|
||
|
||
### 消息对话框参数选项
|
||
|
||
```go
|
||
type MessageDialogOptions struct {
|
||
Type DialogType
|
||
Title string
|
||
Message string
|
||
Buttons []string
|
||
DefaultButton string
|
||
CancelButton string
|
||
}
|
||
```
|
||
|
||
| 字段 | 描述 | Win | Mac | Lin |
|
||
| ------------- | ---------------------------------------------------- | --- | --- | --- |
|
||
| Type | 消息对话框的类型，例如问题、信息... | ✅ | ✅ | ✅ |
|
||
| Title | 对话框的标题 | ✅ | ✅ | ✅ |
|
||
| Message | 向用户显示的消息 | ✅ | ✅ | ✅ |
|
||
| Buttons | 按钮标题列表 | | ✅ | |
|
||
| DefaultButton | 带有此文本的按钮应被视为默认按钮。 Bound to `return` | | ✅ | |
|
||
| CancelButton | 带有此文本的按钮应被视为取消。Bound to `escape` | | ✅ | |
|
||
|
||
#### Windows
|
||
|
||
Windows 具有标准对话框类型，其中的按钮不可自定义。
|
||
返回的值将是以下之一："Ok"、"Cancel"、"Abort"、"Retry"、"Ignore"、"Yes"、"No"、"Try Again"或"Continue"
|
||
|
||
#### Linux
|
||
|
||
Linux 有标准的对话框类型，其中的按钮是不可定制的。返回的值将是以下之一：“Ok”、“Cancel”、“Yes”、“No”
|
||
|
||
#### Mac
|
||
|
||
Mac 上的消息对话框最多可以指定 4 个按钮。如果没有`DefaultButton`或`CancelButton`给出，第一个按钮被认为是默认的并绑定到`return`键。
|
||
|
||
对于以下代码：
|
||
|
||
```go
|
||
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
|
||
Title: "It's your turn!",
|
||
Message: "Select a number",
|
||
Buttons: []string{"one", "two", "three", "four"},
|
||
})
|
||
```
|
||
|
||
第一个按钮显示为默认值：
|
||
|
||
<div class="text--center">
|
||
<img
|
||
src="/img/runtime/dialog_no_defaults.png"
|
||
width="30%"
|
||
style={{
|
||
"box-shadow":
|
||
"rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px",
|
||
}}
|
||
/>
|
||
</div>
|
||
<br />
|
||
|
||
如果我们指定`DefaultButton`为“two”：
|
||
|
||
```go
|
||
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
|
||
Title: "It's your turn!",
|
||
Message: "Select a number",
|
||
Buttons: []string{"one", "two", "three", "four"},
|
||
DefaultButton: "two",
|
||
})
|
||
```
|
||
|
||
第二个按钮显示为默认值。当 `return` 被按下时，则返回数值“two”。
|
||
|
||
<div class="text--center">
|
||
<img
|
||
src="/img/runtime/dialog_default_button.png"
|
||
width="30%"
|
||
style={{
|
||
"box-shadow":
|
||
"rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px",
|
||
}}
|
||
/>
|
||
</div>
|
||
<br />
|
||
|
||
如果我们现在指定`CancelButton`为“three”：
|
||
|
||
```go
|
||
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
|
||
Title: "It's your turn!",
|
||
Message: "Select a number",
|
||
Buttons: []string{"one", "two", "three", "four"},
|
||
DefaultButton: "two",
|
||
CancelButton: "three",
|
||
})
|
||
```
|
||
|
||
带有“three”的按钮显示在对话框的底部。当`escape`被按下时，则返回值“three”：
|
||
|
||
<div class="text--center">
|
||
<img
|
||
src="/img/runtime/dialog_default_cancel.png"
|
||
width="30%"
|
||
style={{
|
||
"box-shadow":
|
||
"rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px",
|
||
}}
|
||
/>
|
||
</div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
|
||
#### 对话框类型
|
||
|
||
```go
|
||
const (
|
||
InfoDialog DialogType = "info"
|
||
WarningDialog DialogType = "warning"
|
||
ErrorDialog DialogType = "error"
|
||
QuestionDialog DialogType = "question"
|
||
)
|
||
```
|
||
|
||
### 文件过滤
|
||
|
||
```go
|
||
type FileFilter struct {
|
||
DisplayName string // Filter information EG: "Image Files (*.jpg, *.png)"
|
||
Pattern string // semi-colon separated list of extensions, EG: "*.jpg;*.png"
|
||
}
|
||
```
|
||
|
||
#### Windows
|
||
|
||
Windows 允许您在对话框中使用多个文件过滤器。每个 FileFilter 将在对话框中显示为一个单独的条目：
|
||
|
||
<div class="text--center">
|
||
<img
|
||
src="/img/runtime/dialog_win_filters.png"
|
||
width="50%"
|
||
style={{
|
||
"box-shadow":
|
||
"rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px",
|
||
}}
|
||
/>
|
||
</div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
|
||
#### Linux
|
||
|
||
Linux 允许您在对话框中使用多个文件过滤器。每个 文件过滤器 将在对话框中显示为单独的条目：
|
||
|
||
<div class="text--center">
|
||
<img
|
||
src="/img/runtime/dialog_lin_filters.png"
|
||
width="50%"
|
||
style={{
|
||
"box-shadow":
|
||
"rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px",
|
||
}}
|
||
/>
|
||
</div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
|
||
#### Mac
|
||
|
||
Mac 对话框只有一组模式来过滤文件的概念。如果提供了多个 FileFilters，Wails 将使用所有定义的模式。
|
||
|
||
示例：
|
||
|
||
```go
|
||
selection, err := runtime.OpenFileDialog(b.ctx, runtime.OpenDialogOptions{
|
||
Title: "Select File",
|
||
Filters: []runtime.FileFilter{
|
||
{
|
||
DisplayName: "Images (*.png;*.jpg)",
|
||
Pattern: "*.png;*.jpg",
|
||
}, {
|
||
DisplayName: "Videos (*.mov;*.mp4)",
|
||
Pattern: "*.mov;*.mp4",
|
||
},
|
||
},
|
||
})
|
||
```
|
||
|
||
这将导致使用`*.png,*.jpg,*.mov,*.mp4`作为过滤器打开文件对话框。
|