常用控件集合

本章介紹并學習路線中彈窗之前（包含彈窗）的所有控件

一、認識控件

本章將要學習的控件列表如下圖所示，逐一講解使用方法；

二、預備知識

2.1 控件結構體中通用字段

• AssignTo ：綁定該控件類型指針，目的是后續業務中可以控制該控件屬性；
• ToolTipText ：作用是當鼠標移到該控件時，會浮窗顯示提示信息；

三、控件使用

3.1 TextLabel

TextLabel{AssignTo: &myMain.TextLabel,Text: "我是文本標簽", },

3.2 TextEdit

TextEdit{AssignTo: &myMain.TextEdit,Text: "我是文本框",ReadOnly: false, // false:文本框只讀 true:文本框可讀可寫ColumnSpan: 9, },

3.3 Label

Label{AssignTo: &myMain.Label,Text: "我是標簽", },

3.4 NumberLabel

NumberLabel{AssignTo: &myMain.NumberLabel,Value: float64(521), //警告：這里給的默認值，一定要強轉為int64，否則NumberLabel.Create時，斷言失敗就是0了。 },

3.5 NumberEdit

NumberEdit{AssignTo: &myMain.NumberEdit,Value: float64(10), //警告：這里給的默認值，一定要強轉為int64，否則NumberLabel.Create時，斷言失敗就是0了。 },

3.6 LineEdit

LineEdit{AssignTo: &myMain.LineEdit,Text: "我是行編輯",TextColor: walk.Color(walk.RGB(100, 100, 100)),Enabled: true, // false:文本框只讀 true:文本框可讀可寫PasswordMode: true, //可選，輸入內容后密文，顯示******MaxLength: 5, //設置最大輸入字符數TextColor:walk.RGB(218, 8, 9),//設置文本顏色ReadOnly: true,//設置文本只讀 }, // 獲取輸入框內容 myMain.LineEdit.Text()

3.7 CheckBox

CheckBox{AssignTo: &myMain.CheckBox,Text: "復選框",ToolTipText: "單選、復選框",Checked: true, //注意：true 默認選中，false:默認未選 }, // 在事件觸發接口中，實現多個單選框使用時邏輯： func OK_Clicked() {switch {case myMain.CheckBox_english.Checked():le.SetText("英語系")case myMain.CheckBox_sport.Checked():le.SetText("體育系")case myMain.CheckBox_maths.Checked():le.SetText("數學系")} }

3.8 PushButton

PushButton{Text: "按鈕",OnClicked: func() {walk.MsgBox(nil, "我是彈框", "測試button", walk.MsgBoxIconInformation)// 此處實現你想要做的業務// ......}, },

3.9 ComboBox

第一種，簡單用法，默認顯示選中蘋果 ComboBox{AssignTo: &myMain.ComboBox,Model: []string{"蘋果", "草莓", "香蕉"}, //下拉菜單數據源CurrentIndex: 0, // 默認顯示model數據的索引// 選中下拉菜單中某個選項時觸發OnCurrentIndexChanged: func() {// 打印最新索引idlogger.Println(myMain.ComboBox.CurrentIndex())}, }, 第二種，綁定數據 animal := new(Animal) Composite{DataBinder: DataBinder{AssignTo: &db,Name: "animal",DataSource: animal,ErrorPresenter: ToolTipErrorPresenter{},},Layout: Grid{Columns: 2},Children: []Widget{ComboBox{// 和DataBinder.DataSource字段關聯，當前則是關聯animal.SpeciesId字段，即選擇下拉菜單中id對應值刷新到DataBinder.DataSource字段中// SelRequired{} 作用是約束該選項不允許為空，否則會強制提示；Value: Bind("SpeciesId", SelRequired{}), BindingMember: "Id", // 綁定數據字段名(和Model字段關聯)DisplayMember: "Name", // 顯示數據字段名(和Model字段關聯)Model: KnownSpecies(),},PushButton{AssignTo: &acceptPB,Text: "OK",// 手動更新綁定數據，點擊OK按鈕時才更新OnClicked: func() {walk.MsgBox(nil, "修改前", fmt.Sprintf("%+v", animal), walk.MsgBoxIconInformation)// 此處手動提交更新綁定數據if err := db.Submit(); err != nil {log.Print(err)return}walk.MsgBox(nil, "結果", fmt.Sprintf("%+v", animal), walk.MsgBoxIconInformation)},},}, },type Animal struct {Name stringArrivalDate time.TimeSpeciesId intSpeed intSex SexWeight float64PreferredFood stringDomesticated boolRemarks stringPatience time.Duration }type Species struct {Id intName string } func KnownSpecies() []*Species {return []*Species{{1, "Dog"},{2, "Cat"},{3, "Bird"},{4, "Fish"},{5, "Elephant"},} }

3.10 RadioButton

RadioButton{AssignTo: &myMain.RadioButton,Text: "單選按鈕",ToolTipText: "單選按鈕", },

3.11 RadioButtonGroup

// 首先定義該按鈕要綁定的數據結構 type Fool struct {Bar stringBaz int } // 聲明一個變量 fooBox := Fool{"box", 0} Composite{Layout: HBox{},DataBinder: DataBinder{DataSource: &foo, // 變量名 此處必須是指針Name: "foo",// 變量名AutoSubmit: true,// 自動提交，意思是選中后，變量fooBox.Baz 字段值會自動更新；// 每次操作選中后，自動觸發該接口調用，所以對應業務就可以在這里實現，案例中只是打印了變量內容；OnSubmitted: func() {logger.Printf("foo:%v", foo)},},Children: []Widget{RadioButtonGroup{DataMember: "Baz",//指定綁定變量中的字段名，和上面的DataBinder是配套的；Buttons: []RadioButton{RadioButton{Name: "oneRB",Text: "one", //界面顯示的選項名Value: 1, // 選擇選項后的值，此處綁定的是fooBox.Baz字段值},RadioButton{Name: "twoRB",Text: "two",Value: 2,},RadioButton{Name: "threeRB",Text: "three",Value: 3,},},},}, },

3.12 RadioButtonGroupBox

用法邏輯：
??????? 1. 根據業務創建自己的結構體，例如
?????????????????type Fool struct
????????????????????????Bar string
????????????????????????Baz int
?????????????????}
???????2. 創建一個結構體變量fooBox ；
???????3. 將該結構體變量中的字段和按鈕進行綁定，比如Baz字段；
???????4.當點擊按鈕選中時，變量fooBox 的字段值就會被更新；

// 首先定義該按鈕要綁定的數據結構 type Fool struct {Bar stringBaz int } // 聲明一個變量 fooBox := Fool{"box", 0} // 創建控件 Composite{Layout: HBox{},// 綁定數據DataBinder: DataBinder{DataSource: &fooBox, //變量名，此處必須是指針Name: "fooBox",//變量名AutoSubmit: true, //自動提交，意思是選中后，變量fooBox.Baz 字段值會自動更新；// 每次操作選中后，自動觸發該接口調用，所以對應業務就可以在這里實現，案例中只是打印了變量內容；OnSubmitted: func() {logger.Printf("foo:%v", fooBox)},},Children: []Widget{RadioButtonGroupBox{Title: "box",//組框的名稱，界面會顯示Layout: HBox{},DataMember: "Baz", //指定綁定變量中的字段名，和上面的DataBinder是配套的；Buttons: []RadioButton{{Text: "Male", Value: 5},// Text按鈕名稱，Value按鈕對應點擊后的值{Text: "Female", Value: 6},{Text: "Hermaphrodite", Value: 7},},},}, },

3.13 TableView

追加：表格記錄右鍵子菜單功能

mdTableView := NewStudentModel() Composite{Layout: HBox{},// 該節點作用是添加表格右鍵子菜單ContextMenuItems: []MenuItem{Action{Text: "I&nfo",// OnTriggered: mw.tv_ItemActivated,},Action{Text: "E&xit",OnTriggered: func() {//此處實現邏輯// mw.Close()},},},Children: []Widget{TableView{AssignTo: &myMain.TableView,ToolTipText: "表格數據",ColumnsOrderable: true, // 列支持排序MultiSelection: true, // 可以同時選中多行// 表格內容列Columns: []TableViewColumn{{Title: "序號"},{Title: "姓名"},{Title: "年齡"},{Title: "錄入時間", Width: 200}},//可單獨指定某列寬度Model: mdTableView,//綁定數據源},}, },type StudentInfo struct {SeqNo int // 序號Name string // 名字Age int // 年齡CreateTime string // 錄入時間checked bool //是否被選中，下面SetChecked接口調用時設置 }type StudentModel struct {walk.TableModelBasewalk.SorterBasesortColumn intsortOrder walk.SortOrderitems []*StudentInfo // 存放數據，后續通過修改該字段內容，實現界面的數據刷新 }func NewStudentModel() *StudentModel {m := new(StudentModel)m.ResetRows()return m }// 用戶自己定義的，生成測試數據 func (m *StudentModel) ResetRows() {m.items = make([]*StudentInfo, 10, 20)// 注意，這里一定不能寫成m.items = make([]*StudentInfo, 20)，否則會panic，除了當前寫法，也可以把for循環長度改為20即可for i := 0; i < 10; i++ {m.items[i] = &StudentInfo{i, "xiaoming", i + 2, "2020-10-10 10:10:10", false}}m.PublishRowsReset() //手動觸發界面刷新，數據變更時根據需要調用。 }// 控件刷新時調用 func (m *StudentModel) RowCount() int {logger.Println("len:", len(m.items), cap(m.items))return len(m.items) }// 當TableView需要為給定單元格顯示文本時，由TableView調用 func (m *StudentModel) Value(row, col int) interface{} {item := m.items[row]switch col {case 0:return item.SeqNocase 1:return item.Namecase 2:return item.Agecase 3:return item.CreateTime}panic("unexpected col") }// 由TableView調用以檢索是否選中了給定行。 func (m *StudentModel) Checked(row int) bool {return m.items[row].checked }// 當用戶切換給定行的復選框時由TableView調用 func (m *StudentModel) SetChecked(row int, checked bool) error {m.items[row].checked = checkedreturn nil }// 由TableView調用以對模型進行排序 func (m *StudentModel) Sort(col int, order walk.SortOrder) error {logger.Println("sort..............", m.items)return nil }

3.14 ListBox

listBoxMd := NewEnvModel() ListBox{AssignTo: &myMain.ListBox,ToolTipText: "列表控件",Model: listBoxMd,OnItemActivated: func() {name := listBoxMd.items[myMain.ListBox.CurrentIndex()].namevalue := listBoxMd.items[myMain.ListBox.CurrentIndex()].valuewalk.MsgBox(nil, name, value, walk.MsgBoxIconInformation)}, }, type EnvModel struct {walk.ListModelBaseitems []EnvItem } type EnvItem struct {name stringvalue string }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 }// 獲取節點數，即有多少條數據，由ListBox調用 func (m *EnvModel) ItemCount() int {return len(m.items) }// 顯示每一行時由ListBox調用 func (m *EnvModel) Value(index int) interface{} {if m.items[index].name == "" {return "null"}return m.items[index].name }

3.15 Slider

// 當前實現的是，拖動滑動條，在指定NumberEdit控件中顯示實時數據 Slider{AssignTo: &myMain.Slider,ToolTipText: "滑動條",MaxValue: 1000, // 滑動條最大值MinValue: 0, // 滑動條最小值Orientation: Horizontal, // 滑動條方向，垂直或者水平，當前水平// 點擊某一個位置時觸發OnValueChanged: func() {v := myMain.Slider.Value()myMain.NumberEdit.SetValue(float64(v))},// 拖動滑動條過程即觸發OnMouseMove: func(x, y int, button walk.MouseButton) {v := myMain.Slider.Value()myMain.NumberEdit.SetValue(float64(v))}, },

3.16 StatusBarItem

StatusBarItem{AssignTo: &myMain.StatusBarItem,Icon: icon1, // 可選 顯示圖標 Text: "click", // 顯示名字Width: 80, // 寬度//點擊該狀態欄是，圖標來回切換OnClicked: func() {if myMain.StatusBarItem.Text() == "click" {myMain.StatusBarItem.SetText("again")myMain.StatusBarItem.SetIcon(icon2)} else {myMain.StatusBarItem.SetText("click")myMain.StatusBarItem.SetIcon(icon1)}}, }, StatusBarItem{Text: "left",ToolTipText: "no tooltip for me", }, StatusBarItem{Text: "\tcenter", }, StatusBarItem{Text: "\t\tright", }, StatusBarItem{Icon: icon1,ToolTipText: "An icon with a tooltip", },

總結

以上是生活随笔為你收集整理的教程二：go语言windows gui界面开发之walk 控件学习第一节的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。