ft.ResponsiveRow（响应式的行），借鉴了 Bootstrap Web 框架中的网格布局概念。允许将子控件对齐到虚拟列。默认情况下，一个虚拟网格有 12 列，但可以通过 ResponsiveRow.columns 属性进行自定义。

一、基本用法

示例代码如下：

import flet as ft

def example():
    return ft.Column(
        [
            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=20,
            ),
        ]
    )

def main(page:ft.Page):
    page.title = "Flet 布局控件：ft.ResponsiveRow"
    page.window_width = 600
    page.window_height = 400
    page.window_center()
    page.add(example())
ft.app(target=main)

关键点：

• 类似于 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 可以根据特定的“断点”配置不同的值。断点是命名的尺寸范围：

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

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

二、属性

alignment

子控件水平排列的方式。属性值是 MainAxisAlignment 。默认值是 START。

MainAxisAlignment 枚举具有以下值：

• START: 子项从容器的起始位置开始排列。
• END: 子项从容器的结束位置开始排列。
• CENTER: 子项在容器中居中排列。
• SPACE_BETWEEN: 子项在容器中平均分布，第一个子项放置在起始位置，最后一个子项放置在结束位置，其余子项均匀分布。
• SPACE_AROUND: 子项在容器中平均分布，每个子项周围有相等的间距。
• SPACE_EVENLY: 子项在容器中平均分布，每个子项之间和容器边缘之间的间距相等。

columns

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

controls

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

rtl

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

run_spacing

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

spacing

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

vertical_alignment

子控件垂直排列的方式。属性值是 CrossAxisAlignment 。默认值是 START。

CrossAxisAlignment 枚举具有以下值：

• START
• CENTER
• END
• STRETCH
• BASELINE