在kivy python中将Button的背景更改为不同的形状和阴影效果等样式

Question

我了解到在Qt中我们确实有一些方法来制作QpushButton:

1. 暗影效果
2. 通过将setFlat属性设置为True使其变平.
3. 如果有人将鼠标悬停在它上面,就像pushButton_18.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))那样转换不同类型的光标

我期待在Kivy中使Buttons行为类似.可能吗 ？我了解到我们可以将背景图像更改为具有圆角形状的图像 更改Kivy中按钮的背景颜色

但这并不令人满意,因为按钮看起来仍然很正常.没有阴影效果.即使我们点击按钮外的角落,如果单击按钮,也会对其进行处理.

我已经阅读了Kivy Button以及Label的文档,并尝试更改按钮的行为和外观.有人可以建议如何使按钮看起来更好我们可以尝试:

1. 暗影效果
2. 动画影响背景
3. 圆角等.
4. 我们可以把动画gif图像作为动画的背景(我确实尝试过,但它不再是动画)

下面是我刚刚为了探索Kivy中的按钮而创建的代码:

__author__ = 'pbatra'
#Good info about background
#https://stackoverflow.com/questions/20181250/changing-the-background-color-of-a-button-    in-kivy/20181407#20181407

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.properties import ObjectProperty
from kivy.uix.image import Image
from kivy.graphics import Color


gui = '''
<MenuScreen>:
    canvas.before:
        BorderImage:
            # BorderImage behaves like the CSS BorderImage
            border: 10, 10, 10, 10
            texture: self.background_image.texture
            pos: self.pos
            size: self.size
    GridLayout:
        size_hint: .1, .1
        pos_hint: {'center_x': .5, 'center_y': .5}
        rows: 1
        Button:
            text: 'Play'
            font_size: 20
            font_name: 'DroidSans'
            bold: True
            italic: True
            height: 10
            background_color: (0.5, 0.7, 0.5, 0.9)
            #Read more about them from documentation
            background_normal: './images/orange.png'
            background_down: './images/green.png'
            border: 30,30,30,30
            color: (1, .3, .8, .5)

        on_press: self.text = 'Oh yeah'

'''


class MenuScreen(Screen):
    background_image = ObjectProperty(
                                Image(
                                    source='../Examples/examples/widgets/sequenced_images/data/images/button_white_animated.zip',
                                    anim_delay=.5))
    Builder.load_string(gui)
    pass

# Create the screen manager
sm = ScreenManager()
sm.add_widget(MenuScreen(name='menu'))


class MyJB(App):
    def build(self):
        return sm

if __name__ == '__main__':
    MyJB().run() 

Answer 1

kivy中的按钮以ButtonBehavior开始,该ButtonBehavior与Label相结合,添加了background_normal/down ...等属性,用于处理画布上的纹理.

知道了这一点,您可以简单地将ButtonBehavior与您选择的任何其他小部件组合在一起.例如.

from kivy.base import runTouchApp
from kivy.lang import Builder

kv = '''
<ButImage@ButtonBehavior+AsyncImage>

FloatLayout:
    # we don't specify anything here so float layout takes the entire size of the window.
    ButImage:
        id: but
        # take 50% size of the FloatLayout
        size_hint: .5, .5
        # Make Button change it's opacity when pressed for visual indication
        opacity: 1 if self.state == 'normal' else .5
        source: 'http://www.victoriamorrow.com/sitebuildercontent/sitebuilderpictures/enter_button.gif'
        # Introduce Label incase you want text on top of the image
        Label:
            center: but.center
            # change text acc to but state
            text: "Normal" if but.state == 'normal' else 'down'
'''

if __name__ == '__main__':
    runTouchApp(Builder.load_string(kv))

在这里,我们将ButtonBehavior设置为与AsyncImage结合使用,AsyncImage从Web下载图像作为背景.

你应该看到这样的东西

动画影响背景

这就像将源更改为动画gif或.zip中的图像列表一样简单.

from kivy.base import runTouchApp
from kivy.lang import Builder


kv = '''
<ButImage@ButtonBehavior+AsyncImage>

FloatLayout:
    ButImage:
        id: but
        size_hint: .5, .5
        opacity: 1 if self.state == 'normal' else .5
        allow_stretch: True
        keep_ratio: False
        source: 'http://media1.policymic.com/site/article-items/2095/1_gif.gif'
        Label:
            center: but.center
            text: "Normal" if but.state == 'normal' else 'down'


'''

if __name__ == '__main__':
    runTouchApp(Builder.load_string(kv))

查看序列图像示例这是在引入ButtonBehaviors之前完成的,所以它甚至有一个使用旧方法的AnimatedButton类的示例,基本上不再需要它.

暗影效果:

有很多方法可以做到这一点.

您可以为窗口小部件/布局添加阴影,并使此窗口小部件/布局顶部的按钮占用的空间小于阴影,以便考虑阴影上的触摸.

或者创建从ButtonBehavior派生的自己的CustomButtonBehavior类,该类重写collidepoint方法以仅返回True以进行自定义冲突.有一个使用自定义碰撞的小部件的例子.您甚至可以将Image的keep_data属性设置为True,然后检查alpha的像素数据,以确定是否要为碰撞返回true.

圆角等

简单地使用带有圆边的图像kivy支持使用BorderImage指令,这在功能方面相当于css borderimage.Kivy自己的按钮默认使用它.尝试并试验BorderImage的 border属性.