用户交互界面---python-PySimpleGUI库

前言

PySimpleGUI库的功能非常之多，而且拥有200多个开发示例，很多时候只需要对这些示例稍作修改就可以拿来用了，本文主要介绍了一写PySimpleGUI库中一些宠用的函数，再不借助类似qt这类可视化界面设计的情况下如何快速的做出自己想要的界面，因为篇幅较长，因此大家可以根据目录进行跳转到自己需要的部分。

PySimpleGUI库

PySimpleGUI库介绍

PySimpleGUI是python用于制作用户交互界面的库，使用起来非常方便，官方的默认缩写为sg,因此使用时建议采用import PySimpleGUI as sg语句

PySimpleGUI库安装

如果是在命令行终端输入 pip install pysimplegui即可
如果是在pycharm中，那么可以在file–setting–python interpreter–±-输入PySimpleGUI–install，等待安装完成后即可

PySimpleGUI库常用函数

基本弹窗函数popup

popup函数以及其变体
sg.popup（‘基本函数’）
sg.popup_ok('带ok键的弹窗')
sg.popup_yes_no('带Yes和No按钮的弹窗')
sg.popup_cancel('带cancel按钮的弹窗')
sg.popup_ok_cancel('带OK和cancel按钮的弹窗')
sg.popup_error('带红色error按钮的弹窗')
sg.popup_auto_close('几秒后自动关闭的弹窗')
popup函数应用示例
import PySimpleGUI as sg
sg.popup(
    '小白超可爱的',#显示的内容
    '小白宇宙第一可爱',#显示的内容
    title='嗷呜',#窗口名
    button_color=('#000000','#FFFFFF'),#按钮颜色（前景色和背景色）
    line_width=10,#每一行的字数
    custom_text='？',#按键显示内容
    location=(857,857),#屏幕显示的位置
    auto_close=True,#会自动关闭
    auto_close_duration=5,#自动关闭的时间，单位秒
    text_color='blue',#文字颜色
    grab_anywhere=True,#窗口是否可以移动
    font='23',#字体大小
)

在这里插入图片描述

文字弹窗函数popup_scrolled

import PySimpleGUI as sg

text=''' 今天吃了德芙啊，做了泡芙啊，可还是没有和你一起写代码舒服啊。 '''
sg.popup_scrolled(text,title='写代码是地球ol最好玩的游戏！')

在这里插入图片描述

用户输入的弹窗popup_get_text

popup_get_text显示输入内容
import PySimpleGUI as sg

text1 = sg.popup_get_text('马师傅说：',title='松果弹抖闪电鞭')
print(text1)

在这里插入图片描述

popup_get_text不显示输入内容
import PySimpleGUI as sg

