Kivy - 按鈕位置

上一頁
下一頁

將小部件放置在適當的位置是設計符合人體工程學使用者介面的關鍵。在 Kivy 中，按鈕（以及其他小部件）的位置主要由使用的佈局控制。在本章中，我們將學習如何在 Kivy 應用程式視窗的特定位置放置按鈕。

決定位置的第一個因素是佈局。在 Kivy 中，佈局是用於以特定方式排列小部件的容器。例如 -

  • BoxLayout 按順序放置小部件，可以是垂直或水平順序。

  • 如果使用GridLayout，則小部件位置由 rows 和 cols 屬性決定。

  • FloatLayout 對放置沒有限制。可以透過分配其絕對座標將按鈕或任何其他小部件放在任何位置。

視窗大小

要在特定位置放置按鈕，首先定義應用程式視窗的大小。Window 物件的“size”屬性可幫助您設定所需的大小。

from kivy.core.window import Window
Window.size = (720,400)

Kivy 的視窗座標系定義了小部件的位置以及分派給它們觸控事件的位置。它將 (0, 0) 放置在視窗的左下角。顯然，視窗的右上角對應於 (1,1)。

Button 類從 Widget 類繼承“pos”和“pos_hint”屬性。它們有助於確定按鈕在視窗表面上的位置。

位置屬性

pos - 此屬性是水平和垂直軸上座標值“x”和“y”的元組，從視窗的左下角測量。例如 -

button = Button(text ='Hello world', pos =(20, 20))

pos_hint - 此屬性提供小部件位置的提示。它允許您設定小部件在其父佈局中的位置。該屬性是一個最多包含 8 個鍵的字典，用於確定位置 -

  • x
  • y
  • left
  • right
  • top
  • bottom
  • center_x
  • center_y

鍵“x”、“right”和“center_x”將使用父級寬度。鍵“y”、“top”和“center_y”將使用父級高度。例如，如果要將按鈕的頂部設定為其父佈局高度的 10%，則可以編寫 -

button = Button(text ='Hello world', pos_hint={'top': 0.1})

“pos_hint”是 ObjectProperty。並非所有佈局都使用它。

支援定位的佈局

  • FloatLayout - 支援“pos_hint”屬性。這些值是 0 到 1 之間的數字，表示視窗大小的比例。

  • RelativeLayout - 定位屬性（pos、x、center_x、right、y、center_y 和 top）相對於佈局大小，而不是視窗大小。

  • BoxLayout - 只有“x”鍵（x、center_x 和 right）在垂直方向上工作，而（y、center_y、top）在水平方向上工作。固定定位屬性（pos、x、center_x、right、y、center_y 和 top）也適用相同的規則。

在下面的程式碼中，我們在上部垂直 BoxLayout 內放置了一個水平 BoxLayout 和一個 FloatLayout。上部水平框包含四個按鈕：LEFT、RIGHT、TOP 和 BOTTOM。在 FloatLaout 內部，我們使用“pos”屬性放置了一個按鈕。

App 類有一個名為 movebtn() 的方法，該方法識別按下按鈕的標題並更改按鈕的“x”或“y”位置。

def movebtn(self,instance):
   if instance.text =='RIGHT':
      self.btn.pos[0]=self.btn.pos[0]+10
   
   if instance.text == 'LEFT':
      self.btn.pos[0] = self.btn.pos[0]-10
   
   if instance.text == 'UP':
      self.btn.pos[1] = self.btn.pos[1]+10
   
   if instance.text == 'DOWN':
      self.btn.pos[1] = self.btn.pos[1]-10

RIGHT 和 LEFT 按鈕按下會導致“x”位置遞增或遞減 10 個畫素。同樣，TOP 和 BOTTOM 按鈕將“y”值更改為 ±10。

示例 1

下面給出了完整程式碼 -

