Flet框架中仅首个Switch可切换问题排查求助

核心问题 #

你代码中UnitsView类的容器设置了固定宽度width=400，但每个Unit控件的宽度是250，三个Unit加两个VerticalDivider的总宽度远大于400，导致后面两个Unit被挤压到容器可视范围外，其内部的Switch控件自然无法被点击交互。

同时还有一个次要问题：set_on_off函数的参数接收错误，Flet中Switch的on_change事件传递的是ControlEvent对象，而非直接的开关值，原函数会导致打印结果不符合预期。

修复方案 #

方案1：调整容器宽度

修改UnitsView类中Container的宽度设置，要么去掉固定宽度让容器自适应内容，要么设置足够大的宽度容纳所有控件：

class UnitsView(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.unit_view1 = Unit(unit_name="Unit 1")
        self.unit_view2 = Unit(unit_name="Unit 2")
        self.unit_view3 = Unit(unit_name="Unit 3")

    def build(self):
        _cnt = ft.Container(
            alignment=ft.alignment.center,
            padding=50,
            # 去掉固定width，或者设置为900等足够大的值
            content=ft.Row(
                spacing=10,
                controls=[
                    self.unit_view1,
                    ft.VerticalDivider(),
                    self.unit_view2,
                    ft.VerticalDivider(),
                    self.unit_view3,
                ],
            ),
        )
        return _cnt

方案2：开启横向滚动

给Row添加滚动属性，允许用户横向滚动查看所有控件：

class UnitsView(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.unit_view1 = Unit(unit_name="Unit 1")
        self.unit_view2 = Unit(unit_name="Unit 2")
        self.unit_view3 = Unit(unit_name="Unit 3")

    def build(self):
        _cnt = ft.Container(
            alignment=ft.alignment.center,
            padding=50,
            width=400,
            content=ft.Row(
                spacing=10,
                scroll=ft.ScrollMode.AUTO,  # 添加滚动属性
                controls=[
                    self.unit_view1,
                    ft.VerticalDivider(),
                    self.unit_view2,
                    ft.VerticalDivider(),
                    self.unit_view3,
                ],
            ),
        )
        return _cnt

修正事件处理函数

修改set_on_off函数，正确获取开关值：

def set_on_off(e):
    print("unit is", "on" if e.control.value else "off")

修改后完整代码 #

import flet as ft


def _name_row(unit_name):
    return ft.Container(alignment=ft.alignment.center, content=ft.Text(value=unit_name, size=36))


def set_on_off(e):
    print("unit is", "on" if e.control.value else "off")


class Unit(ft.UserControl):
    def __init__(self, unit_name: str):
        super().__init__()
        self.unit_name = unit_name

    def build(self):
        _cnt = ft.Container(
            padding=10,
            width=250,
            border=ft.border.all(3),
            border_radius=30,
            content=ft.Column(
                controls=[
                    ft.Switch(
                        label="Вкл",
                        active_color="green",
                        on_change=set_on_off

                    ),
                    ft.Divider(),
                    _name_row(self.unit_name),
                    ft.Divider(),
                ]
            )
        )
        return _cnt


class UnitsView(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.unit_view1 = Unit(unit_name="Unit 1")
        self.unit_view2 = Unit(unit_name="Unit 2")
        self.unit_view3 = Unit(unit_name="Unit 3")

    def build(self):
        _cnt = ft.Container(
            alignment=ft.alignment.center,
            padding=50,
            content=ft.Row(
                spacing=10,
                controls=[
                    self.unit_view1,
                    ft.VerticalDivider(),
                    self.unit_view2,
                    ft.VerticalDivider(),
                    self.unit_view3,
                ],
            ),
        )
        return _cnt


def main(page: ft.Page):
    page.window_width = 960
    page.window_height = 300

    page.add(UnitsView())


if __name__ == "__main__":
    ft.app(target=main)

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