Tkinter多视频流界面视频间间隙消除问题求助

问题分析 #

你的视频Label之间出现间隙，并非padx/pady设置无效，而是由以下几个隐藏因素导致：

• ttk组件默认带有内边距和样式间隙
• Grid布局的权重分配让列/行被额外拉伸
• tk.Label和ttk.Label混用导致样式不一致

具体解决方案 #

1. 统一使用无样式的tk.Label #

替换所有ttk.Label为tk.Label，并清除所有边框、内边距，彻底消除组件自带的间隙：

vid_label1 = tk.Label(app, text="Video 1", anchor='center', background='blue', padx=0, pady=0, bd=0, highlightthickness=0)
vid_label2 = tk.Label(app, text="Video 2", anchor='center', padx=0, pady=0, bd=0, highlightthickness=0)
vid_label3 = tk.Label(app, text='Video 3', anchor='center', padx=0, pady=0, bd=0, highlightthickness=0)
vid_label4 = tk.Label(app, text='Video 4', anchor='center', padx=0, pady=0, bd=0, highlightthickness=0)
label4 = tk.Label(app, text='INFO', background="orange", padx=0, pady=0, bd=0, highlightthickness=0)
label1 = tk.Label(app, text='Label', background="lightgray", padx=0, pady=0, bd=0, highlightthickness=0)

2. 调整Grid布局的列/行配置 #

为视频所在的列和行设置固定最小尺寸，取消不必要的权重分配，避免布局自动拉伸产生间隙：

# 视频列设置固定最小宽度，其他列按需分配权重
app.columnconfigure(0, weight=1)
app.columnconfigure(1, minsize=frame_w)
app.columnconfigure(2, minsize=frame_w)
app.columnconfigure(3, weight=1)
app.columnconfigure(4, weight=1)
app.columnconfigure(5, weight=1)

# 视频行设置固定最小高度，其他行按需分配权重
app.rowconfigure(0, weight=1)
app.rowconfigure(1, minsize=frame_h)
app.rowconfigure(2, minsize=frame_h)
app.rowconfigure(3, weight=1)

3. 固定窗口尺寸匹配视频布局 #

四个300x300的视频排列成2x2，总宽度至少600，结合侧边栏调整窗口尺寸，避免布局挤压或拉伸：

app.geometry("800x700")

4. 优化视频更新逻辑 #

用Tkinter原生的after()替代time.sleep()，避免阻塞主循环，同时固定Label尺寸与视频一致：

def segment_a(mask, video_path, label):
    mask_img = cv2.imread(mask, 0)
    cap = cv2.VideoCapture(video_path)

    connected_components = cv2.connectedComponentsWithStats(mask_img, 4, cv2.CV_32S)
    spots = get_parking_spots_bboxes(connected_components)

    def update_frame():
        ret, frame = cap.read()
        if ret:
            for spot in spots:
                x1, y1, w, h = spot
                frame = cv2.rectangle(frame, (x1, y1), (x1 + w, y1 + h), (255, 0, 0), 2)

            frame_resized = cv2.resize(frame, (frame_w, frame_h))
            frame_rgb = cv2.cvtColor(frame_resized, cv2.COLOR_BGR2RGB)
            image = Image.fromarray(frame_rgb)
            image_tk = ImageTk.PhotoImage(image)

            label.config(image=image_tk, width=frame_w, height=frame_h)
            label.image = image_tk
            # 递归调用实现循环更新
            app.after(int(delay_between_frames*1000), update_frame)
        else:
            cap.release()

    # 启动更新
    update_frame()

修改后的完整代码 #

import tkinter as tk
import cv2
from PIL import Image, ImageTk
import threading

frame_w = 300
frame_h = 300

frame_rate = 30
delay_between_frames = 1/frame_rate

def get_parking_spots_bboxes(connected_components):
    # 补充你的车位检测函数实现
    return []

def segment_a(mask, video_path, label):
    mask_img = cv2.imread(mask, 0)
    cap = cv2.VideoCapture(video_path)

    connected_components = cv2.connectedComponentsWithStats(mask_img, 4, cv2.CV_32S)
    spots = get_parking_spots_bboxes(connected_components)

    def update_frame():
        ret, frame = cap.read()
        if ret:
            for spot in spots:
                x1, y1, w, h = spot
                frame = cv2.rectangle(frame, (x1, y1), (x1 + w, y1 + h), (255, 0, 0), 2)

            frame_resized = cv2.resize(frame, (frame_w, frame_h))
            frame_rgb = cv2.cvtColor(frame_resized, cv2.COLOR_BGR2RGB)
            image = Image.fromarray(frame_rgb)
            image_tk = ImageTk.PhotoImage(image)

            label.config(image=image_tk, width=frame_w, height=frame_h)
            label.image = image_tk
            app.after(int(delay_between_frames*1000), update_frame)
        else:
            cap.release()

    update_frame()

