You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在不使用Image的情况下为Kivy ModalView添加border-radius

给Kivy的ModalView添加圆角(无需使用图片)

下面给你两种可行的实现方式,都不用依赖图片资源:

方法1:直接修改现有ModalView的Canvas

直接在你的代码里替换默认的矩形背景为圆角矩形,同时处理位置和尺寸的同步:

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.modalview import ModalView
from kivy.graphics import RoundedRectangle, Color

class MyApp(App):
    def build(self):
        p = ModalView()
        p.add_widget(Label(text="Hello!"))
        p.size_hint = (.2, .2)
        
        # 清除默认背景,绘制圆角背景
        p.canvas.before.clear()
        with p.canvas.before:
            Color(0, 1, 1, 1)  # 设置背景颜色
            RoundedRectangle(pos=p.pos, size=p.size, radius=[20])  # radius数值控制圆角大小
        
        # 绑定位置/尺寸变化,确保背景跟随弹窗同步更新
        def update_bg(instance, value):
            instance.canvas.before.children[1].pos = instance.pos
            instance.canvas.before.children[1].size = instance.size
        
        p.bind(pos=update_bg, size=update_bg)
        
        p.open()
        return
        
MyApp().run()

说明:

  • radius参数可以传单个数值(四个角统一圆角),也可以传四个数值分别设置左上、右上、右下、左下的圆角大小,比如radius=[10,20,30,40]
  • 绑定pos和size是为了避免弹窗移动或缩放时,背景和弹窗错位

方法2:自定义圆角ModalView子类(适合复用)

如果需要多次使用带圆角的弹窗,建议封装成子类,后续直接调用更方便:

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.modalview import ModalView
from kivy.graphics import RoundedRectangle, Color

class RoundedModalView(ModalView):
    def __init__(self, radius=[20], bg_color=(0,1,1,1), **kwargs):
        super().__init__(**kwargs)
        self.radius = radius
        self.bg_color = bg_color
        self._refresh_bg()
        # 自动同步位置和尺寸变化
        self.bind(pos=self._refresh_bg, size=self._refresh_bg)
    
    def _refresh_bg(self, *args):
        self.canvas.before.clear()
        with self.canvas.before:
            Color(*self.bg_color)
            RoundedRectangle(pos=self.pos, size=self.size, radius=self.radius)

class MyApp(App):
    def build(self):
        # 直接创建圆角弹窗实例,可自定义圆角大小和背景色
        p = RoundedModalView(radius=[30], bg_color=(0,1,1,1))
        p.add_widget(Label(text="Hello!"))
        p.size_hint = (.2, .2)
        p.open()
        return
        
MyApp().run()

注意:两种方法都不会影响ModalView默认的半透明遮罩,只会修改弹窗本身的背景样式。

内容的提问来源于stack exchange,提问作者Thomass Thunbus

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 07:05:12