from kivy.app import App
from kivy.uix.button import Button
from kivy.config import Config
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout

Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '400')
Config.set('graphics', 'resizable', '1')

class MovableButtonApp(App):
   def movebtn(self,instance):
      if instance.text =='RIGHT':
         self.btn.pos[0]=self.btn.pos[0]+10

      if instance.text == 'LEFT':
         self.btn.pos[0] = self.btn.pos[0]-10

      if instance.text == 'UP':
         self.btn.pos[1] = self.btn.pos[1]+10

      if instance.text == 'DOWN':
         self.btn.pos[1] = self.btn.pos[1]-10

   def build(self):
      mblo = BoxLayout(orientation='vertical')
      blo = BoxLayout(orientation ='horizontal')
      b1 = Button(text='LEFT')
      b1.bind(on_press=self.movebtn)
      b2 = Button(text = 'RIGHT')
      b2.bind(on_press=self.movebtn)
      b3 = Button(text = 'UP')
      b3.bind(on_press=self.movebtn)
      b4 = Button(text = 'DOWN')
      b4.bind(on_press=self.movebtn)
      blo.add_widget(b1)
      blo.add_widget(b2)
      blo.add_widget(b3)
      blo.add_widget(b4)

      mblo.add_widget(blo)
      flo = FloatLayout()
      self.btn = Button(text='Movable Button', size_hint= (.350, .150))
      flo.add_widget(self.btn)
      mblo.add_widget(flo)
      return mblo
MovableButtonApp().run()

輸出

執行程式時，您應該會看到頂部有四個按鈕，左下角有一個可移動按鈕。按下按鈕並檢視可移動按鈕更改其位置。

Kivy Button Position

這是另一個演示按鈕定位用法的示例。讓我們定義一個擴充套件 Button 類的 MovableButton 類。我們定義 on_touch_down()、on_touch_up() 和 on_touch_move() 方法來處理觸控事件。

on_touch_down() 方法檢查觸控事件是否發生在按鈕的邊界內，透過將小部件設定為當前觸控目標來處理觸控事件。

def on_touch_down(self, touch):
   if self.collide_point(*touch.pos):
      touch.grab(self)
      return True
   return super().on_touch_down(touch)

如果我們的按鈕正在處理觸控事件，則使用 on_button_move() 方法更新其位置 -

def on_touch_move(self, touch):
   if touch.grab_current == self:
      self.pos = (self.pos[0] + touch.dx, self.pos[1] + touch.dy)

最後，釋放按鈕作為當前觸控目標並處理觸控事件。

def on_touch_up(self, touch):
   if touch.grab_current == self:
      touch.ungrab(self)
      return True
   return super().on_touch_up(touch)

build() 方法只使用左下角位置的一個按鈕構建視窗。

def build(self):
   return MovableButton(text='Drag me', size_hint= (.250, .100))

示例 2

下面給出了完整程式碼 -

from kivy.app import App
from kivy.uix.button import Button
from kivy.config import Config
from kivy.uix.floatlayout import FloatLayout

Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '300')
Config.set('graphics', 'resizable', '1')

class MovableButton(Button):
   def on_touch_down(self, touch):
      if self.collide_point(*touch.pos):
         touch.grab(self)
         return True
      return super().on_touch_down(touch)

   def on_touch_move(self, touch):
      if touch.grab_current == self:
         self.pos = (self.pos[0] + touch.dx, self.pos[1] + touch.dy)

   # Override the on_touch_up method to update
   # the widget's position when the touch event ends
   def on_touch_up(self, touch):
      if touch.grab_current == self:
         touch.ungrab(self)
         return True
      return super().on_touch_up(touch)

class TestApp(App):
   def build(self):
      return MovableButton(text='Drag me', size_hint=(.250, .100))

if __name__ == "__main__":
   TestApp().run()

輸出

執行上面的程式碼。按住滑鼠按鈕並拖動按鈕到視窗的任何位置。

Kivy Button Position Move
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.