text1 = sg.popup_get_text('满血鲁班被凯爹一刀秒杀后打字到',#提示内容
                          title='王者峡谷一条gai',#窗口名称
                          password_char='*'#用*代替显示)
print(text1)

在这里插入图片描述

文件选择弹出窗口函数sg.popup_get_file

import PySimpleGUI as sg

path=sg.popup_get_file("嘿，siri,打开我的相册",
                       save_as=True,#是否另存为图片
                       multiple_files=True,#是否可以选择多个文件
                       file_types=(('图片','.jpg'),)#文件类型
                       )
print(path)

在这里插入图片描述

进度条弹窗函数one_line_progress_meter

import PySimpleGUI as sg

for i in range(1000):
    sg.one_line_progress_meter( '进度条',#窗口名称
                                i + 1,#当前进度
                                1000,#总进度
                                '该进度条key',#内容输出可以是多个字符串
                                '这是一个进度条',
                                orientation='h',#进度条方向h是横向，v是纵向
                                bar_color=('#AAFFAA','#FFAAFF'),#进度条颜色
)

在这里插入图片描述
进度条上的英文是自动产生的，我目前没有找到消除或者修改内容的方法。

主菜单的制作

基本窗口函数window

window函数可以创建一个窗口，在该窗口上可以放置各种各样的控件供我们使用。

   top_window = sg.Window('Everything bagel', #展示窗口 
   						  layout, #窗口控件布局
   						  finalize=True, #貌似是必要参数
   						  keep_on_top=True, #控件保持在屏幕上方
     					  grab_anywhere=True,#可以拖动窗口
   						  transparent_color=sg.theme_background_color(), #背景主题
   						  no_titlebar=True)#去掉标题栏

PySimpleGUI库常用控件

例程代码

想要掌握window，那么关键在于如何创建和使用控件，以及如何进行函数回调
先来看一下比较便于掌握控件的例程

import PySimpleGUI as sg

"""
    Highly experimental demo of how the illusion of a window with a background image is possible with PySimpleGUI.

    Requires the latest PySimpleGUI from GitHub.  Your copy of PySimpleGUI should be local to your application so that 
    the global variable _move_all_windows can be changed.  
    
    Copyright 2020 PySimpleGUI.org
"""


sg.Window._move_all_windows = True


def title_bar(title, text_color, background_color):
    """
    Creates a "row" that can be added to a layout. This row looks like a titlebar
    :param title: The "title" to show in the titlebar
    :type title: str
    :param text_color: Text color for titlebar
    :type text_color: str
    :param background_color: Background color for titlebar
    :type background_color: str
    :return: A list of elements (i.e. a "row" for a layout)
    :rtype: List[sg.Element]
    """
    bc = background_color
    tc = text_color
    font = 'Helvetica 12'

    return [sg.Col([[sg.T(title, text_color=tc, background_color=bc, font=font, grab=True)]], pad=(0, 0), background_color=bc),
            sg.Col([[sg.T('_', text_color=tc, background_color=bc, enable_events=True, font=font, key='-MINIMIZE-'), sg.Text('❎', text_color=tc, background_color=bc, font=font, enable_events=True, key='Exit')]], element_justification='r', key='-C-', grab=True,
                   pad=(0, 0), background_color=bc)]



def main():

    background_layout = [ title_bar('This is the titlebar', sg.theme_text_color(), sg.theme_background_color()),
                        [sg.Image(data=background_image)]]
    window_background = sg.Window('Background', background_layout, no_titlebar=True, finalize=True, margins=(0, 0), element_padding=(0,0), right_click_menu=[[''], ['Exit',]])

    window_background['-C-'].expand(True, False, False)  # expand the titlebar's rightmost column so that it resizes correctly


    # ------ Column Definition ------ #
    column1 = [[sg.Text('Column 1', justification='center', size=(10, 1))],
               [sg.Spin(values=('Spin Box 1', 'Spin Box 2', 'Spin Box 3'),
                        initial_value='Spin Box 1')],
               [sg.Spin(values=['Spin Box 1', '2', '3'],
                        initial_value='Spin Box 2')],
               [sg.Spin(values=('Spin Box 1', '2', '3'), initial_value='Spin Box 3')]]

    layout = [#控件的设置在这里
        [sg.Text('Window + Background Image\nWith tkinter', size=(30, 2), justification='center', font=("Helvetica", 25), relief=sg.RELIEF_RIDGE)],
        [sg.Text('Here is some text.... and a place to enter text')],
        [sg.InputText('This is my text')],
        [sg.Frame(layout=[
            [sg.CBox('Checkbox', size=(10, 1)),
             sg.CBox('My second checkbox!', default=True)],
            [sg.Radio('My first Radio!     ', "RADIO1", default=True, size=(10, 1)),
             sg.Radio('My second Radio!', "RADIO1")]], title='Options', relief=sg.RELIEF_SUNKEN, tooltip='Use these to set flags')],
        [sg.MLine(default_text='This is the default Text should you decide not to type anything', size=(35, 3)),
         sg.MLine(default_text='A second multi-line', size=(35, 3))],
        [sg.Combo(('Combobox 1', 'Combobox 2'),default_value='Combobox 1', size=(20, 1)),
         sg.Slider(range=(1, 100), orientation='h', size=(34, 20), default_value=85)],
        [sg.OptionMenu(('Menu Option 1', 'Menu Option 2', 'Menu Option 3'))],
        [sg.Listbox(values=('Listbox 1', 'Listbox 2', 'Listbox 3'), size=(30, 3)),
         sg.Frame('Labelled Group', [[
             sg.Slider(range=(1, 100), orientation='v', size=(5, 20), default_value=25, tick_interval=25),
             sg.Slider(range=(1, 100), orientation='v', size=(5, 20), default_value=75),
             sg.Slider(range=(1, 100), orientation='v', size=(5, 20), default_value=10),
             sg.Col(column1)]])
        ],
        [sg.Text('_' * 80)],
        [sg.Text('Choose A Folder', size=(35, 1))],
        [sg.Text('Your Folder', size=(15, 1), justification='right'),
         sg.InputText('Default Folder'), sg.FolderBrowse()],
        [sg.Submit(tooltip='Click to submit this form'), sg.Cancel()],
    [sg.Text('Right Click To Exit', size=(30, 1), justification='center', font=("Helvetica", 25), relief=sg.RELIEF_SUNKEN)], ]
	#只要把layout传递给window函数就可以让窗口搭载设定好的控件了
    top_window = sg.Window('Everything bagel', layout, finalize=True, keep_on_top=True, grab_anywhere=False,  transparent_color=sg.theme_background_color(), no_titlebar=True)

    # window_background.send_to_back()
    # top_window.bring_to_front()

    while True:
        window, event, values = sg.read_all_windows()
        print(event, values)
        if event is None or event == 'Cancel' or event == 'Exit':
            print(f'closing window = {window.Title}')
            break

    top_window.close()
    window_background.close()

if __name__ == '__main__':
	background_image = 图片的URL
	#链接太长了就不贴了，需要的话自己去找一下图片，也可以用本地图片但是只支持gif格式的图片
	main()

在这里插入图片描述

Frame控件

sg.Frame（）里面可以穿插其他控件，在同一个sg.Frame控件里的控件会被框起来代表是一组，比较常用语里面插入选择性的控件，主要参数有

  1. tooltip：提示信息，鼠标放置在控件上会出现提示
  2. title:标题
[sg.Frame(layout=[
            [sg.CBox('Checkbox', size=(10, 1)),
             sg.CBox('My second checkbox!', default=True)],
            [sg.Radio('My first Radio!     ', "RADIO1", default=True, size=(10, 1)),
             sg.Radio('My second Radio!', "RADIO1")]], title='Options', relief=sg.RELIEF_SUNKEN, tooltip='Use these to set flags')]
Text控件：文本

sg.Text（）里面可以插入文本内容，并显示在窗口上，是很常用的控件类型，主要参数有

  1. size:文本框大小
  2. justification：文字位置
  3. font:字体型号以及字体大小
 sg.Text('Your Folder', size=(15, 1), justification='right')

在这里插入图片描述

Image控件：图片

sg.Image控件可以用来植入图片或者动态图，但是只支持gif格式和png格式，其他格式的图片需要转化成这俩种格式，不过我测试只有gif可用，常用的参数有

  1. size:图片大小，比图片大的话不会被放大填充，但是比图片小的话图片会被缩放
    在这里插入图片描述
    附上其他类型图片转化为gif图片的源码：
picref = Image.open(picref_path)
picrefNew.append(picref)
picrefNew[0].save("./picref.gif", 'gif', save_all=True, append_images=picrefNew[1:])
Button控件：按键

sg.Button控件可以创造一个按键，用户每当按下按键，则会返回所有当前所有选择框的状态，从而便于让开发者去调用对应的响应函数，在PySimpleGUI库中，有很多奇奇怪怪的按键函数，但实际上只是换了名字而已，与sg.Button并没有什么额外的内容。

  1. OK
  2. Ok
  3. Submit
  4. Cancel
  5. Yes
  6. No
  7. Exit
  8. Quit
  9. Help
  10. Save
  11. SaveAs
  12. Open
    sg.OK()就相当于sg.Button(‘OK’),Button的主要参数有
  13. size:按键大小
  14. key：传入一个字符串，代表键值
sg.Button('评估',size=(30,1),key='assess')

在这里插入图片描述

Radio控件：单项选择

一组sg.Radio同时只有一个控件可以被选择，可以用作单项选择或者确定是否，主要参数有

  1. default：初始是否被选中
  2. size：尺寸大小
sg.Radio('My first Radio!     ', "RADIO1", default=True, size=(10, 1))

在这里插入图片描述

Slider控件:滑块调节

sg.Slider（）可以产生一个可滑动调节的按钮，主要的参数有

  1. range:可滑动范围，例如（1,100）
  2. size:尺寸大小
  3. default_value：默认滑块所在的位置
sg.Slider(range=(1, 100), orientation='h', size=(34, 20), default_value=85)

在这里插入图片描述

Listbox控件：列表框

listbox可以创建一个列表框供人选择，在触发回调事件时，列表框被选中的情况会被返回

sg.Listbox(values=('Listbox 1', 'Listbox 2', 'Listbox 3'), size=(30, 3))

在这里插入图片描述

Cbox控件：复选框

Cbox函数可以用来创建复选框，复选框可以有多个控件被同时选择,主要参数：

  1. default:默认值为False，决定初始化后是否被选择
  2. size:控件大小
[sg.CBox('Checkbox', size=(10, 1)),
             sg.CBox('My second checkbox!', default=True)]

在这里插入图片描述

Combo控件：下拉选框

Combo用于生成下拉选框，当有回调事件触发时会返回选框内的值，主要参数：
size:控件大小
default:默认选择哪个值

sg.Combo(('Combobox 1', 'Combobox 2'), default_value='Combobox 1', size=(20, 1))

在这里插入图片描述

FileBrowse控件：选取文件

FileBrowse常用于打开一个文件，但是该函数不会触发按键效果，所以就会出现用该函数打开了一个文件后却不可以即使更新到界面上，也无法触发其他回调函数，但是可以通过以下语句更新到文本框中

layout=[sg.Text('源图像', size=(8, 1)),sg.Input(),sg.FileBrowse('选择源图像', size=(30, 1))]

在这里插入图片描述

FolderBrowse控件：选取文件夹

和FileBrowse没有什么区别，不过对象从文件变成了文件夹，也一样不会触发回调，但是可以更新到文本框当中

layout=[sg.Text('源图像', size=(8, 1)),sg.Input(),sg.FolderBrowse('选择源图像', size=(30, 1))]
Table：列表

Table函数可以生成一个列表将需要展示的数据展示出来是很好用的函数

        [sg.Table(values=[["          ", "          ", "          ", "          ","          "]],#列的初始宽度
                  headings=['算法名称', '评估分数', '算法最高分', '归一化后分数','综合权值'],#列头的初始值
                  max_col_width=500,#行宽
                  auto_size_columns=True,  # 自动调整列宽（根据上面第一次的values默认值为准，update时不会调整）
                  display_row_numbers=True,  # 序号
                  justification='center',  # 字符排列 left right center
                  num_rows=7,  # 行数
                  row_height=30,  # 行高
                  key='_table_',#键值
                  font=('微软雅黑', 12),#字体大小和字体类型
                  text_color='black',#文本颜色
                  background_color='white',#背景颜色
                  enable_events=True,
                  bind_return_key=True,
                  tooltip='仿真评估表')],]#文本提示

在这里插入图片描述

用户交互界面设计注意事项

  1. 为了保证用户界面使用的流畅性，要给界面处理单开一个线程，保证其实时性流畅性
  2. 该库的背景板一般是单独的窗口，但如果不将其设为置顶，只要有其他软件在其上面就会被覆盖导致背景看不见，但如果设为置顶，则只要碰到控件窗口以外的地方，则控件窗口会被背景窗口覆盖，目前没有一个很好解决方法
  3. 如果控件窗口设定为置顶，则弹窗可能会被覆盖，需要将弹窗也设定为置顶。

关于用户界面的美化

对于一名非颜值主义者，五官跟着三观走的人来说没有什么很好的美术设计功底与概念
简单来说：我不会作美化

# python
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB高智能--智能优化器介绍

avatar 华为开发者空间
cover

华为技术专家出品，《华为开发者空间案例指南》带你玩转云上20+场景应用开发

avatar 华为开发者空间
cover

在华为开发者空间，基于鲲鹏服务器快速开发打砖块小游戏

avatar 华为开发者空间