ft.Row（行）：一种控件，它以水平数组的形式显示其子元素。

在Flet中，Row 是一个非常有用的控件，用于以水平方式排列其子元素。它类似于HTML中的 div 标签，但特别设计用于响应式布局和移动应用开发。

一、基本用法

你可以创建一个简单的 Row 控件，并向其中添加多个子元素（如 Text、Button 等）。例如：

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row(
            [
                ft.Text("你好，行控件！"),
                ft.Button(text="我是按钮1"),
                ft.Button(text="我是按钮2"),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(target=main)

二、高级用法

（一）项目之间的间距

import flet as ft

def example():
    def items(count):
        items = []
        for i in range(1, count + 1):
            items.append(
                ft.Container(
                    content=ft.Text(value=str(i)),
                    alignment=ft.alignment.center,
                    width=50,
                    height=50,
                    bgcolor=ft.Colors.AMBER,
                    border_radius=ft.border_radius.all(5),
                )
            )
        return items

    def gap_slider_change(e):
        row.spacing = int(e.control.value)
        row.update()

    gap_slider = ft.Slider(
        min=0,
        max=50,
        divisions=50,
        value=0,
        label="{value}",
        on_change=gap_slider_change,
    )

    row = ft.Row(spacing=0, controls=items(10))

    return ft.Column([ft.Column([ft.Text("项目之间的间距"), gap_slider]), row])

def main(page:ft.Page):
    page.window_center()
    page.add(example())
    
ft.app(target=main)

（二）行包裹-更改行宽度

行包裹 更改行宽度以查看子项如何换行到多行

import flet as ft

def example():
    def items(count):
        items = []
        for i in range(1, count + 1):
            items.append(
                ft.Container(
                    content=ft.Text(value=str(i)),
                    alignment=ft.alignment.center,
                    width=50,
                    height=50,
                    bgcolor=ft.Colors.AMBER,
                    border_radius=ft.border_radius.all(5),
                )
            )
        return items

    def slider_change(e):
        row.width = float(e.control.value)
        row.update()

    width_slider = ft.Slider(
        min=0,
        max=500,
        divisions=20,
        value=100,
        label="{value}",
        on_change=slider_change,
    )

    row = ft.Row(
        wrap=True,
        spacing=10,
        run_spacing=10,
        controls=items(30),
        width=500,
    )

    return ft.Column(
        [
            ft.Text("更改行宽度以查看子项如何换行到多行："),
            width_slider,
            row,
        ]
    )

def main(page:ft.Page):
    page.window_center()
    page.add(example())

ft.app(target=main)

（三）行水平对齐

水平对齐，通过设置Row的 alignment 属性，属性值是 MainAxisAlignment ，默认为 START。

MainAxisAlignment 枚举具有以下值：

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

（四）行垂直对齐

行的子控件的垂直对齐方式，通过设置 vertical_alignment 属性实现，属性值是 CrossAxisAlignment ，默认为 START。

CrossAxisAlignment 枚举具有以下值：

• START
• CENTER
• END
• STRETCH
• BASELINE

三、属性

alignment

子控件的水平对齐方式。属性值是 MainAxisAlignment ，默认为 START。

auto_scroll

如果Scrollbar应该自动移动其位置以便在children更新时滚动到末尾。必须为 False 才能使 scroll_to() 方法生效。

controls

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

rtl

True 将文本方向设置为右到左，默认为 False。

run_spacing

wrap 为 True 时的运行间距。默认值为 10。

scroll

启用水平滚动以防止 Row 的内容溢出。属性值是一个可选的 ScrollMode ，默认为 None。

spacing

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

on_scroll_interval

滚动事件的节流间隔，以毫秒为单位。默认值为 10。

tight

指定水平方向上应该占用的空间。默认值为 False - 将所有空间分配给子控件。

vertical_alignment

子控件的垂直对齐方式。属性值是 CrossAxisAlignment ，默认为 START。

wrap

如果设置为 True，则 Row 将把子控件放入额外的行（runs）中，以便它们不适合单个行。

四、方法

scroll_to(offset, delta, key, duration, curve)

将滚动位置移动到绝对 offset、相对 delta 或跳转到指定 key 的控件。

offset 是滚动控件的最小和最大范围之间的绝对值，例如：

products.scroll_to(offset=100, duration=1000)

offset 可以为负值以从滚动控件的末端滚动。例如，要滚动到最末端：

products.scroll_to(offset=-1, duration=1000)

delta 允许相对于当前位置移动滚动。使用正 delta 向前滚动，负 delta 向后滚动。例如，向前滚动 50 像素：

products.scroll_to(delta=50)

key 允许将滚动位置移动到指定 key 的控件。大多数 Flet 控件具有 key 属性，该属性在 Flutter 中转换为“全局键”。key 必须在整个页面/视图中唯一。

五、事件

on_scroll

当用户更改滚动位置时触发。

事件处理程序参数是一个 OnScrollEvent 类的实例。

六、扩展子控件

当将子控件放入 Row 中时，可以“扩展”它以填充可用的空间。每个控件都有一个 expand 属性，可以具有布尔值（True - 扩展控件以填充所有可用的空间）或整数 - 一个“expand factor”，指定如何将自由空间与其他扩展子控件分配。

以下示例使用数字expand factors创建了一个 Row，其中包含 3 个容器，宽度分别为 20% (1/5)、60% (3/5) 和 20% (1/5)：

import flet as ft

def main(page:ft.Page):
    page.window_center()
    page.add(
        ft.Row([
        ft.Container(expand=1, content=ft.Text("A容器1/5"), bgcolor=ft.colors.AMBER_100),
        ft.Container(expand=3, content=ft.Text("B容器3/5"), bgcolor=ft.colors.AMBER_200),
        ft.Container(expand=1, content=ft.Text("C容器1/5"), bgcolor=ft.colors.AMBER_300)
        ])
    )

ft.app(target=main)

（汇报完毕，感谢收看）