Kivy - 滑塊

在 Kivy 框架中，Slider 元件在您想要設定連續可變數值屬性的值時非常有用。例如，電視螢幕或移動裝置或揚聲器聲音的亮度。

滑塊元件的外觀是一個水平或垂直的條形，帶有一個在其上滑動的旋鈕來設定值。當旋鈕位於水平滑塊的左側時，它對應於最小值；當它位於最右側時，它對應於最大值。

Slider 類在 "kivy.uix.slider" 類中定義。

from kivy.uix.slider import Slider slider = Slider(**kwargs)

要在 Kivy 中建立基本的滑塊控制元件，我們可以使用以下程式碼：

from kivy.uix.slider import Slider
s = Slider(min=0, max=100, value=25)

滑塊控制元件的預設方向是水平方向。如果需要，設定 orientation='vertical'。您應該在 Kivy 應用程式視窗上看到如下所示的滑塊。

可以使用滑鼠或觸控（在觸控式螢幕的情況下）沿滑塊移動旋鈕。

要根據滑塊值的更改呼叫某個操作，請將 value 屬性繫結到某個回撥函式。

def on_value_changed(self, instance, val):
   print (val)
   
s.bind(value = on_value_changed)

以下是 Slider 類的一些重要屬性：

max - 值允許的最大值。max 是一個 NumericProperty，預設為 100。
min - 值允許的最小值。min 是一個 NumericProperty，預設為 0。
orientation - 滑塊的方向。orientation 是一個 OptionProperty，預設為 'horizontal'。可以取 'vertical' 或 'horizontal' 的值。
padding - 滑塊的填充。填充用於圖形表示和互動。它防止游標超出滑塊邊界框的範圍。padding 是一個 NumericProperty，預設為 16sp。
range - 滑塊的範圍，格式為 (最小值，最大值)，是 (min, max) 屬性的 ReferenceListProperty。
sensitivity - 觸控是否與整個元件主體碰撞或僅與滑塊手柄部分碰撞。sensitivity 是一個 OptionProperty，預設為 'all'。可以取 'all' 或 'handle' 的值。
step - 滑塊的步長。確定滑塊在 min 和 max 之間每次移動的間隔或步長的大小。step 是一個 NumericProperty，預設為 0。
value - 滑塊當前使用的值。value 是一個 NumericProperty，預設為 0。
value_track - 決定滑塊是否應該繪製表示 min 和 value 屬性值之間空間的線條。它是一個 BooleanProperty，預設為 False。
value_track_color - value_line 的顏色，採用 rgba 格式。value_track_color 是一個 ColorProperty，預設為 [1, 1, 1, 1]。
value_track_width - 軌跡線的寬度，預設為 3dp。

示例

在下面的程式碼中，我們使用三個滑塊元件來讓使用者設定所需顏色的 RGB 值。滑塊的值用於更改 RGB 值。例如，RED 滑塊更改設定 'r' 分量的值：

def on_red(self, instance, val):
   self.r = int(val)/255
   self.colour=[self.r, self.g, self.b, self.t]
   self.redValue.text = str(int(val))

綠色和藍色的類似回撥函式也已編碼。這些被分配給 colur 變數的值，該變數是 ColorProperty 型別。它繫結到 Label 元件的顏色屬性。

colour = ColorProperty([1,0,0,1])

def on_colour_change(self, instance, value):
   self.ttl.color=self.colour

因此，透過滑塊設定 RGB 值會更改 Label 的文字顏色。

三個滑塊控制元件以及所需的標籤放置在一個具有四列的內部網格佈局中。一個具有一個列的上部網格包含一個標籤，其顏色希望透過滑塊移動來更改。

完整程式碼如下所示：

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.slider import Slider
from kivy.uix.label import Label
from kivy.properties import ColorProperty, NumericProperty
from kivy.core.window import Window

Window.size = (720, 400)

class SliderExample(App):
   r = NumericProperty(0)
   g = NumericProperty(0)
   b = NumericProperty(0)
   t = NumericProperty(1)
   colour = ColorProperty([1, 0, 0, 1])

   def on_colour_change(self, instance, value):
      self.ttl.color = self.colour

   def on_red(self, instance, val):
      self.r = int(val) / 255
      self.colour = [self.r, self.g, self.b, self.t]
      self.redValue.text = str(int(val))
   
   def on_green(self, instance, val):
      self.g = int(val) / 255
      self.colour = [self.r, self.g, self.b, self.t]
      self.greenValue.text = str(int(val))
   
   def on_blue(self, instance, val):   
      self.b = int(val) / 255
      self.colour = [self.r, self.g, self.b, self.t]
      self.blueValue.text = str(int(val))
   
   def build(self):
      maingrid = GridLayout(cols=1)
      self.ttl = Label(
         text='Slider Example',
         color=self.colour, font_size=32
      )
      maingrid.add_widget(self.ttl)
      grid = GridLayout(cols=4)
      self.red = Slider(min=0, max=255)
      self.green = Slider(min=0, max=255)
      self.blue = Slider(min=0, max=255)
      grid.add_widget(Label(text='RED'))
      grid.add_widget(self.red)
      grid.add_widget(Label(text='Slider Value'))
      self.redValue = Label(text='0')
      grid.add_widget(self.redValue)
      self.red.bind(value=self.on_red)
      
      grid.add_widget(Label(text='GREEN'))
      grid.add_widget(self.green)
      grid.add_widget(Label(text='Slider Value'))
      self.greenValue = Label(text='0')
      grid.add_widget(self.greenValue)
      self.green.bind(value=self.on_green)
      
      grid.add_widget(Label(text='BLUE'))
      grid.add_widget(self.blue)
      grid.add_widget(Label(text='Slider Value'))
      self.blueValue = Label(text='0')
      grid.add_widget(self.blueValue)
      self.blue.bind(value=self.on_blue)
      self.bind(colour=self.on_colour_change)
      maingrid.add_widget(grid)
      return maingrid

root = SliderExample()
root.run()

輸出

執行此程式碼時，它將生成一個如下所示的輸出視窗：

列印頁面