1. 程式人生 > >圖形使用者介面2:常用控制元件

圖形使用者介面2:常用控制元件

認識幾種常用控制元件

  • 按鈕
  • 選單
  • 工具欄
  • 介面佈局
  • 列表
  • 顯示圖片

匯入依賴

import (
	"github.com/lxn/walk"
	. "github.com/lxn/walk/declarative"
	"os"
	"strings"
	"io/ioutil"
	"fmt"
	"log"
)

定義全域性資料

// 全域性應用的選單項
var myAction *walk.Action
//自定義的主視窗
var myWindow *MyMainWindow

//自定義視窗
type MyMainWindow struct {
	*walk.MainWindow
	te *walk.TextEdit

	//listbox使用的資料
	model *EnvModel
	//listbox控制元件
	listBox *walk.ListBox
}

定義列表資料模型

//環境變數條目資料模型
type EnvItem struct {
	//環境變數的名字和值
	name  string
	value string
}

//列表資料模型
type EnvModel struct {
	//繼承ListModelBase
	walk.ListModelBase

	//環境變數數集合
	items []EnvItem
}

//列表資料模型的工廠方法
func NewEnvModel() *EnvModel {
	env := os.Environ()
	m := &EnvModel{items: make([]EnvItem, len(env))}
	for i, e := range env {
		j := strings.Index(e, "=")
		if j == 0 {
			continue
		}

		name := e[0:j]
		value := strings.Replace(e[j+1:], ";", "\r\n", -1)

		m.items[i] = EnvItem{name, value}
	}

	return m
}

定義列表相關的監聽和系統回撥介面

//定義列表專案的單擊監聽
func (mw *MyMainWindow) lb_CurrentIndexChanged() {
	i := mw.listBox.CurrentIndex()
	item := &mw.model.items[i]

	mw.te.SetText(item.value)

	fmt.Println("CurrentIndex: ", i)
	fmt.Println("CurrentEnvVarName: ", item.name)
}

//定義列表專案的雙擊監聽
func (mw *MyMainWindow) lb_ItemActivated() {
	value := mw.model.items[mw.listBox.CurrentIndex()].value

	walk.MsgBox(mw, "Value", value, walk.MsgBoxIconInformation)
}

//列表的系統回撥方法:獲得listbox的資料長度
func (m *EnvModel) ItemCount() int {
	return len(m.items)
}

//列表的系統回撥方法:根據序號獲得資料
func (m *EnvModel) Value(index int) interface{} {
	return m.items[index].name
}

定義普通事件回撥

//顯示訊息視窗
func ShowMsgBox(title, msg string) int {
	return walk.MsgBox(myWindow, "天降驚喜", "你老婆跟人跑了!", walk.MsgBoxOK)
}

//一個普通的事件回撥函式
func TiggerFunc() {
	ShowMsgBox("天降驚喜", "你老婆跟人跑了!")
}

主調函式

func main() {
	defer func() {
		if err := recover(); err != nil {
			errMsg := fmt.Sprintf("%#v", err)
			ioutil.WriteFile("fuck.log", []byte(errMsg), 0644)
		}
	}()

	myWindow = &MyMainWindow{model: NewEnvModel()}

	if _, err := (MainWindow{
		AssignTo: &myWindow.MainWindow,
		Title:    "常用控制元件",

		//視窗選單
		MenuItems: []MenuItem{
			//主選單一
			Menu{
				Text: "川菜",

				//選單項
				Items: []MenuItem{
					//選單項一
					Action{
						AssignTo: &myAction,
						Text:     "魚香肉絲",
						//選單圖片
						Image: "img/open.png",

						//快捷鍵
						Shortcut: Shortcut{walk.ModControl, walk.KeyO},

						OnTriggered: func() {
							ShowMsgBox("已下單", "我是選單項")
						},
					},

					//分隔線
					Separator{},

					//選單項二
					Action{
						//文字
						Text: "水煮魚",

						//響應函式
						OnTriggered: func() {
							ShowMsgBox("已下單", "您要的菜馬上就去買")
						},
					},
				},
			},

			//主選單二
			Menu{
				Text: "粵菜",

				//選單項
				Items: []MenuItem{
					//選單項一
					Action{

						Text: "魚香肉絲",
						//選單圖片
						Image: "img/open.png",

						//快捷鍵
						Shortcut: Shortcut{walk.ModControl, walk.KeyO},

						OnTriggered: func() {
							ShowMsgBox("已下單", "我是選單項")
						},
					},

					//分隔線
					Separator{},

					//選單項二
					Action{
						//文字
						Text: "水煮魚",

						//響應函式
						OnTriggered: func() {
							ShowMsgBox("已下單", "您要的菜馬上就去買")
						},
					},
				},
			},
		},

		//工具欄
		ToolBar: ToolBar{
			//按鈕風格:圖片在字的前面
			ButtonStyle: ToolBarButtonImageBeforeText,

			//工具欄中的工具按鈕
			Items: []MenuItem{
				//引用現成的Action
				ActionRef{&myAction},

				Separator{},
				//自帶子選單的工具按鈕
				Menu{
					//工具按鈕本身的圖文和監聽
					Text:        "工具按鈕2",
					Image:       "img/document-properties.png",
					OnTriggered: TiggerFunc,

					//附帶一個子選單
					Items: []MenuItem{
						Action{
							Text:        "X",
							OnTriggered: TiggerFunc,
						},
						Action{
							Text:        "Y",
							OnTriggered: TiggerFunc,
						},
						Action{
							Text:        "Z",
							OnTriggered: TiggerFunc,
						},
					},
				},
				Separator{},

				//普通工具按鈕
				Action{
					Text:  "工具按鈕3",
					Image: "img/system-shutdown.png",
					OnTriggered: func() {
						ShowMsgBox("天降驚喜", "你老婆跟人跑了!")
					},
				},
			},
		},

		MinSize: Size{600, 400},
		Layout:  VBox{},

		//控制元件們
		Children: []Widget{
			//水平區域性
			HSplitter{

				MinSize: Size{600, 300},
				Children: []Widget{
					ListBox{
						StretchFactor: 1,
						//賦值給myWindow.listBox
						AssignTo: &myWindow.listBox,
						//要顯示的資料
						Model: myWindow.model,

						//單擊監聽
						OnCurrentIndexChanged: myWindow.lb_CurrentIndexChanged,
						//雙擊監聽
						OnItemActivated: myWindow.lb_ItemActivated,
					},
					TextEdit{
						StretchFactor: 1,
						AssignTo:      &myWindow.te,
						ReadOnly:      true,
					},
				},
			},

			HSplitter{
				MaxSize:Size{600,50},
				Children: []Widget{
					//影象
					ImageView{
						Background: SolidColorBrush{Color: walk.RGB(255, 191, 0)},
						//圖片檔案位置
						Image: "img/open.png",
						//和四周的邊距
						Margin: 5,
						//定義最大拉伸尺寸
						MinSize: Size{50, 50},

						//顯示模式
						Mode: ImageViewModeZoom,
					},

					//按鈕
					PushButton{
						StretchFactor:8,
						Text: "摸我有驚喜",
						OnClicked: func() {
							ShowMsgBox("天降驚喜", "你老婆跟人跑了!")
						},
					},
				},
			},
		},
	}.Run()); err != nil {
		log.Fatal(err)
	}
}

清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群:721929980
在這裡插入圖片描述