There are many gui libraries for go, but many of them lack official documentation, which makes it difficult to learn. After repeated consideration, I chose the walk library for learning, which can only run on the windows platform. The syntax style of the walk library is like JavaScript, which can quickly build gui programs, and the interface is also beautiful. At the same time, the walk library uses reflection to achieve responsiveness, which can bind the values and variables in the interface in two directions, which is very convenient. Of course, if you want to make it very beautiful, you still use Qt.
I learned through the examples given on github . Organize according to the learning ideas of the general gui library.
Creating a basic window can find examples on GitHub
window
package main
import (
"github.com/lxn/walk"
. "github.com/lxn/walk/declarative"
"strings"
)
func main() {
var inTE, outTE *walk.TextEdit
MainWindow{
Title: "SCREAMO",
MinSize: Size{
600, 400},
Layout: VBox{
},
Children: []Widget{
HSplitter{
Children: []Widget{
TextEdit{
AssignTo: &inTE},
TextEdit{
AssignTo: &outTE, ReadOnly: true},
},
},
PushButton{
Text: "SCREAM",
OnClicked: func() {
outTE.SetText(strings.ToUpper(inTE.Text()))
},
},
},
}.Run()
The above program creates a window. Of course, it is needed rsrc.syso. This file is used to ask for some permissions and does not need to be changed. We can see that the structure of the entire window is very clear using the structure. The first is the title of the window, the second is the minimum size of the window, and the second is the layout, which shows that the sub-components are arranged vertically, of course, there can also be sub-layouts inside the sub-components. After defining the components in the window, a horizontal splitter, and two text boxes, they will be arranged horizontally. Immediately below there is a button, and defines the text on the button and the click event. All this is very simple, clear and intuitive.
layout
The layout of walk is very simple, but it can solve most needs.
Vertical layout
Vertical layout is to arrange the components vertically. Margin can be specified, and there will be Margin by default.
package main
import (
. "github.com/lxn/walk/declarative"
)
func main() {
var mw = MainWindow{
Title:
"SCREAMO",
// 指定窗口的大小
MinSize: Size{
Width: 600, Height: 400},
Layout: VBox{
},
Children: []Widget{
PushButton{
Text: "btn1"},
PushButton{
Text: "btn2"},
PushButton{
Text: "btn3"},
PushButton{
Text: "btn4"},
PushButton{
Text: "btn5"},
},
}
mw.Persistent = true
mw.Run()
}
Horizontal arrangement
The same
Grid layout
The grid layout can specify the number of rows and columns, and can also specify rows or columns.
package main
import (
. "github.com/lxn/walk/declarative"
)
func main() {
var mw = MainWindow{
Title:
"SCREAMO",
// 指定窗口的大小
MinSize: Size{
},
Layout: Grid{
Rows: 3,
},
Children: []Widget{
PushButton{
Text: "btn1"},
PushButton{
Text: "btn2"},
PushButton{
Text: "btn3"},
PushButton{
Text: "btn4"},
PushButton{
Text: "btn5"},
},
}
mw.Persistent = true
mw.Run()
}
Specify the number of columns occupied by the component and use blank padding
package main
import (
. "github.com/lxn/walk/declarative"
)
func main() {
var mw = MainWindow{
Title:
"SCREAMO",
// 指定窗口的大小
MinSize: Size{
},
Layout: Grid{
Columns: 5,
},
Children: []Widget{
PushButton{
Text: "btn1",ColumnSpan: 2},
PushButton{
Text: "btn2"},
PushButton{
Text: "btn3"},
HSpacer{
ColumnSpan: 3},
PushButton{
Text: "btn4"},
PushButton{
Text: "btn5"},
},
}
mw.Persistent = true
mw.Run()
}
Use horizontal or vertical splitter
package main
import (
. "github.com/lxn/walk/declarative"
)
func main() {
var mw = MainWindow{
Title:
"SCREAMO",
// 指定窗口的大小
MinSize: Size{
},
Layout: VBox{
MarginsZero: true,
},
Children: []Widget{
HSplitter{
Children: []Widget{
PushButton{
Text: "btn1"},
PushButton{
Text: "btn2"},
PushButton{
Text: "btn3"},
},
},
VSeparator{
},
PushButton{
Text: "btn4"},
PushButton{
Text: "btn5"},
},
}
mw.Persistent = true
mw.Run()
}
