上節課我們學習了使用tkinter開發用戶界面。這節課，我們用tkinter重新實現一下備忘清單，給備忘清單加一個圖形界面。  ## 渲染備忘清單列表  首先，我們使用`ListBox`渲染備忘列表。我們使用for循環迭代todo實例中的每個備忘，插入到`ListBox`。然后調用`pack()`方法渲染列表。 ## 新增備忘  首先，我們使用`Entry`空間渲染一個輸入框。然后定義一個`Button`，并給它綁定上`saveTask`函數。 在saveTask函數中，我們獲取`Entry`控件里的內容，并調用todo對象的`addTodo`方法完成備忘存儲。 ## 刷新列表  新增備忘后，界面上的備忘列表并沒有被刷新調用。因此，我們將下面的這段代碼抽成函數： ~~~ for task in todo.getAllToto(): taskListBox.insert(0, task) taskListBox.pack() ~~~ 在程序運行和新增備忘后調用這個函數，完成新備忘信息的界面同步。 ## 刪除任務  刪除列表的代碼稍微有點復雜。我們給`taskListBox` 綁定了一個函數。注意我們使用的事件名字是：`<<ListboxSelect>>`。在刪除備忘代碼里，我們通過解析`event`對象的`widget`屬性，從而獲得當前點擊的是哪個備忘下標。 完成這個功能后，我們的圖形化備忘清單就完成了。怎么樣，會做了嗎？當我們需要做圖形界面時，記得找到正確的空間就可以完成我們的程序開發了。 完整代碼如下： ``` from tkinter import * class Todo: def __init__(self): self.taskList = [] self.__fileLocation__ = "./todo.txt" self.__loadTask__() def addTodo(self, thing): self.taskList.append(thing) self.__saveTodo__() return True def removeTodo(self, thing): if not thing in self.taskList: return False else: self.taskList.remove(thing) self.__saveTodo__() return True def searchTodo(self, thing): for todo in self.taskList: if thing in todo: return todo return None def getAllToto(self): return self.taskList def __loadTask__(self): file = open(self.__fileLocation__, 'r') self.taskList = file.readlines() def __saveTodo__(self): file = open(self.__fileLocation__, 'w') file.write('\n'.join(self.taskList)) file.close() def saveTask(): task = entry.get() if task in todo.getAllToto(): print('error') button['background'] = 'red' button.pack() else: todo.addTodo(entry.get()) loadTask() def loadTask(): for task in todo.getAllToto(): print(task) listBox.insert(0, task) listBox.pack() def removeTask(event): index = event.widget.curselection()[0] print(todo.getAllToto()[index]) todo = Todo() root=Tk() listBox=Listbox(root) listBox.bind('<<ListboxSelect>>', removeTask) loadTask() entry = Entry(root) entry.pack() button = Button(root,text='新增',command=saveTask) button.pack() root.mainloop() ``` ## 總結 這節課，我們使用tkinter逐步完成了一個界面版的備忘清單。從程序開發中我們可以感知到，圖形界面開發首先要做功能分解。然后按照視圖層（button），邏輯層（函數），實現（Todo類）分層開發。代碼得到了有效隔離。當然，這個項目還可以進一步優化。將圖形界面的UI部分再做一個類，使代碼得到更好的封裝。 在后續的課程里，我們會再迭代出一個web版的任務清單，小朋友們可以多對比這幾個版本的區別。整個程序的代碼，阿達老師會上傳到git上，方便大家下載查看。 **阿達老師-孩子身邊的編程專家** *完整課程請關注阿達老師，主頁里有完整的課程目錄和觀看地址*