iT邦幫忙

2021 iThome 鐵人賽

DAY 18
1
自我挑戰組

一起用python寫UI系列 第 18

Day18 用python寫UI-聊聊Listbox與事件綁定

  • 分享至 

  • xImage
  •  

今天延續昨天的Listbox做一些更進階的操作,加入刪除、項目的排序和拖曳項目,這些都是平常常會用到的。

♠♣今天的文章大綱♥♦

  • 加入和刪除
  • 項目排序
  • 拖曳項目

加入和刪除

用Entry輸入內容,案加入按鈕後便會加入Listbox,案刪除後就會刪除。

import tkinter as tk

root = tk.Tk()
root.title('cuteluluWindow')
root.configure(bg="#7AFEC6")
root.iconbitmap('heart_green.ico')
root.geometry('300x300')

def Added():
    g = entry.get()
    if (len(g.strip()) ==0):
        return
    lb.insert ('end', g)
    entry.delete(0, 'end')

def Deleted():
    index = lb.curselection ()
    if (len (index) == 0):
        return
    lb.delete(index)

entry = tk.Entry(root)
entry.grid(row=0, column=0, padx=5, pady=5)

bAdd = tk.Button (root, text="Add",width=10, command=Added)
bAdd.grid(row=0, column=1, padx=5, pady=5)

lb = tk.Listbox (root)
lb.grid(row=1,column=0,columnspan=2,padx=5,sticky='w')

bDel = tk.Button(root,text="Delete",width=10,command=Deleted)
bDel.grid(row=2,column=0,padx=5,pady=5 ,sticky='w') 

root.mainloop()

執行結果⬇⬇⬇
按Add鍵
https://ithelp.ithome.com.tw/upload/images/20211003/20140047HNcS4uBe6Z.png
加入項目
https://ithelp.ithome.com.tw/upload/images/20211003/2014004734hWt3hr5z.png
選取項目
https://ithelp.ithome.com.tw/upload/images/20211003/20140047SUck05Myl4.png
按Delete鍵
https://ithelp.ithome.com.tw/upload/images/20211003/20140047rnnVf7hOSC.png


項目排序

設定要從小到大排或是從大到小排列,執行後可以從選相框去做選擇。

import tkinter as tk

root = tk.Tk()
root.title('cuteluluWindow')
root.configure(bg="#7AFEC6")
root.iconbitmap('heart_green.ico')
root.geometry('300x300')

def choise():
    if (var.get() == True):
        revBool=True #小到大排序
    else:
        revBool=False #大到小排序
    listTmp=list (lb.get (0,'end'))
    sl= sorted(listTmp,reverse=revBool) 
    lb.delete(0, 'end')
    for item in sl:
        lb.insert ('end', item)
singers =["Sam Smith", "Of Monsters and Men", "The Cure", "Bruno Mars", "Taylor Swift", "John Legend"]

lb= tk.Listbox (root)
for singer in singers:
    lb.insert ('end', singer)
lb.pack(padx=10, pady = 5)
b = tk.Button(root, text="Sort", command=choise)
b.pack(side = 'left', padx = 10, pady = 5)

var = tk.BooleanVar()
cb = tk.Checkbutton (root, text="小到大", variable=var)
cb.pack(side='left')

root.mainloop()

執行結果⬇⬇⬇
一開始
https://ithelp.ithome.com.tw/upload/images/20211003/20140047Cu0DMPT600.png
大到小
https://ithelp.ithome.com.tw/upload/images/20211003/20140047fEPs8lOfIJ.png
小到大
https://ithelp.ithome.com.tw/upload/images/20211003/20140047hWjeQQlLVG.png


拖曳項目

可以將選項拖曳換位置。

import tkinter as tk

root = tk.Tk()
root.title('cuteluluWindow')
root.configure(bg="#7AFEC6")
root.iconbitmap('heart_green.ico')
root.geometry('300x300')

def get(event):
    lb.index = lb.nearest(event.y)

def choise(event):
    newIndex = lb.nearest(event.y)
    if newIndex < lb.index:
        x=lb.get (newIndex)
        lb.delete(newIndex)
        lb.insert(newIndex+1,x)
        lb.index = newIndex
    elif newIndex > lb.index:
        x = lb.get(newIndex)
        lb.delete(newIndex)
        lb.insert(newIndex-1,x)
        lb.index= newIndex

singers =["Sam Smith", "Of Monsters and Men", "The Cure", "Bruno Mars", "Taylor Swift", "John Legend"]

lb = tk.Listbox(root)

for singer in singers:
    lb.insert ('end', singer)
    lb.bind("<Button-1>",get)
    lb.bind("<B1-Motion>", choise)

lb.pack(padx  = 1 , pady=10)
root.mainloop()

執行結果⬇⬇⬇
點選一個選項
https://ithelp.ithome.com.tw/upload/images/20211003/20140047XKuarQKYET.png
將其拖曳至想要的位置
https://ithelp.ithome.com.tw/upload/images/20211003/201400474aO67nmJbQ.png


Listbox就到今天了,明天會開始講OptionMenu7部分囉~~~
/images/emoticon/emoticon30.gif


上一篇
Day17 用python寫UI-聊聊Listbox基本操作
下一篇
Day19 用python寫UI-聊聊OptionMenu
系列文
一起用python寫UI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言