响应式行 ResponsiveRow

ResponsiveRow借用了Bootstrap Web框架中的网格布局的概念。

ResponsiveRow允许将子控件对齐到虚拟列中。默认情况下，虚拟网格有12列，但可以使用ResponsiveRow.columns属性进行自定义。

与expand属性类似，每个控件现在都有一个col属性，用于指定控件应跨越多少列。例如，要创建一个包含两列，每列跨越6个虚拟列的布局：

import flet as ft

ft.ResponsiveRow([
    ft.Column(col=6, controls=[ft.Text("Column 1")]),
    ft.Column(col=6, controls=[ft.Text("Column 2")])
])

ResponsiveRow是“响应式”的，因为它可以使其子控件适应不断变化的屏幕（页面、窗口）大小。上面例子中的col属性是一个常数，它意味着该子控件将在任何屏幕大小下跨越6列。

如果ResponsiveRow的子控件没有指定col属性，它将跨越最大列数。

col可以配置为对特定的“断点”具有不同的值。断点是具有命名维度范围的间隔：

断点	维度
xs	<576px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px
xxl	≥1400px

例如，以下示例在移动设备上将内容折叠为单列，并在较大屏幕上占用两列：

import flet as ft

ft.ResponsiveRow([
    ft.Column(col={"sm": 6}, controls=[ft.Text("Column 1")]),
    ft.Column(col={"sm": 6}, controls=[ft.Text("Column 2")])
])

示例

ResponsiveRow

Python

import flet as ft

def main(page: ft.Page):
    def page_resize(e):
        pw.value = f"{page.width} px"
        pw.update()

    page.on_resize = page_resize

    pw = ft.Text(bottom=50, right=50, style="displaySmall")
    page.overlay.append(pw)
    page.add(
        ft.ResponsiveRow(
            [
                ft.Container(
                    ft.Text("Column 1"),
                    padding=5,
                    bgcolor=ft.colors.YELLOW,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("Column 2"),
                    padding=5,
                    bgcolor=ft.colors.GREEN,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("Column 3"),
                    padding=5,
                    bgcolor=ft.colors.BLUE,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("Column 4"),
                    padding=5,
                    bgcolor=ft.colors.PINK_300,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
            ],
        ),
        ft.ResponsiveRow(
            [
                ft.TextField(label="TextField 1", col={"md": 4}),
                ft.TextField(label="TextField 2", col={"md": 4}),
                ft.TextField(label="TextField 3", col={"md": 4}),
            ],
            run_spacing={"xs": 10},
        ),
    )
    page_resize(None)

ft.app(target=main)

属性

alignment

子控件在水平方向上的对齐方式。

例如，MainAxisAlignment.START是默认值，它将子控件放在行的左侧。

属性值是MainAxisAlignment枚举，具有以下值：

• START（默认值）
• END
• CENTER
• SPACE_BETWEEN
• SPACE_AROUND
• SPACE_EVENLY

columns

布局子控件的虚拟列数，默认为12。

controls

要在ResponsiveRow中显示的控件列表。

run_spacing

当行内容在多行上折行时，运行之间的间距。默认值是10。

spacing

行中控件之间的间距。默认值是10个虚拟像素。只有在alignment设置为start、end或center时，才应用间距。

vertical_alignment

子控件在垂直方向上的对齐方式。

属性值是CrossAxisAlignment枚举，具有以下值：

• START（默认值）
• CENTER
• END
• STRETCH
• BASELINE