Flet容器技术问题：调整间距与图标文本按钮合并交互

1. 调整两个Container之间的间距 #

有两种实用方式：

• 方式一：通过Column组件的spacing属性控制
  将两个Container嵌套在ft.Column中，用spacing参数直接定义组件间的垂直间距：

ft.Text("Главная страница"),
ft.Column(
    spacing=15,  # 设置间距值，单位为逻辑像素
    controls=[
        ft.Container(
            width=100,
            height=50,
            content=ft.Row([
                ft.Image('assets/settings-icon.png', width=24, height=24),
                ft.TextButton(text='Настройки', on_click=lambda _: navigate_to("/settings"))
            ])
        ),
        ft.Container(
            width=100,
            height=50,
            content=ft.Row([
                ft.Image('assets/info-icon.png', width=24, height=24),
                ft.TextButton(text='Информация', on_click=lambda _: navigate_to("/info"))
            ])
        )
    ]
)

• 方式二：给Container单独添加margin
  为目标Container设置margin属性，精准控制某一侧的间距，比如给第一个Container添加底部间距：

ft.Text("Главная страница"),
ft.Container(
    width=100,
    height=50,
    margin=ft.margin.only(bottom=15),  # 底部增加15像素间距
    content=ft.Row([
        ft.Image('assets/settings-icon.png', width=24, height=24),
        ft.TextButton(text='Настройки', on_click=lambda _: navigate_to("/settings"))
    ])
),
ft.Container(
    width=100,
    height=50,
    content=ft.Row([
        ft.Image('assets/info-icon.png', width=24, height=24),
        ft.TextButton(text='Информация', on_click=lambda _: navigate_to("/info"))
    ])
)

2. 将图标与TextButton合并为统一交互单元 #

让整个Container成为交互主体，同时保留悬停反馈，具体修改如下：

1. 给Container绑定on_click事件，替代TextButton的点击逻辑
2. 配置hover_color实现悬停时的背景变化
3. 用普通Text替换TextButton（或去掉TextButton的默认按钮样式），避免重复交互

修改后的完整代码示例：

ft.Text("Главная страница"),
ft.Container(
    width=100,
    height=50,
    margin=ft.margin.only(bottom=15),
    bgcolor=ft.colors.TRANSPARENT,
    hover_color=ft.colors.GREY_100,  # 悬停时的背景色
    border_radius=5,  # 可选：添加圆角优化样式
    on_click=lambda _: navigate_to("/settings"),  # 点击整个容器触发导航
    content=ft.Row(
        alignment=ft.MainAxisAlignment.CENTER,
        vertical_alignment=ft.CrossAxisAlignment.CENTER,
        controls=[
            ft.Image('assets/settings-icon.png', width=24, height=24),
            ft.Text('Настройки', color=ft.colors.BLUE_700)
        ]
    )
),
ft.Container(
    width=100,
    height=50,
    bgcolor=ft.colors.TRANSPARENT,
    hover_color=ft.colors.GREY_100,
    border_radius=5,
    on_click=lambda _: navigate_to("/info"),
    content=ft.Row(
        alignment=ft.MainAxisAlignment.CENTER,
        vertical_alignment=ft.CrossAxisAlignment.CENTER,
        controls=[
            ft.Image('assets/info-icon.png', width=24, height=24),
            ft.Text('Информация', color=ft.colors.BLUE_700)
        ]
    )
)

如果需要保留TextButton的样式（如文字下划线），可以调整TextButton的样式为透明背景，同时让Container和TextButton绑定同一点击方法：

ft.TextButton(
    text='Настройки',
    on_click=lambda _: navigate_to("/settings"),
    style=ft.ButtonStyle(
        bgcolor=ft.colors.TRANSPARENT,
        overlay_color=ft.colors.TRANSPARENT  # 去掉按钮自身的悬停反馈
    )
)

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