緣起:
工作中使用頻次較高的操作都需要登錄到某個管理平台上進行選擇操作,如果是給別人使用還算可以, 但是作為平常使用還是感覺較為繁瑣,於是打算開發一個桌面小工具解決這個痛點,達到使用時及時調起使用,方便而節約時間.
Electron,python,flutter...工具框架很多, 前端不擅長,flutter需要重新了解, 最終多款之后選擇基於python的一個工具PySimpleGUI,好處在這里就不說了,可以自行百度
[開始]
PySimpleGUI是基於Python的圖形界面開發工具，相較於Python自帶的圖形界面開發庫Tkinter，第三方圖形界面開發工具PyQT、WxPython等，其具有基礎要求低、代碼量少、修改方便、涵蓋內容多等優勢。
需要使用的工具1、Python 3.6 及以上版本2、外部庫：
①PySimpleGUI（主要庫，基於Python自帶的GUI圖形設計庫Tkinter）
②PySimpleGUIWX（基於GUI圖形設計庫WxPython）
③PySimpleGUIQT（基於GUI圖形設計庫PySID2）
④PySimpleGUIWEB（基於GUI網頁端圖形設計庫Remi）
3、第三方編程軟件
推薦使用 Sublime Text 或者 PyCharm 兩種中的一種軟件
[安裝]
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pysimplegui pysimpleguiwx pysimpleguiqt pysimpleguiweb
示例:
#1) 導入庫 import PySimpleGUI as sg #2) 定義布局，確定行數 layout=[ [], [], [] ] #3) 創建窗口 window=sg.Window('Python GUI',layout) #4) 事件循環 while True: event,values=window.read() #窗口的讀取，有兩個返回值(1.事件 2.值) print(event,values) if event==None: #窗口關閉事件 break #5) 關閉窗口 window.close()
1、定義窗口關閉事件
窗口關閉按鈕是界面右上角的“X”。
定義窗口關閉事件是至關重要的，當你忘記定義窗口關閉事件，然后又點擊了窗口右上角的X按鈕，它會默默的消耗你100%的CPU。
if event = None: break 或者 if event == sg.WIN_CLOSED: break
2、按鈕點擊事件
用來判斷點擊按鈕的行為是否發生
3、其他元素事件
像文本元素、輸入框、下拉菜單等事件屬性默認是關閉的。當手動設置他們的事件屬性enable_events = Tnue 時，他們也將具有事件屬性。
4、通過列表索引獲取返回值
列表是最常用的Python數據類型，它可以存放不同的數據類型（str、int、char等等），用中括號括起來，元素之間用逗號隔開。
5、通過列表獲取返回值
界面默認的返回值是通過列表索引獲得指定值，但是當給元素設定唯一標識符（key），則該元素無法通過列表索引，只能通過字典key進行索引。（print(values[key])）即將文本元素、輸入框、下拉菜單等的定位由數字替換為標識符（key）
如：
import PySimpleGUI as sg #設置窗口元素 layout = [ [sg.In('123')], #設置輸入框 0 [sg.In('456',key='更改了key')], #設置輸入框 1，並修改其識別碼“1”為“更改了key” [sg.In('789')], #設置輸入框 2 [sg.Button('確認')] #設置“確認”按鈕 ] windows = sg.Window('test',layout,keep_on_top=True) #顯示窗口 while True: #設置窗口循環 event,values = windows.read() #設置變量作為窗口顯示內容 if event == None : #設置關閉窗口事件 break if event == '確認': #設置點擊“確認”按鈕事件 print(values['更改了key']) #設置返回內容 if event == '確認': #設置點擊“確認”按鈕事件 print(values[1]) #設置返回內容
在點擊“確認”按鈕之后，會打印出結果：
******************************************************************************************** 自定義主題
1、主題內容包含窗口的背景顏色、文本（text）顏色、文本框底色、按鈕的字體顏色、按鈕顏色等等。
2、查看有效主題
使用代碼：
import PySimpleGUI as sg sg.theme_previewer()
3、獲取所有有效主題值
使用代碼
import PySimpleGUI as sg print(sg.theme_list())
4、設定主題
①設定指定主題
sg.theme('主題顏色，如Black')
②設定隨機主題
sg.theme('')
5、修改部分主題設置
| 主題代碼 | 釋義 |
| Background |
背景色 |
| Text |
文本顏色 |
| Input |
輸入框底色 |
| Scroll |
滾輪顏色 |
| Text_Input |
輸入框文字顏色 |
| Button |
按鈕顏色（字體顏色，按鈕顏色） |
| Border |
邊界線寬度 |
| Slide_Depth |
滑塊寬度 |
sg.theme_(修改內容，如text)_color(('主題顏色，如Black'))
eg: sg.theme_Text_color
****************************************************************************************** 自定義窗口內容
1、使用for循環快速自定義窗口
①for 循環前面是個小括號時，從左向右遍歷
如：
layout=[ [[sg.Text(i) for i in "ABCD"]] ]
②for循環前面是個中括號時從上向下遍歷
如：
layout=[ [[sg.Text(i) ]for i in "ABCD"] ]
2、元素之間的組合
①直接位於一個列表里面
layout=[ [sg.Text('請輸入基本信息')], [sg.Text('姓名'),sg.In()], [sg.Text('性別'),sg.In()], [sg.Text('國籍'),sg.In()], [sg.B('確認'),sg.B('取消')] ]
②多個列表結合
layout_1 = [ [sg.Text('請輸入基本信息')], [sg.Text('姓名'),sg.In()], ] layout_2 = [ [sg.Text('性別'), sg.In()], [sg.Text('國籍'),sg.In()], ] layout_3 = [ [sg.B('確認'),sg.B('取消')] ] layout = layout_1 + layout_2 + layout_3
3、元素間除了用“,”隔開以外，還可以用“]+[”替代。
如：
layout=[ [sg.Text('請輸入基本信息')], [[sg.Text('姓名')]+[sg.In()] ]+[ [sg.Text('性別')]+[sg.In()] ]+[ [sg.Text('國籍'),sg.In()], [sg.B('確認'),sg.B('取消')]] ]
*************************************************************************** 文本框
一、Text元素及內容
| 元素 |
內容 |
| text="" | str:要顯示的文本。可以包含/n以實現多行。 |
| key=None | [str, int, tuple, object]，元素唯一標識符，書寫規范 key='-NMAE-'。用於元素的定位。 |
| size=(None, None) | (int, int): 元素寬度，行高 |
| font=None | 設定字體的名稱和大小。font='宋體'、font=('宋體',int)或者font=['宋體',int] |
| auto_size_text=None | bool: 元素根據文本自動調節大小 |
| enable_events=False | bool: 事件屬性,設定為True時，點擊文本發生事件 |
| relief=None | 字體浮雕設計：'raised'、'sunken'、'flat'、'ridge'、'solid'、'groove' |
| border_width=None | 設定relief時，用來設定邊界寬度 |
| text_color=None | 文本顏色 |
| background_color=None | 文本背景顏色 |
| justification=None | 對齊方式: 'left'、'right'、'center' |
| pad=None | 元素間隔設定。數字順序為左右上下。 (int, int)、((int, int),(int,int)) 、(int,(int,int))、 ((int, int),int)或者(left/right, top/bottom)、((left, right), (top, bottom)) |
| right_click_menu=None① | 右擊調出菜單。List[List[Union[List[str],str]]]。設定后，右擊此元素可以調出菜單 |
| grab=False | bool:如果為真,點此元素可以移動拖拽窗口 |
| tooltip=None | str:懸浮文本 ,當光標置於該元素上方,會顯示設定的文本 |
| visible=True | bool: 元素可見狀態 |
①右擊調出菜單，寫法為：
[sg.Text('請輸入基本信息',right_click_menu=['0',['1',['1-1','1-2'],'2','3']])]
運行:
二、元素更新
1、更新方法
window[key].update()
window[key].Update()
2、可更新元素
update( value=None, # str 更新文本 background_color=None, # str 更新文本背景顏色 text_color=None, # str 更新文本顏色 font=None, # 更新字體的名稱或者大小 visible=None # 更新元素的可見狀態 )
①更新文本顯示：
window[key].update(value='') #或者 window[key].update('')
②更新文本背景顏色
window[key].update(background_color='red')
③更新文本顏色
window[key].update(text_color='yellow')
④更新字體名稱或者大小
window[key].update(font='黑體') #或者 window[key].update(font=('',22))
⑤更新元素的是否可見
window[key].update(visible=False)
********************************************************************* 單行輸入框
一、單行輸入框元素及內容
| 元素 |
內容 |
| default_text='' |
默認值設定,可以為空字符串 |
| key=None |
元素的唯一標識符，規范 key='-INPUT-' |
| size=(None, None) |
寬,高 |
| disabled=False |
bool：元素禁用，如果為True則禁用，無法輸入任何值 |
| password_char="" |
密碼字符,一般設置為* |
| justification=None |
對齊方式：'r'、'l'、'c' |
| background_color=None |
輸入框的顏色 |
| text_color=None |
輸入框的文本顏色 |
| font=None |
輸入框字體的名稱或者大小設定 |
| tooltip=None |
str: 懸浮文本。當光標置於該元素上方時，設置的文本會顯示 |
| border_width=None |
輸入框邊界線寬度設定 |
| enable_events=False |
bool : 輸入框的事件屬性。如果設定為True，輸入值時會發生一個事件 |
| do_not_clear=True |
bool : 輸入框內容不被清除。如果為False，一發生事件，該輸入框內的值會被清除 |
| focus=False |
bool : 設定焦點。如果為真，則光標顯示在此輸入框 |
| pad=None |
元素之間彼此間隔距離，數字順序為左右上下。(int, int)、((int, int),(int,int))、(int,(int,int))、 ((int, int),int)或者(left/right, top/bottom)、((left, right), (top, bottom)) |
| disabled_readonly_background_color=None |
str: 元素禁用時的背景顏色設定 |
| disabled_readonly_text_color=None |
str: 元素禁用時的文本顏色設定 |
| right_click_menu=None |
右擊按鈕菜單 List[List[Union[List[str],str]]]，設定后,右擊此元素會調出菜單（同文本） |
| visible=True |
元素的可見狀態，如果為False、,則界面不顯示該元素 |
二、設置元素焦點（即移動光標）
`window[key].SetFocus()`
`window[key].set_focus()`
三、元素更新
`window[key].update()`
`window[key].Update()`
可更新元素：
update( value=None, # str : 更新輸入框內的文本 disabled=None, # bool : 更新元素的禁用狀態 # 如果為True,輸入框變成只讀狀態,無法寫入 select=None, # bool: 元素選中 # 如果為True,輸入框內的文本被全選中 # 和focus或者set_focus 一起試着使用吧（先設置焦點） visible=None, # bool : 更新元素的可見狀態 text_color=None, # str : 更新輸入框內的文本顏色 background_color=None, # str : 更新輸入框的背景顏色 move_cursor_to="end" # 光標移動文本的最后 # 和value、focus 一起試着使用吧（先設置焦點） )
四、SetTooltip方法，用於元素懸浮文本的設定：
`window[key].SetTooltip('')` `window[key].set_tooltip('')`
************************************************************** 按鈕
一、按鈕元素介紹
| 元素 |
內容 |
| button_text="" |
顯示在按鈕上的文本 |
| key=None |
元素的唯一標識符 |
| tooltip=None |
懸浮文本 |
| disabled=False |
元素禁用設定，如果為True，點擊按鈕也無法發生事件 |
| image_filename=None |
圖片路徑，按鈕用圖片表示。只支持GIFs和PNGs格式，和image_data二選一使用 |
| image_data=None |
圖片base64格式，按鈕用圖片顯示。和image_filename二選一使用 |
| image_size=(None, None) |
按鈕圖片大小 |
| image_subsample=None |
圖片大小設定。為2時→原圖片的二分之一大小。即2=1/2，3=1/3，4=1/4…… |
| border_width=None |
按鈕邊界線設定 |
| size=(None, None) |
按鈕尺寸設定 |
| auto_size_button=None |
按鈕上的文本自動調節 |
| button_color=None |
按鈕顏色 |
| disabled_button_color=None |
按鈕元素禁用時顯示的按鈕顏色 |
| font=None |
字體名稱，大小設定 |
| bind_return_key=False |
綁定回車鍵。如果設定為True，回車鍵會使此元素被點擊 |
| focus=False |
焦點設置 |
| pad=None |
和其他元素之間間隔設定 |
| visible=True |
元素的可見狀態設定.如果為True，元素則不可見 |
更新內容：
Update( text=None, # 按鈕上顯示的文本 button_color=(None, None), # 按鈕顏色 disabled=None, # 元素禁用設定 image_data=None, # 圖片的base64格式 image_filename=None, # 圖片的路徑 visible=None, # 元素可見狀態設定 image_subsample=None, # 元素大小設定 disabled_button_color=(None, None), # 元素禁用時顯示的文本和按鈕顏色 image_size=None # 圖片尺寸設定 )
************************************************************************************** 列表元素
一、列表元素介紹
| 元素 |
內容 |
| Values="" |
列表或者元組等 |
| =None |
默認選中的值或者列表 |
| key=None |
元素的唯一標識符 |
| select_mode=None |
選擇模式，有效值包含如下4種： ①single，單選，更換時點擊選擇； ②multiple，可以多選，逐一點擊選擇； ③browse，單選，鼠標按住也可以更換選擇； ④extended，可以多選，鼠標按住也可以擴展選擇 |
| enable_events=False |
元素的事件屬性。如果設定為True，元素列表項目被選中時會發生事件 |
| bind_return_key=False |
綁定回車鍵。如果設定為True，回車鍵被按下時相當於此元素被點擊 |
| size=(None， None) |
字符寬度，行高 |
| disabled=False |
元素是否禁用 |
| auto_size_text=None |
如果為True，元素自動根據內容大小調整 |
| font=None |
設置字體名稱或者大小 |
| no_scrollbar=False |
如果為True，則沒有滾動條 |
| background_color=None |
背景顏色設定 |
| text_color=None |
字體顏色設定 |
| pad=None |
元素間隔設定 |
| tooltip=None |
懸浮文本 |
| right_click_menu=None |
右擊調出菜單。List[List[Union[List[str],str]]]。設定后，右擊此元素可以調出菜單 |
| visible=True |
元素可見狀態設定 |
二、更新方法
window[key].update()
window[key].Update()
可更新元素：
Update( values=None, # 元祖或者列表，舉例如下 # values=[1,3] # values=(1,3) disabled=None, # bool : 更新元素是否禁用，舉例如下 # disabled=True # disabled=False set_to_index=None, # 高亮顯示設定的索引，Union[int， list， tuple]，舉例如下 # set_to_index=1 # set_to_index=[1，2] # set_to_index=(1，2) # 注意!單擊只是高亮顯示，並未選中。雙擊才是高亮顯示+選中。 # 單擊獲取值時，不用valuse(key)，而是window[key].get() scroll_to_index=None, # int : 將設定的索引跳到要顯示第一行 select_mode=None, # 更新元素的選擇模式，有效值包含如下4種 # single ，單選，更換時點擊選擇 # multiple ，可以多選，逐一點擊選擇 # browse ，單選，鼠標按住也可以更換選擇 # extended ，可以多選，鼠標按住也可以擴展選擇 visible=None # bool: 更新元素的可見狀態 # visible=True # visible=False )
**************************************************************************** 下拉菜單
一、下拉菜單元素介紹
| 元素 |
內容 |
| Values = "" |
List[Any]或者Tuple[Any] 。顯示下拉菜單信息,列表或者元祖 |
| default_value=None |
初始值設定，默認選中 |
| key=None |
唯一標識符 |
| size=(None, None) |
元素寬度，行高 |
| auto_size_text=None |
元素根據文本自動調節 |
| background_color=None |
背景顏色設定 |
| text_color=None |
文本顏色設定 |
| enable_events=False |
元素事件屬性。如果設定為True，當元素被選中時，會發生一個事件 |
| disabled=False |
元素禁用狀態設定。設定為True時，元素不能進行選擇，也不能輸入 |
| pad=None |
元素間隔設定 |
| tooltip=None |
str: 懸浮文本設定 |
| readonly=False |
元素只讀屬性,只能選擇,不能輸入內容 |
| font=None |
元素字體名稱或者大小設定 |
| visible=True |
元素可見狀態設定 |
二、更新方法
window[key].update()
window[key].Update()
元素可以更新的屬性：
update( value=None, # 更新默認選中的選項① values=None, # 更新顯示的所有下拉菜單文本 set_to_index=None, # 高亮顯示設定的索引的文本 disabled=None, # 更新元素的禁用狀態 readonly=None, # 更新元素是否只讀 font=None, # 更新元素的字體名稱或者大小 visible=None )
注意：
當更新value時，即使處於“readonly=True”，即只讀狀態下，若“Values”內沒有，仍然可以更改，但當重新選擇后值消失。