def segment_b(mask, video_path, label):
    mask_img = cv2.imread(mask, 0)
    cap = cv2.VideoCapture(video_path)

    connected_components = cv2.connectedComponentsWithStats(mask_img, 4, cv2.CV_32S)
    spots = get_parking_spots_bboxes(connected_components)

    def update_frame():
        ret, frame = cap.read()
        if ret:
            for spot in spots:
                x1, y1, w, h = spot
                frame = cv2.rectangle(frame, (x1, y1), (x1 + w, y1 + h), (255, 0, 0), 2)

            frame_resized = cv2.resize(frame, (frame_w, frame_h))
            frame_rgb = cv2.cvtColor(frame_resized, cv2.COLOR_BGR2RGB)
            image = Image.fromarray(frame_rgb)
            image_tk = ImageTk.PhotoImage(image)

            label.config(image=image_tk, width=frame_w, height=frame_h)
            label.image = image_tk
            app.after(int(delay_between_frames*1000), update_frame)
        else:
            cap.release()

    update_frame()

def segment_c(mask, video_path, label):
    mask_img = cv2.imread(mask, 0)
    cap = cv2.VideoCapture(video_path)

    connected_components = cv2.connectedComponentsWithStats(mask_img, 4, cv2.CV_32S)
    spots = get_parking_spots_bboxes(connected_components)

    def update_frame():
        ret, frame = cap.read()
        if ret:
            for spot in spots:
                x1, y1, w, h = spot
                frame = cv2.rectangle(frame, (x1, y1), (x1 + w, y1 + h), (255, 0, 0), 2)

            frame_resized = cv2.resize(frame, (frame_w, frame_h))
            frame_rgb = cv2.cvtColor(frame_resized, cv2.COLOR_BGR2RGB)
            image = Image.fromarray(frame_rgb)
            image_tk = ImageTk.PhotoImage(image)

            label.config(image=image_tk, width=frame_w, height=frame_h)
            label.image = image_tk
            app.after(int(delay_between_frames*1000), update_frame)
        else:
            cap.release()

    update_frame()

app = tk.Tk()
app.geometry("800x700")
app.title("Video Stream")

# Widgets - 统一使用无间隙样式的tk.Label
vid_label1 = tk.Label(app, text="Video 1", anchor='center', background='blue', padx=0, pady=0, bd=0, highlightthickness=0)
vid_label2 = tk.Label(app, text="Video 2", anchor='center', padx=0, pady=0, bd=0, highlightthickness=0)
vid_label3 = tk.Label(app, text='Video 3', anchor='center', padx=0, pady=0, bd=0, highlightthickness=0)
vid_label4 = tk.Label(app, text='Video 4', anchor='center', padx=0, pady=0, bd=0, highlightthickness=0)
label4 = tk.Label(app, text='INFO', background="orange", padx=0, pady=0, bd=0, highlightthickness=0)
label1 = tk.Label(app, text='Label', background="lightgray", padx=0, pady=0, bd=0, highlightthickness=0)

# Grid布局配置 - 固定视频列/行尺寸
app.columnconfigure(0, weight=1)
app.columnconfigure(1, minsize=frame_w)
app.columnconfigure(2, minsize=frame_w)
app.columnconfigure(3, weight=1)
app.columnconfigure(4, weight=1)
app.columnconfigure(5, weight=1)

app.rowconfigure(0, weight=1)
app.rowconfigure(1, minsize=frame_h)
app.rowconfigure(2, minsize=frame_h)
app.rowconfigure(3, weight=1)

# 放置组件 - 确保无额外padding
vid_label1.grid(row=1, column=1, padx=0, pady=0)
vid_label2.grid(row=1, column=2, padx=0, pady=0)
vid_label3.grid(row=2, column=1, padx=0, pady=0)
vid_label4.grid(row=2, column=2, padx=0, pady=0)
label4.grid(row=1, column=4, sticky='nsew')
label1.grid(row=0, column=0)

# 视频路径配置（替换为你的实际路径）
maskA = "mask_a.png"
video_pathA = "video_a.mp4"
maskB = "mask_b.png"
video_pathB = "video_b.mp4"

# 创建并启动线程
thread1 = threading.Thread(target=segment_a, args=(maskA, video_pathA, vid_label1), daemon=True)
thread2 = threading.Thread(target=segment_b, args=(maskB, video_pathB, vid_label2), daemon=True)

thread1.start()
thread2.start()

app.mainloop()

cv2.destroyAllWindows()

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