Hay muchas bibliotecas de interfaz gráfica de usuario disponibles, pero muchas de ellas carecen de documentación oficial, lo que dificulta su aprendizaje. Después de considerarlo repetidamente, elegí la biblioteca walk para aprender, que solo se puede ejecutar en la plataforma de Windows. El estilo de sintaxis de la biblioteca walk es como JavaScript, que puede crear rápidamente programas de interfaz gráfica de usuario, y la interfaz también es hermosa. Al mismo tiempo, la biblioteca walk utiliza la reflexión para lograr la capacidad de respuesta, lo que puede vincular los valores y las variables en la interfaz en dos direcciones, lo cual es muy conveniente. Por supuesto, si desea que sea muy hermoso, todavía usa Qt.
Aprendí a través de los ejemplos dados en github . Organice de acuerdo con las ideas de aprendizaje de la biblioteca de interfaz gráfica de usuario general.
Crear una ventana básica puede encontrar ejemplos en GitHub
ventana
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()
El programa anterior crea una ventana. Por supuesto, es necesario rsrc.syso. Este archivo se utiliza para solicitar algunos permisos y no necesita ser cambiado. Podemos ver que la estructura de toda la ventana es muy clara usando la estructura. El primero es el título de la ventana, el segundo es el tamaño mínimo de la ventana y el segundo es el diseño, que muestra que los subcomponentes están dispuestos verticalmente, por supuesto, también puede haber sub-diseños dentro del sub -componentes. Después de definir los componentes en la ventana, un divisor horizontal y dos cuadros de texto, se organizarán horizontalmente. Inmediatamente debajo hay un botón y define el texto del botón y el evento de clic. Todo esto es muy sencillo, claro e intuitivo.
composición
El diseño de la caminata es muy simple, pero puede resolver la mayoría de las necesidades.
Disposición vertical
El diseño vertical sirve para organizar los componentes verticalmente. Se puede especificar el margen y habrá margen de forma predeterminada.
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()
}
Disposición horizontal
Lo mismo
Diseño de cuadrícula
El diseño de cuadrícula puede especificar el número de filas y columnas, y también puede especificar filas o columnas.
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()
}
Especifique el número de columnas ocupadas por el componente y use relleno en blanco
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()
}
Utilice divisor horizontal o vertical
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()
}
