【Go语言写界面】三、使用界面设计器设计窗口，在代码中调用，背景编辑器的使用

一、下载并打开界面设计器

下载界面设计器, 或使用蓝奏云下载

二、新建界面设计项目

1. 左上角文件 → 新建项目 → 炫彩界面库项目 → 炫彩界面库(GUI) - UI 设计美化, 非炫语言项目
2. 输入项目名称，选好存放位置，点确定。
3. 其它的 **炫语言 **那些选项和界面设计无关，那是炫彩界面库作者自己搞得一门编程语言，不用管。

三、修改窗口背景，背景编辑器的使用

双击打开 main.xml

这个就是窗口布局文件，文件名无所谓，你可以新建多个。

设置窗口背景

1. 鼠标左键点一下窗口选中它，然后在窗口上点击鼠标右键，在右键菜单中选择背景编辑器：
   

2. 在背景编辑器中点击添加状态组，选中整个窗口背景，点确定：
   

   

3. 鼠标点击选中蓝色矩形方块，然后再点一下下面的区域，会出现一个矩形：
   

4. 点击右边的铺满，然后在上面选择一种颜色（双击颜色可以自定义），最后点修改并关闭：

四、向界面上添加按钮，设置按钮属性

1. 在界面设计器右侧有元素列表，点击选中按钮后，再点击窗口即可添加按钮元素。

2. 添加一个按钮后，鼠标选中按钮，在右侧的元素属性里修改按钮文本和名称（name）：
   

3. 按下 Ctrl+S 键保存 xml 文件，然后点击界面设计器上方的预览按钮，即可预览界面：

五、在代码中调用

package main

import (
        "github.com/twgh/xcgui/app"
        "github.com/twgh/xcgui/widget"
        "github.com/twgh/xcgui/window"
)

func main() {
        app.Init()
        a := app.New(true)
        a.EnableAutoDPI(true).EnableDPI(true)
        // 添加文件搜索路径, 因为 main.xml 没有在程序运行目录
        a.AddFileSearchPath(`D:\GoProject\src\xcguitest\001`)
        // 创建窗口从布局文件
        w := window.NewByLayout("main.xml", 0, 0)

        // 获取窗口布局文件中的按钮
        btn := widget.NewButtonByName("btn1")
        // 注册按钮被单击事件
        btn.AddEvent_BnClick(func(hEle int, pbHandled *bool) int {
                a.Alert("提示", btn.GetText()+"被点击")
                return 0
        })

        // 调整布局, 从xml创建窗口时必须调整一次, 不然会显示错乱
        w.AdjustLayout()
        // 显示窗口
        w.Show(true)
        a.Run()
        a.Exit()
}

六、把设计器生成的文件打包编译进程序内调用，不写出

1. 点击界面设计器上方的打包按钮，可以打包为 zip 文件，还可以设置密码，然后点确定。

1. 把生成的 zip 放到 go 项目目录里，然后修改源码：

package main

import (
        _ "embed"

        "github.com/twgh/xcgui/app"
        "github.com/twgh/xcgui/widget"
        "github.com/twgh/xcgui/window"
)

//go:embed 001.zip
var zip []byte

func main() {
        app.Init()
        a := app.New(true)
        a.EnableAutoDPI(true).EnableDPI(true)
        // 创建窗口从内存压缩包中的布局文件
        w := window.NewByLayoutZipMem(zip, "main.xml", "", 0, 0)

        // 获取窗口布局文件中的按钮
        btn := widget.NewButtonByName("btn1")
        // 注册按钮被单击事件
        btn.AddEvent_BnClick(func(hEle int, pbHandled *bool) int {
                a.Alert("提示", btn.GetText()+"被点击")
                return 0
        })

        // 调整布局, 从xml创建窗口时必须调整一次, 不然会显示错乱
        w.AdjustLayout()
        // 显示窗口
        w.Show(true)
        a.Run()
        a.Exit()
}

七、本章内容总结

本章主要讲了如何使用界面设计器设计窗口、背景编辑器的使用、在代码中从窗口布局文件创建窗口、把布局文件打包进程序内存调用、根据 name 获取布局文件中的按钮，这里提醒一下不要设置重复的 name，它是全局生效的，即使是不同的 xml 中也不能重复。不过这个 name 想要重复也是有办法的, 在代码中从布局创建窗口时使用 Ex 方法可以设置名称前缀, name 就会变成前缀 +name 了。在加载 xml 时设置不同的名称前缀也就相当于不同的 xml 中可以重复 name 了。

背景编辑器大部分元素都能用，你可以自己尝试着修改出一个好看的按钮。