ResponsiveRow

ResponsiveRow 借鉴了 Bootstrap 网络框架的网格布局思想。

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")])
])

示例

Live 示例

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。

columns

虚拟列的数量。默认值是 12。

controls

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

rtl

将文本方向设置为右到左。默认值是 False。

run_spacing

行内容换行时的间距。默认值是 10。

spacing

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

vertical_alignment

子控件垂直排列的方式。

属性值是 CrossAxisAlignment 枚举。默认值是 START。