Kivy 中的圆角按钮角

Posted 2023-04-14

【中文标题】Kivy 中的圆角按钮角

【英文标题】：Rounding button corners in Kivy

【发布时间】：2013-10-01 01:27:16

【问题描述】：

在 Kivy 中为按钮创建圆角的首选方法是什么？

还有其他同样可行的方法来执行这项任务吗？

【参考方案1】：

这是一个棘手的问题。就我而言，Widgets 始终是矩形。但是我们可以分别使用background_normal 和background_down 属性更改背景并为正常和关闭状态放置几个图像。您还需要了解border 属性。

有了这两张名为normal.png 和down.png 的图片，您就可以开始添加圆形边框了。

这是一段代码，非常直接（我尝试在下面解释border属性）：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.lang import Builder

Builder.load_string("""
<Base>:
    Button:
        background_normal: 'normal.png'
        background_down: 'down.png'
        border: 30,30,30,30
""")


class Base(FloatLayout):
    pass

class ButtonsApp(App):
    def build(self):
        return Base()

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

我理解这一点的方式（我可能错了）是这样的。 border: 30,30,30,30 中的值告诉背景按钮的边框将使用顶部、右侧、底部和左侧的像素数。其余的将被中间部分填充。我不确定这里。顺便说一句，如果您想看一些很酷的东西，请参阅例如border: 150,150,150,150。原因是我们正在拾取比实际图像更大的边框。

警告：小部件仍然是矩形。这意味着即使您单击圆角，按钮仍会收到事件。我想这是一个公道的价格。如果您想做得更好，也许我可以帮助您，但我们需要使用一些数学来解决问题。文档中Pong Game tutorial 的技巧之一是，实际上球是一个正方形。我发布了一个相关问题here，但您需要使用Canvas

【讨论】：

对于自定义碰撞，github.com/kivy/kivy/blob/master/examples/widgets/… 有一个示例。按钮使用边框图像来显示具有边框属性的图像。此边框图像在功能上与 CSS BorderImage 非常相似。你可能会从这里得到一个好主意css-tricks.com/understanding-border-image

在 GeeksforGeeks 文章 Python - Rounding button corners in kivy

中也解释了这种按钮图像方法

【参考方案2】：

如果你只追求好看，对边角不挑剔，虽然是圆角，但仍然是接触点，你可以简单地做到这一点，如这个示例程序所示（这个示例的半径很大） ：

from kivy.uix.button import Button
from kivy.lang import Builder
from kivy.base import runTouchApp

kv="""
<RoundedButton@Button>:
    background_color: 0,0,0,0  # the last zero is the critical on, make invisible
    canvas.before:
        Color:
            rgba: (.4,.4,.4,1) if self.state=='normal' else (0,.7,.7,1)  # visual feedback of press
        RoundedRectangle:
            pos: self.pos
            size: self.size
            radius: [50,]
"""
class RoundedButton(Button):
    pass

Builder.load_string(kv)

runTouchApp(RoundedButton(text="Hit Me!"))

【讨论】：

这个Button类的扩展在KivyCoders上也有解释：Rounded Buttons With Kivy – Python Kivy GUI Tutorial #22（包括一个视频）

【参考方案3】：

使用画布项目的自制课程怎么样？

您可以更改每个布局的半径。

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import *

root=Widget()

class RoundCorner(RelativeLayout):
    def __init__(self,r=50,**kwargs):
        super(RoundCorner, self).__init__(**kwargs)
        self.surf=FloatLayout(); self.add_widget(self.surf)
        with self.canvas:
            Color(.3,0,3,0.3)
            Rectangle(pos=[-r,0],size=[r,self.size[1]])
            Rectangle(pos=[0,-r],size=[self.size[0],self.size[1]+2*r])
            Rectangle(pos=[self.size[0],0],size=[r,self.size[1]])

            Color(0,.3,0,.5)
            Ellipse(pos=[-r,-r],size=[2*r,2*r])
            Ellipse(pos=[self.size[0]-r,-r],size=[2*r,2*r])
            Ellipse(pos=[-r,self.size[1]-r],size=[2*r,2*r])
            Ellipse(pos=[self.size[0]-r,self.size[1]-r],size=[2*r,2*r])

            Color(1,1,1,0.3)
            self.bg=Rectangle(size=self.size)

root.add_widget(RoundCorner(size=[300,400],pos=[320,100]))
root.add_widget(RoundCorner(size=[100,100],pos=[100,200]))

class MyApp(App):
    def __init__(self):
        super(MyApp, self).__init__()
    def build(self):
        return root

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

我选择了一个相对的布局，因为写这个东西比较容易。它可以通过将其全局位置添加到画布项目来应用于小部件，但为了简单起见，我这样做了。并且像这样选择颜色以使逻辑可见。下面是上面代码的例子：

只需调整代码中的Color，就可以开始了。

这更好，因为分辨率不是问题（我可能错了 - 我不是 OpenGL 专家）。

嗯，这不是一个完整的按钮。它只是一个布局，可以按下或按下，它可以像真正的按钮一样使用。我没有将它包含在代码中。 the official site 上有很多关于事件的内容。

【参考方案4】：

使用材质扩展KivyMD，有许多带有圆角的新按钮类：

MDRoundFlatButton MDRoundFlatIconButton MDFillRoundFlatButton MDFillRoundFlatIconButton

一个简单的例子

在 Python 中使用 KV 语言：

from kivymd.app import MDApp

from kivy.lang import Builder

KV = '''
Screen:

    MDRoundFlatButton:
       text: "MDROUNDFLATBUTTON"
'''


class Example(MDApp):
    def build(self):
        return Builder.load_string(KV)


Example().run()

您还可以导入和扩展抽象类kivymd.uix.button.MDRoundFlatButton。