Flet框架下的响应式UI：是否支持比例化布局适配？

Flet完全支持你所说的基于比例/相对尺寸的响应式布局能力，无需硬编码绝对尺寸，就能自动适配桌面、移动等不同尺寸的屏幕。以下是几种核心实现方式：

• 利用Row/Column的expand参数实现比例分配
  通过给子组件设置expand数值，组件会按照数值比例分配父容器的可用空间。例如两个组件分别设置expand=1和expand=2，则它们会以1:2的比例占据父容器的宽度（Row布局）或高度（Column布局）：

  import flet as ft
  
  def main(page: ft.Page):
      page.add(
          ft.Row(
              [
                  ft.Container(ft.Text("占1/3"), expand=1, bgcolor=ft.colors.BLUE_100),
                  ft.Container(ft.Text("占2/3"), expand=2, bgcolor=ft.colors.GREEN_100)
              ]
          )
      )
  
  ft.app(target=main)
  

• 使用ResponsiveRow/ResponsiveColumn适配断点
  这两个组件专门用于响应式布局，可根据预设的屏幕断点（sm、md、lg等）设置子组件的列宽比例。比如在小屏幕（手机）上组件占满全屏，在大屏幕（桌面）上占一半宽度：

  import flet as ft
  
  def main(page: ft.Page):
      page.add(
          ft.ResponsiveRow(
              [
                  ft.Container(ft.Text("自适应宽度"), col={"sm": 12, "lg": 6}, bgcolor=ft.colors.ORANGE_100)
              ]
          )
      )
  
  ft.app(target=main)
  

• 直接设置百分比尺寸
  给Container等组件的width、height设置0到1之间的浮点数，即可表示相对于父容器的百分比。例如width=0.5代表占父容器50%的宽度：

  import flet as ft
  
  def main(page: ft.Page):
      page.add(
          ft.Container(
              ft.Text("占父容器50%宽度"),
              width=0.5,
              height=0.2,
              bgcolor=ft.colors.PURPLE_100
          )
      )
  
  ft.app(target=main)
  

• 通过媒体查询动态调整
  借助page.window_width、page.window_height获取当前屏幕尺寸，动态调整组件布局或样式，实现更精细化的适配：

  import flet as ft
  
  def main(page: ft.Page):
      def on_resize(e):
          if page.window_width < 600:
              # 移动设备布局
              page.controls.clear()
              page.add(ft.Column([ft.Text("移动布局"), ft.Text("占满高度")]))
          else:
              # 桌面设备布局
              page.controls.clear()
              page.add(ft.Row([ft.Text("桌面布局"), ft.Text("占满宽度")]))
          page.update()
  
      page.on_resize = on_resize
      on_resize(None)
  
  ft.app(target=main)
  

以上这些方式都不需要提前知晓部署设备的屏幕尺寸，完全基于相对比例或动态判断来适配不同设备，满足跨平台UI缩放的需求。

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