在 Kivy 中为按钮创建圆角的首选方法是什么?
还有其他同样可行的方法来执行此任务吗?
这是一个棘手的问题。就我而言Widgets
,总是矩形。background_normal
但是我们可以分别使用和background_down
属性更改背景并为正常和关闭状态放置几张图像。您还需要了解该border
属性。
使用这两个名为normal.png
and的图像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 教程的技巧之一是,球实际上是一个正方形。我在这里发布了一个相关的问题,但您需要使用Canvas
如果你只追求好看的外观,并且对角落不挑剔,虽然是圆角,但仍然是接触点,你可以简单地做到这一点,如这个示例程序所示(这个示例的半径很大):
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!"))
带帆布物品的自制班怎么样?
您可以更改每个布局的半径。
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 专家)。
好吧,这不是一个完整的按钮。它只是一个布局,可以按下或按下,它可以像真正的按钮一样使用。我没有将它包含在代码中。官方网站上有很多关于事件的东西。
使用材质扩展KivyMD有许多带有圆角的新 Button 类:
在 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
。