flet学习笔记

m0_60813772

已于 2024-04-24 16:00:22 修改

阅读量194

点赞数 8

文章标签：学习笔记 java

于 2024-04-23 13:33:32 首次发布

本文链接：https://blog.csdn.net/m0_60813772/article/details/138040117

版权

一、layout(布局)

1、card

创建一个card

import flet as ft

def main(page):
    page.title = "Card Example"
    page.add(
        ft.Card(      #创建一个卡片的组件   content表示该组件的内容元素
            content=ft.Container(   #创建一个容器，包含了一个垂直排列的列
                content=ft.Column(  #创建一个列组件，包含两个组件ListTile和Row垂直排列
                    [
                        ft.ListTile(    
                            leading=ft.Icon(ft.icons.ALBUM),   #图标
                            title=ft.Text("The Enchanted Nightingale"),   #标题
                            subtitle=ft.Text(
                                "Music by Julie Gable. Lyrics by Sidney Stein."   #副标题
                            ),
                        ),
                        ft.Row(  #创建一个row组件，两个文本按钮水平排列
                            [ft.TextButton("Buy tickets"), ft.TextButton("Listen")], 
                            alignment=ft.MainAxisAlignment.END,   #末尾对齐
                        ),
                    ]
                ),
                width=400,   #宽度
                padding=10,  #内边距
            )
        )
    )

ft.app(target=main)

2、tabs（选项卡）

import flet as ft

def main(page: ft.Page):

    t = ft.Tabs(
        selected_index=1, #当前选定选项卡的索引       
        animation_duration=300,  #动画的持续时间（以毫秒为单位）在选项卡之间切换
        tabs=[
            ft.Tab(
                text="Tab 1",   #第一个选项卡的名字
                content=ft.Container(   #选项卡关联对应界面的内容
                    content=ft.Text("This is Tab 1"), alignment=ft.alignment.center
                ),
            ),
            ft.Tab(
                tab_content=ft.Icon(ft.icons.SEARCH),    #选项卡的那个小卡片的内容
                content=ft.Text("This is Tab 2"),
            ),
            ft.Tab(
                text="Tab 3",
                icon=ft.icons.SETTINGS,    #选项卡的图标
                content=ft.Text("This is Tab 3"),
            ),
        ],
        expand=1,
    )

    page.add(t)

ft.app(target=main)

ft.Tab()参数详解

class Tab(
    text: str | None = None,  #选项卡的显示名称
    content: Control | None = None,  #在选项卡被选中时显示在选项可下方的内容
    tab_content: Control | None = None,  #自定义选项卡替换控件text和icon
    icon: str | None = None,  #选项卡显示名称text文本左侧的图标
    ref: Ref | None = None,
    visible: bool | None = None,
    adaptive: bool | None = None
)

二、button(按钮)

1、TextButtons

ft.TextButton(
            "Button with colorful icon",  #text,按钮上显示的文本
            icon="park_rounded",     #按钮上显示的图标
            icon_color="green400",  #按钮上显示的图标二点颜色
            tooltip = "good"       #将鼠标悬停在按钮上时显示的文本
               
        )

ft.TextButton(
            width=150,
            content=ft.Row(    #content 是指自定义按钮上的控件
                [
                    ft.Icon(name=ft.icons.FAVORITE, color="pink"),
                    ft.Icon(name=ft.icons.AUDIOTRACK, color="green"),
                    ft.Icon(name=ft.icons.BEACH_ACCESS, color="blue"),
                ],
                alignment=ft.MainAxisAlignment.SPACE_AROUND,
            )

def button_clicked(e):
        b.data += 1
        t.value = f"Button clicked {b.data} time(s)"
        page.update()

    b = ft.TextButton("Button with 'click' event", on_click=button_clicked, data=0)
      #  on_click当鼠标点击这个按钮时触发button_clicked

三、charts(图表)

1、BarChart（条形图)

import flet as ft

def main(page: ft.Page):
    chart = ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=40,
                        width=40,
                        color=ft.colors.AMBER,
                        tooltip="Apple",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=100,
                        width=40,
                        color=ft.colors.BLUE,
                        tooltip="Blueberry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=30,
                        width=40,
                        color=ft.colors.RED,
                        tooltip="Cherry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=60,
                        width=40,
                        color=ft.colors.ORANGE,
                        tooltip="Orange",
                        border_radius=0,
                    ),
                ],
            ),
        ],
        border=ft.border.all(1, ft.colors.GREY_400),
        left_axis=ft.ChartAxis(   #配置左轴的外观、标题和标签
            labels_size=40, title=ft.Text("Fruit supply"), title_size=40
        ),
        bottom_axis=ft.ChartAxis(   #配置底轴的外观、标题和标签
            labels=[
                ft.ChartAxisLabel(
                    value=0, label=ft.Container(ft.Text("Apple"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=1, label=ft.Container(ft.Text("Blueberry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=2, label=ft.Container(ft.Text("Cherry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=3, label=ft.Container(ft.Text("Orange"), padding=10)
                ),
            ],
            labels_size=40,
        ),
        horizontal_grid_lines=ft.ChartGridLines(  #控制图表水平线的绘制
            color=ft.colors.GREY_300, width=1, dash_pattern=[3, 3]
        ),
        tooltip_bgcolor=ft.colors.with_opacity(0.5, ft.colors.GREY_300),  #工具提示的背景颜色
        max_y=110,  #配置 Y 轴的最大显示值
        interactive=True,
        expand=True,
    )

    page.add(chart)

ft.app(main)

class ChartAxisLabel(   #为特定值配置自定义标签
    value: OptionalNumber = None,   #要为其绘制标签的值
    label: Control | None = None  #标签名
)

class ChartAxis(  #配置图标轴
    title: Control | None = None,  
    title_size: OptionalNumber = None,
    show_labels: bool | None = None,
    labels: List[ChartAxisLabel] | None = None,
    labels_interval: OptionalNumber = None,
    labels_size: OptionalNumber = None  #标签区域的宽度或高度。
    )

class ChartGridLines(  #配置图表中水平和垂直网格线的外观。
    interval: float | None = None,  #网格线之间的间隔
    color: str | None = None,
    width: float | None = None, #网格线的宽度
    dash_pattern: List[int] | None = None #定义线条的虚线效果。该值是短划线偏移量和长度的循环列表。例如，列表将导致 5 像素长的破折号，后跟 10 像素长的空格。默认情况下，绘制一条实线。
    
)

class BarChartRod(
    rod_stack_items: List[BarChartRodStackItem] | None = None,
    from_y: OptionalNumber = None,
    to_y: OptionalNumber = None,
    width: OptionalNumber = None,
    color: str | None = None,
    gradient: Gradient | None = None,
    border_radius: BorderRadiusValue = None,
    border_side: BorderSide | None = None,
    bg_from_y: OptionalNumber = None,
    bg_to_y: OptionalNumber = None,
    bg_color: str | None = None,
    bg_gradient: Gradient | None = None,
    selected: bool | None = None,
    show_tooltip: bool | None = None,
    tooltip: str | None = None,
    tooltip_style: TextStyle | None = None,
    tooltip_align: TextAlign | None = None,
    ref: Ref | None = None,
    disabled: bool | None = None,
    visible: bool | None = None,
    data: Any = None
)