flet的一个复杂布局

黄老五

已于 2024-03-01 16:58:51 修改

阅读量178

点赞数 2

分类专栏： Flet 文章标签： flet 布局 python

于 2024-03-01 16:57:44 首次发布

本文链接：https://blog.csdn.net/huangxulei/article/details/136401187

版权

Flet 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章描述了一个在使用Fletasft库进行页面布局时遇到的问题，即当窗口缩放时，某个部分的自适应布局出现问题。代码中包含了如何创建和管理多个可隐藏的布局组件以及按钮控制它们的显示/隐藏。

摘要由CSDN通过智能技术生成

有个bug，伸缩窗口时候会不自适应。

布局bug

import flet as ft

# 用于是否显示右边栏的辅助变量
rightFlag = False


def main(page: ft.Page):
    page.title = "复杂布局"
    page.padding = 0
    page.window_width = 500
    page.window_height = 600

    top = ft.Container(
        bgcolor=ft.colors.AMBER,
        height=100,
        border=ft.border.only(bottom=ft.border.BorderSide(2, "black")),
    )
    crow = ft.Row(
        controls=[ft.Text("中间自适应高度,设置expand=1")],
        alignment="center",
    )
    center = ft.Container(
        content=crow,
        expand=1,
        # 全部边框
        border=ft.border.all(10, ft.colors.PINK_600),
    )

    top_widget = ft.Container(
        bgcolor=ft.colors.YELLOW,
        content=ft.Text("这是一段文字"),
        height=page.window_height - 130,
        width=page.window_width,
        expand=1,
        left=0,
        top=0,
        border=ft.border.all(2, ft.colors.BLUE_100),
        visible=False,
    )

    def showTop(e):
        if top_widget.visible:
            top_widget.visible = False
        else:
            top_widget.visible = True
        top_widget.update()
        # page.update()

    right_width = ft.Container(
        bgcolor=ft.colors.GREEN_100,
        width=100,
        height=300,
        content=ft.Text("右边栏"),
        offset=ft.transform.Offset(4, 0),
        bottom=100,
        right=10,
    )

    page.overlay.append(right_width)

    def showRight(e):
        global rightFlag
        if rightFlag:
            print("隐藏")
            rightFlag = False
            right_width.offset = ft.transform.Offset(4, 0)
        else:
            print("显示")
            rightFlag = True
            right_width.offset = ft.transform.Offset(0, 0)
        right_width.update()

    top_btn = ft.IconButton(
        icon=ft.icons.ARROW_DROP_UP,
        icon_size=20,
        tooltip="显示上面一个布局",
        on_click=showTop,
    )

    right_btn = ft.IconButton(
        icon=ft.icons.ARROW_RIGHT,
        icon_size=20,
        tooltip="显示右边一个布局",
        on_click=showRight,
    )

    bottom = ft.Container(
        bgcolor=ft.colors.GREY_100,
        height=100,
        # 设置顶部边框颜色和宽度
        border=ft.border.only(top=ft.border.BorderSide(2, "black")),
        content=ft.Row(controls=[top_btn, right_btn]),
    )

    col = ft.Column([top, center, bottom], expand=True, spacing=0)

    st = ft.Stack(
        controls=[col, top_widget],
        expand=True,
    )

    page.add(st)


ft.app(target=main)