Python Scrollbar – 實現文本/圖像超出邊界的滾動條效果

一、ScrollBar的作用

ScrollBar是常見的用戶界面元素之一，用於展示超出界面邊界的內容並允許用戶滾動查看。在Python中，我們可以使用Tkinter模塊的ScrollBar方法快速創建一個滾動條。

下面是一個簡單的例子，展示如何使用Tkinter的Text和Scrollbar方法創建一個可以滾動的文本框。在該例中，我們使用了pack方法將文本框和滾動條添加到一個父容器中。

import tkinter as tk

root = tk.Tk()

# 創建文本框
text_box = tk.Text(root, height=10, width=50)
text_box.pack(side="left")

# 創建滾動條
scroll_bar = tk.Scrollbar(root)
scroll_bar.pack(side="right", fill="y")

# 將滾動條關聯到文本框
text_box.config(yscrollcommand=scroll_bar.set)
scroll_bar.config(command=text_box.yview)

root.mainloop()

運行以上代碼，將會看到一個可以滾動的文本框。文本框的邊界是固定的，如果文本超出邊界，可以通過滾動條向上或向下滾動查看。

二、ScrollableFrame組件的實現

在實際的應用場景中，我們可能需要創建一系列的滾動條，並將它們添加到一個可滾動的框架中，以展示大量的內容。由於Python的Tkinter模塊沒有預定義的ScrollableFrame組件，因此我們需要自己創建一個。

下面是一個可以滾動的框架組件的示例代碼。在該例中，我們定義一個ScrollableFrame組件，可以將任意數量的子組件添加到該框架中，並且如果子組件超出邊界，框架可以自動添加垂直滾動條，並允許用戶通過滾動條查看內容。

import tkinter as tk


class ScrollableFrame(tk.Frame):
    def __init__(self, parent, **kwargs):
        tk.Frame.__init__(self, parent, **kwargs)

        # 添加一個Canvas和一個Scrollbar
        self.canvas = tk.Canvas(self)
        self.scrollbar = tk.Scrollbar(self, orient="vertical", command=self.canvas.yview)
        self.scrollable_frame = tk.Frame(self.canvas)

        # 將Scrollbar和Canvas關聯
        self.canvas.configure(yscrollcommand=self.scrollbar.set)

        # 添加子組件到可滾動框架中
        self.canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw")

        # track changes to the canvas and frame width and sync them, also updating scrollregion.
        def configure_scroll_region(event):
            self.canvas.configure(scrollregion=self.canvas.bbox("all"))

        self.scrollable_frame.bind("", configure_scroll_region)
        self.canvas.bind("", lambda event: self.canvas.configure(scrollregion=self.canvas.bbox("all")))

        # 添加Canvas和Scrollbar到父容器中
        self.scrollbar.pack(side="right", fill="y")
        self.canvas.pack(side="left", fill="both", expand=True)

    def add_component(self, component):
        # 將組件添加到可滾動框架中
        component.pack(side="top", fill="x", padx=5, pady=5)
        component.bind("", lambda event: self.canvas.configure(scrollregion=self.canvas.bbox("all")))

上述代碼中，我們定義了一個名為ScrollableFrame的類，並添加了一個帶滾動條的可滾動框架。在該類中，我們先用Tkinter的Frame方法創建一個框架，然後添加了一個Canvas和對應的Scrollbar。Canvas用於展示內容，而Scrollbar用於滾動視圖。我們將Scrollbar關聯到Canvas並創建一個滾動條。然後，我們在Canvas中添加了一個可滾動的子框架，將所有的組件都添加到該子框架中。為了跟蹤框架的大小變化，我們綁定了Configure事件，使其在大小發生變化時更新Scrollbar和Canvas的大小。

為了將組件添加到可滾動框架中，我們定義了一個名為add_component的方法，可以將任意數量的組件添加到可滾動框架中。將組件添加到框架中時，我們將組件包裝在一個Frame中，並將該Frame添加到可滾動的子框架中。在添加操作完成後，我們重新計算Canvas的大小，更新滾動條的大小和位置。

三、使用ScrollableFrame創建可滾動文本框

在實際的應用場景中，我們可能希望創建一個可滾動的文本框，並將其添加到一個滾動框架中，以展示大量的文本內容。下面是一個使用ScrollableFrame創建可滾動文本框的示例代碼：

import tkinter as tk


class ScrollableText(tk.Text):
    def __init__(self, parent, **kwargs):
        tk.Text.__init__(self, parent, **kwargs)

        # 添加一個Scrollbar
        self.scrollbar = tk.Scrollbar(parent, orient="vertical", command=self.yview)

        # 將Scrollbar和Text關聯
        self.configure(yscrollcommand=self.scrollbar.set)

        # 添加Scrollbar到父容器中
        self.scrollbar.pack(side="right", fill="y")

    @staticmethod
    def add_text(parent, text):
        # 在父容器中添加一個可滾動的Text
        scrollable_text = ScrollableText(parent, height=10)
        scrollable_text.insert(tk.END, text)
        scrollable_text.config(state='disabled')
        scrollable_text.pack(side="top", fill="both", expand=True)
        return scrollable_text

在以上代碼中，我們定義了一個名為ScrollableText的類，該類繼承自Tkinter的Text方法，並添加了一個帶Scrollbar的可滾動文本。我們在構造方法中添加了一個Scrollbar，並將其關聯到Text。為了將文本添加到可滾動框架中，我們定義了一個靜態方法add_text。我們在該方法中創建了一個可滾動的Text，並將文本內容插入到該Text中。為了避免用戶編輯文本，我們將配置Text的state參數設置為disabled。最後將組件添加到可滾動框架中，並返回新創建的可滾動文本。

為了演示如何使用ScrollableText，我們可以編寫一段簡單的代碼，並使用以上代碼中的add_text方法將文本添加到可滾動框架中。下面是一個簡單的示例代碼：

root = tk.Tk()

# 創建可滾動框架
scrollable_frame = ScrollableFrame(root)
scrollable_frame.pack(side="top", fill="both", expand=True)

# 添加文本到可滾動框架中
for i in range(20):
    ScrollableText.add_text(scrollable_frame.scrollable_frame, f"這裡是第{i}行文本")

root.mainloop()

運行以上代碼，將會看到一個可以滾動的文本框。文本框的內容超出了界面的邊界，用戶可以通過滾動條上下滾動查看所有內容。

四、結語

本文介紹了如何使用Python的Tkinter模塊創建一個可滾動的用戶界面，以展示大量的文本或圖像。使用Tkinter的Scrollbar方法可以創建一個簡單的滾動條，而使用ScrollableFrame類可以創建一個帶滾動條的可滾動框架。在該框架中，我們可以添加任意數量的組件，並支持滾動查看。如果我們需要創建一個可滾動的文本框，可以使用add_text方法將文本添加到可滾動框架中，並創建一個帶滾動條的文本框。