使用Kivy开发GUI应用如何同时放置摄像头画面与功能按钮

核心逻辑是使用Kivy的布局容器承载多个组件，你不需要在build方法里只返回单个组件，只需要把摄像头显示组件、按钮都添加到同一个布局容器，再返回布局即可。

具体修改要点 #

• 移除MyApp类对Widget的错误继承，App类仅需继承Kivy的App基类
• 新增垂直BoxLayout作为根布局，上层放摄像头渲染组件，下层放功能按钮
• 新增灰度模式开关变量，绑定按钮点击事件切换开关状态
• 视频帧渲染逻辑中根据开关状态，判断是否需要转换灰度效果
• 增加画布清空逻辑，避免画面重影

完整可运行代码 #

import sys
import numpy as np
import cv2

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle
from kivy.graphics.texture import Texture

from kivy.clock import Clock
from kivy.core.window import Window

WINDOW_WIDTH = 1500
WINDOW_HEIGHT = 1008

# 窗口设置
Window.size = (WINDOW_WIDTH, WINDOW_HEIGHT)

class MyApp(App):
    title = "opencv on kivy"

    def __init__(self, **kwargs):
        super(MyApp, self).__init__(**kwargs)
        # 灰度模式开关
        self.enable_gray = False
        # 摄像头渲染组件
        self.camera_widget = Widget()
        # 根布局：垂直布局
        self.root_layout = BoxLayout(orientation='vertical', spacing=10, padding=10)
        # 切换按钮
        self.toggle_btn = Button(text='切换灰度效果', size_hint=(1, 0.1))
        self.toggle_btn.bind(on_press=self.toggle_gray)
        # 把组件添加到布局
        self.root_layout.add_widget(self.camera_widget)
        self.root_layout.add_widget(self.toggle_btn)
        # 定时刷新帧
        Clock.schedule_interval(self.update, 1.0 / 30)
        # 打开摄像头，默认索引0是内置摄像头，外接摄像头可改1
        self.cap = cv2.VideoCapture(0)

    def toggle_gray(self, instance):
        # 点击按钮切换灰度开关
        self.enable_gray = not self.enable_gray

    def update(self, dt):
        ret, img = self.cap.read()
        if not ret:
            return
        # BGR转RGB
        img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
        # 判断是否要转灰度
        if self.enable_gray:
            # 转灰度后再转回RGB，保证通道数匹配纹理要求
            img = cv2.cvtColor(cv2.cvtColor(img, cv2.COLOR_RGB2GRAY), cv2.COLOR_GRAY2RGB)
        # 翻转图像适配Kivy坐标
        img = cv2.flip(img, 0)
        # 创建纹理并渲染
        texture = Texture.create(size=(img.shape[1], img.shape[0]))
        texture.blit_buffer(img.tobytes())
        with self.camera_widget.canvas:
            # 清除上一帧画面，避免重影
            self.camera_widget.canvas.clear()
            Rectangle(texture=texture, pos=(int(WINDOW_WIDTH/2) - int(img.shape[1]/2), WINDOW_HEIGHT*0.1), size=(img.shape[1], img.shape[0]))

    def build(self):
        # 返回根布局即可
        return self.root_layout

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

如果你需要实现按钮悬浮在摄像头画面上的效果，把BoxLayout换成FloatLayout，直接指定按钮的pos和size即可。

内容的提问来源于stack exchange，提问作者user16793104