急于改变滑块设计

Kivy change slider design

是否可以使 kivy 滑块看起来像这样?

这是我的 python 代码:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window

class MyWidget(GridLayout):
    def __init__(self, **kwargs):
        super(MyWidget, self).__init__(**kwargs)        
        Window.clearcolor = (1, 1, 1, 1)

class PhoneApp(App):
    def build(self):
        return MyWidget()

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

这是我的 kv 代码:

#:kivy 2.1.0
<Label>
    size_hint_y: None
    height: self.texture_size[1]
    color: 0, 0, 0, 1

<Image>
    size_hint_y: None
    height: self.texture_size[1]

<Button>
    size_hint_x: None
    size_hint_y: None
    width: self.texture_size[0]
    height: self.texture_size[1]

<Slider>
    size_hint_y: None

<GridLayout>
    cols: 1
    size_hint: (0.5, 0.9)
    pos_hint: {"center_x": 0.5, "center_y": 0.5}

<MyWidget>:
    Image:
        source: "captus.png"
    
    Label:
        text: "Test Message"        

    Button:
        text: "Second test"

    Slider:
        id: slider
        min: 0
        max: 100

现在滑块看起来像这样:

是否可以让它看起来像第一个?

另外..我错了还是有问题,没有与栏对齐?

首先,您通常不应使用默认的 class 名称创建 dynamic classes,因为它可能会影响您可能不想要的所有实例的整体设计。而是创建一个 class 的实例并在其中应用您的设计或逻辑。因此,您应该将 kvlang 中的 <Button> 等行更改为 <MyButton@Button>.

现在,由于您在这里使用 GridLayout 作为容器,因此您对其子属性(如 pos 等)的控制较少。Slider 也是一个小部件,因此您可以调整其size。要更改它的外观,您可以使用它的属性,例如 cursor_image 等。通过所有这些更改,您在 kvlang 中的代码现在应该如下所示,

#:kivy 2.1.0

<MyLabel@Label>
    size_hint_y: None
    height: self.texture_size[1]
    color: 0, 0, 0, 1

<MyImage@Image>
    size_hint_y: None
    height: self.texture_size[1]

<MyButton@Button>
#    size_hint_x: None
    size_hint_y: None
#    width: self.texture_size[0]
    height: self.texture_size[1]

<MySlider@Slider>
    size_hint_y: None
    height: dp(64) # Set specific height.
    cursor_image: "path to image"
    background_horizontal: "some path to image"

#<MyGridLayout@GridLayout>
#    cols: 1
#    size_hint: (0.5, 0.9)
#    pos_hint: {"center_x": 0.5, "center_y": 0.5}

<MyWidget>:
    cols: 1
    size_hint: (0.5, 0.9)
    pos_hint: {"center_x": 0.5, "center_y": 0.5}
    MyImage:
        keep_ratio: True
        source: "captus.png"
    
    MyLabel:
        text: "Test Message"        

    MyButton:
        text: "Second test"

    MySlider:
        id: slider
        min: 0
        max: 100