Kivy - ScrollView

Kivy 框架中的 ScrollView 控制元件可以包含任何尺寸大於分配給它的尺寸的其他控制元件，併為其提供一個可滾動的面板。這使得包含的控制元件可以垂直或水平平移/滾動。

ScrollView 類定義在 kivy.uix.scrollview 模組中。通常，您在一個佈局中組合一個或多個控制元件，並將該佈局新增到 ScrollView 中。

from kivy.uix.scrollview import ScrollView
view = ScrollView()
view.add_widget(layout)

ScrollView 物件的“scroll_x”和“scroll_y”屬性控制滾動面板的滾動行為。ScrollView 允許雙向滾動。您可以透過將“do_scroll_x”或“do_scroll_y”設定為 False 來停用某個軸上的滾動。

此外，“scroll_distance”屬性設定移動的最小距離，預設為 20 畫素。此外，scroll_timeout 屬性指定最大時間段，預設為 55 毫秒。

“scroll_distance”和“scroll_timeout”的重要性在於：如果觸控手勢滾動的畫素數大於或等於 scroll_distance，並且在 scroll_timeout 時間段內，則將其識別為滾動手勢，並將開始平移（滾動/平移）。如果超時，則觸控按下事件將傳播到子控制元件。

ScrollView 類的其他屬性如下所示：

do_scroll - 允許在 X 或 Y 軸上滾動。
do_scroll_x - 允許在 X 軸上滾動。這是一個 BooleanProperty，預設為 True。
do_scroll_y - 允許在 Y 軸上滾動。這是一個 BooleanProperty，預設為 True。
scroll_distance - 在畫素中滾動 ScrollView 之前移動的距離。這是一個 NumericProperty，預設為 20 畫素。
scroll_timeout - 觸發 scroll_distance 允許的超時時間（毫秒），預設為 55 毫秒
scroll_to() - 滾動視口以確保給定控制元件可見，可以選擇新增填充和動畫。
scroll_type - 設定用於 scrollview 內容的滾動型別。可用選項為：['content'], ['bars'], ['bars', 'content']。
ScrollView 物件發出以下事件：
- on_scroll_start - 觸控開始滾動時觸發的通用事件。
- on_scroll_move - 觸控滾動移動時觸發的通用事件。
- on_scroll_stop - 觸控停止滾動時觸發的通用事件。

示例

為了能夠理解 ScrollView 的工作原理，我們需要一個足夠大的佈局，以便它溢位主應用程式視窗的尺寸。為此，我們將 100 個按鈕新增到一個單列網格佈局中，並應用 scrollview 到它。

以下示例中的操作程式碼如下所示：

layout = GridLayout(cols=1)

for i in range(100):
   btn = Button(text='Button ' + str(i), size_hint_y=None, height=40)
   layout.add_widget(btn)

root = ScrollView()
root.add_widget(layout)

為了確保高度使得有東西可以滾動，將佈局物件的 minimum_height 屬性繫結到其設定器。

layout.bind(minimum_height=layout.setter('height'))

以下是 ScrollView 演示程式碼的完整程式碼：

from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.app import App
from kivy.core.window import Window

Window.size = (720, 350)

class scrollableapp(App):
   def build(self):
      layout = GridLayout(cols=1, spacing=10, size_hint_y=None)
      layout.bind(minimum_height=layout.setter('height'))

      for i in range(100):
         btn = Button(text='Button ' + str(i), size_hint_y=None, height=40)
         layout.add_widget(btn)
      
      root = ScrollView(
         size_hint=(1, None),
         size=(Window.width, Window.height)
      )
      root.add_widget(layout)
      return root

scrollableapp().run()

輸出

執行以上程式碼。要超出檢視中可見的按鈕，請使用滑鼠垂直滾動，或者如果您正在使用觸控式螢幕裝置，則使用手指滾動。

列印頁面