如何为KivyMD GridLayout特定行设置背景色实现点击高亮

GridLayout本身不支持直接为特定行设置背景色，因为它的子组件是独立的单元格。要实现无间隙的整行高亮，有两种可行方案：

方法一：使用行容器嵌套（推荐） #

将每一行的所有组件包裹在一个MDBoxLayout中，把这个容器作为GridLayout的子项。设置容器的背景色就能实现整行高亮，且不会出现单元格间隙。

示例代码 #

from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.gridlayout import MDGridLayout
from kivymd.uix.button import MDFlatButton, MDIconButton
from kivymd.uix.scrollview import MDScrollView

class TableRow(MDBoxLayout):
    def __init__(self, row_data, **kwargs):
        super().__init__(**kwargs)
        self.orientation = "horizontal"
        self.spacing = 0  # 消除内部组件间隙
        self.padding = 0
        self.normal_color = [1, 1, 1, 1]  # 默认背景色
        self.highlight_color = [0.2, 0.6, 1, 0.8]  # 高亮背景色
        self.md_bg_color = self.normal_color

        # 构建行内组件
        for data in row_data:
            if isinstance(data, str):
                btn = MDFlatButton(text=data, elevation=0, padding=(20, 0))
                btn.bind(on_press=self.trigger_highlight)
                self.add_widget(btn)
            elif isinstance(data, dict):
                icon_btn = MDIconButton(icon=data["icon"])
                icon_btn.bind(on_release=self.trigger_highlight)
                self.add_widget(icon_btn)

    def trigger_highlight(self, instance):
        # 重置所有行的背景色
        app = MDApp.get_running_app()
        for row in app.root.ids.table_container.children:
            row.md_bg_color = row.normal_color
        # 高亮当前行
        self.md_bg_color = self.highlight_color

class MainApp(MDApp):
    def build(self):
        scroll_view = MDScrollView()
        table_grid = MDGridLayout(cols=1, spacing=0, padding=0, size_hint_y=None)
        table_grid.bind(minimum_height=table_grid.setter("height"))
        scroll_view.ids.table_container = table_grid

        # 添加示例行数据
        row_datas = [
            ["姓名", "年龄", "操作"],
            ["张三", "25", {"icon": "account-edit"}],
            ["李四", "30", {"icon": "account-edit"}],
            ["王五", "28", {"icon": "account-edit"}],
        ]
        for data in row_datas:
            table_grid.add_widget(TableRow(data))

        scroll_view.add_widget(table_grid)
        return scroll_view

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

关键细节 #

• 行容器设置spacing=0和padding=0，避免组件间出现间隙
• 将行内所有组件的点击事件绑定到行的高亮逻辑，确保点击行内任意位置都能触发高亮
• 维护所有行的引用，点击时先重置其他行的背景色，再高亮当前行

方法二：自定义Canvas绘制高亮背景 #

如果不想修改现有组件结构，可以通过自定义GridLayout的canvas，在绘制阶段手动绘制高亮行的背景矩形。这种方式需要计算行的位置和尺寸。

示例代码 #

from kivy.graphics import Color, Rectangle
from kivymd.app import MDApp
from kivymd.uix.gridlayout import MDGridLayout
from kivymd.uix.button import MDFlatButton, MDIconButton
from kivymd.uix.scrollview import MDScrollView

class HighlightGrid(MDGridLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.highlight_row_idx = -1  # 初始无高亮行
        # 监听尺寸和位置变化，更新高亮背景
        self.bind(size=self.update_highlight_bg, pos=self.update_highlight_bg)

    def update_highlight_bg(self, *args):
        self.canvas.after.clear()
        if self.highlight_row_idx == -1:
            return
        # 计算高亮行的位置和尺寸
        row_height = self.height / self.rows
        # 计算Y坐标（GridLayout默认从上到下排列行）
        y_pos = self.y + (self.rows - self.highlight_row_idx - 1) * row_height
        with self.canvas.after:
            Color(0.2, 0.6, 1, 0.8)
            Rectangle(pos=(self.x, y_pos), size=(self.width, row_height))

    def on_touch_down(self, touch):
        if self.collide_point(*touch.pos):
            # 计算点击的行索引
            row_idx = int((self.y + self.height - touch.y) / row_height)
            self.highlight_row_idx = row_idx
            self.update_highlight_bg()
        return super().on_touch_down(touch)

class MainApp(MDApp):
    def build(self):
        scroll_view = MDScrollView()
        table_grid = HighlightGrid(cols=3, spacing=0, padding=0, size_hint_y=None)
        table_grid.bind(minimum_height=table_grid.setter("height"))

        # 添加示例组件
        for i in range(4):
            table_grid.add_widget(MDFlatButton(text=f"姓名{i}", elevation=0))
            table_grid.add_widget(MDFlatButton(text=f"年龄{20+i}", elevation=0))
            table_grid.add_widget(MDIconButton(icon="account-edit"))

        scroll_view.add_widget(table_grid)
        return scroll_view

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

注意事项 #

• 若结合ScrollView使用，需要根据ScrollView的scroll_y值调整行位置计算，否则滚动时高亮背景会错位
• 窗口缩放或GridLayout尺寸变化时，需重新计算行位置，确保高亮背景准确

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