Getting started with GUIs

teddy2017

Getting started with GUIs

1eae257e44aa9d5b

·       Introduction

GUI 是GraphicalUser Interface简称，GUI用于你的程序和用户交互，例如按钮，下拉菜单，文本输入等。

·       What you will do

本章将使用Python编程制作一个简单的GUI。

·       What you will need

Computer(Rpi/windows/mac)

Python 3 guizero

若安装于mac或raspberry设备上，需使用下列命令安装pip：

sudo pip3 install guizero

若使用windows，则需：

python -m pip install -U pip

安装guizero库：

pip install guizero

·       Getting started

1.打开Python，新建一个文件，增加一行代码，从guizero库中中导入App类：

from guizeroimport App

2.显示app标题名：

app= App(title="Hello world")
app.display()

保存文件，F5刷新后，GUI将会如下展示:

恭喜你，完成第一步。

·       添加控件

在增加控件至面板前，有如下几个规则：

使用import导入新控件：

from guizeroimport App

1.如需使用文本控件，则需（每一种类型空间只需增加一次，若需添加多个控件，则在后面添加即可）：

from guizeroimport App, Text

2增加控件的代码必须在eventloop 开始前增加：

·       Text控件

welcome_message= Text(app, text="Welcome to my app")

我们创建了一个名为welcome_message的Text控件，第一个参数定义为app，则表示text控件被app对象所命令，其中可以控制其size，font等其他关键字。

·       TextBox控件

my_name = TextBox(app)

·       PushButton控件

用于创建一个按钮，当按钮按下时，功能需要被调用，所以我们在app启动前，将函数代码添加进去。

def say_my_name():
   welcome_message.set( my_name.get() )

我们需要将TextBox中的输入值显示到Text中，也就是说将welcome_message的值写入到my_name控件中，这里定义了一个 say_my_name函数，set与get方法用于控件值的更新。

增加PushButton控件:

update_text= PushButton(app, command=say_my_name, text="Display myname")

app是boss，command表示按钮按下时，将调用此函数，text则表示PushButton空间上的显示值。

·       Slider控件

用于用户控制范围的控件，如调节音量大小。

同样在app启动前，添加函数代码用于被Slider调用：

def change_text_size(slider_value):
   welcome_message.font_size(slider_value)

其中有个slider_value参数用于slider控件移动时自动发送当前值至函数。此处则当前值设置成welcome_message的font_size。

text_size= Slider(app, command=change_text_size, start=10, end=80)

增加Slider控件。

·       Picture控件

导入一张图片至面板，不过前提只能使用GIF格式，而且生成出来是静态的。将gif图放入代码目录：

my_cat= Picture(app, image="cat.gif")

Congratulations！

from guizero importApp, Text, TextBox, PushButton, Slider, Picture

app = App(title='Hello World')

def say_my_name():

   welcome_message.set(my_name.get())

def change_text_size(slider_value):

   welcome_message.font_size(slider_value)

welcome_message = Text(app, text='Welcometo my app', size=30, font='Arial', color='#ff4040')   

text_size = Slider(app,command=change_text_size, start=10, end=80)

my_name = TextBox(app, width=30)

update_text = PushButton(app,command=say_my_name, text='Display my name')

my_wechat = Picture(app, image='wechat.gif')

app.display()