【易上手快捷开发新框架技术】用Flet从零开始分步骤循序渐进编程实现购物清单助手手机应用app示例掰烂嚼碎深度讲解源代码IDE运行和调试通过截图为证-CSDN博客

本文链接：https://blog.csdn.net/jackchuanqi/article/details/142632869

传奇开心果创意编程微博文系列

序言
- 首先，明确任务，任务驱动：
- 其次，开发工具选型考虑：
- 第三，编程思路和应用结构设计：
第一步：从零开始搭建移动应用雏形框架
第二步：设置窗口大小为手机屏尺寸
第三步：添加手机应用特有的标题栏Appbar
第四步：给标题栏添加关闭按钮并且实现功能逻辑
第五步：去除窗口顶部桌面程序才有的最大化最小化关闭按钮和logo以及标题
第六步：添加页面安全区组件SafeArea
第七步：修改导航栏按钮名称和三个页面显示文字内容
第八步：关于页面添加作者文字信息
第九步：给关于页面添加图片
第十步：给关于页面内容进一步修改样式
第十一步：给appbar添加增加删除和保存按钮
第十二步：设置标题栏appbar的标题文字样式
第十三步：给主页面添加输入框和列表视图组件
第十四步：每个条目前面都有一个复选框
第十五步：实现勾选商品删除功能
第十六步：给清单页添加数据表组件DataTable
第十七步：更新页面函数居中显示页面内容
第十八步：AppBar 样式修改美化
第十九步：窗口大小和无边框设置使用新的属性和AppBar 标题布局优化
第二十步：清单页布局优化
第二十一步：设置列表视图的高度设置滚动条根据内容自动开启
第二十二步、优化设置：主页列表视图高度和清单页数据表组件高度
二十三、使用json文件永久存储数据完整示例源代码
第二十四、整体编程思路和结构
- - 1. 数据模型
  - 2. 数据的读写
  - 3. 界面设计
  - 4. 主函数 `main`
  - 5. 功能实现
  - 6. 启动应用
  - 总结

序言

首先，明确任务，任务驱动：

任务就是开发一款购物清单助手机应用app，帮助用户在手机上高效管理购物清单。

其次，开发工具选型考虑：

这款购物清单助手应用选择使用 Flet 库全平台、易上手、快捷开发新框架技术开发，目的是体验易上手快捷开发，高效率完成任务。
Flet 库基于flutter，Flet UI 是使用 Flutter 构建的，因此你的应用程序看起来很专业，并且可以交付到任何平台。Flet继承了它专业性强的特点，继承了美观漂亮的外观、优雅的设计和妖娆的动画。ui界面很漂亮，花姿招展。组件多达一百多个，而且风格多样，又很专业，天赋好。
Flet可以借力 flutter强大技术和生态支撑开发，快速解决开发中遇到的问题。

第三，编程思路和应用结构设计：

程序从 JSON 文件读取商品数据，提供输入框和列表视图，用户可添加、删除和保存选购商品信息。main 函数设置应用界面，导航栏包含“主页”和“清单”和“关于”三个选项。标题栏appbar按钮主要功能包括：添加商品、删除选中商品和保存商品清单记录。整体设计注重用户体验和可扩展性，旨在提高购物清单管理的效率。

第一步：从零开始搭建移动应用雏形框架

1.编程思路
创建三个页面，在窗口界面底部添加手机应用特有的底部导航栏组件NavigationBar，实现导航栏功能逻辑，点击导航栏按钮能切换页面。

2.示例代码

import flet as ft

def main(page: ft.Page):
    # 页面标题
    page.title = "NavigationBar Example"

    # 初始化内容
    content = ft.Text("Body!")

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.value = "Explore Page Content!"
        elif page.navigation_bar.selected_index == 1:
            content.value = "Commute Page Content!"
        else:
            content.value = "Favorites Page Content!"

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.EXPLORE, 
                selected_icon=ft.icons.EXPLORE_ROUNDED, 
                label="Explore"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.COMMUTE, 
                selected_icon=ft.icons.COMMUTE_ROUNDED, 
                label="Commute"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.BOOKMARK_BORDER, 
                selected_icon=ft.icons.BOOKMARK, 
                label="Favorites"
            ),
        ],
        on_change=navigate
    )

    # 添加内容到页面
    page.add(content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 运行应用
ft.app(target=main)

3. 解释说明
此Python示例使用了flet库来创建一个带有底部导航栏有三个页面的应用雏形框架。以下是该代码的关键部分和功能解释：

页面初始化：

设置页面标题为“NavigationBar Example”。
创建一个文本控件content作为页面的主要内容。
导航事件处理：

定义了一个navigate函数，当导航栏的选择项发生变化时被调用。
根据当前选中的导航栏索引值更新content的值，以显示不同的页面内容。
调用page.update()来刷新页面，使更改生效。

配置导航栏：

使用ft.NavigationBar创建了一个包含三个目的地的导航栏。
每个目的地都有图标、选中状态下的图标以及标签。
设置导航栏的on_change属性为navigate函数，以便在选择项改变时触发导航逻辑。

页面布局：

将content添加到页面上。
初始化导航栏的第一个选项为选中状态，并调用navigate函数来设置初始内容。

运行应用：

使用ft.app(target=main)启动Flet应用程序，并将main函数作为目标函数。
通过这个例子，用户可以通过点击底部导航栏的不同选项来切换页面的内容。

4. 运行效果，截图为证
在这里插入图片描述

第二步：设置窗口大小为手机屏尺寸

1.编程思路
移动应用是手机使用的，所以要实现窗口手机屏大小。

2.示例代码

import flet as ft

def main(page: ft.Page):
    # 页面标题
    page.title = "NavigationBar Example"
    
    # 设置窗口大小
    page.window_width = 400
    page.window_height = 600

    # 初始化内容
    content = ft.Text("Body!")

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.value = "Explore Page Content!"
        elif page.navigation_bar.selected_index == 1:
            content.value = "Commute Page Content!"
        else:
            content.value = "Favorites Page Content!"

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.EXPLORE, 
                selected_icon=ft.icons.EXPLORE_ROUNDED, 
                label="Explore"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.COMMUTE, 
                selected_icon=ft.icons.COMMUTE_ROUNDED, 
                label="Commute"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.BOOKMARK_BORDER, 
                selected_icon=ft.icons.BOOKMARK, 
                label="Favorites"
            ),
        ],
        on_change=navigate
    )

    # 添加内容到页面
    page.add(content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)

3. 解释说明

设置窗口宽度为400像素，高度为600像素。

# 设置窗口大小
 page.window_width = 400
 page.window_height = 600

代码放在页面标题设置代码下面，和它一起完成窗口初始化。

** 4. 运行效果，截图为证 **
在这里插入图片描述

第三步：添加手机应用特有的标题栏Appbar

1.编程思路

手机移动应用都有标题栏Appbar，所以接下来我们添加标题栏并且实现样式定制

2.示例代码


import flet as ft

def main(page: ft.Page):
   
    
    # 设置窗口大小
    page.window_width = 400
    page.window_height = 600

    # 初始化内容
    content = ft.Text("Body!")

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.value = "Explore Page Content!"
        elif page.navigation_bar.selected_index == 1:
            content.value = "Commute Page Content!"
        else:
            content.value = "Favorites Page Content!"

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.EXPLORE, 
                selected_icon=ft.icons.EXPLORE_ROUNDED, 
                label="Explore"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.COMMUTE, 
                selected_icon=ft.icons.COMMUTE_ROUNDED, 
                label="Commute"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.BOOKMARK_BORDER, 
                selected_icon=ft.icons.BOOKMARK, 
                label="Favorites"
            ),
        ],
        on_change=navigate
    )

    # 设置 AppBar
    page.appbar = ft.AppBar(
        title=ft.Text("App Title"),
        center_title=True,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.INFO_OUTLINED),
            ft.IconButton(ft.icons.SETTINGS),
        ],
    )

    # 添加内容到页面
    page.add(content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)

3. 解释说明

设置 AppBar

使用ft.AppBar创建了一个顶部标题栏。
设置标题栏的标题为“App Title”，并居中显示。
设置背景颜色为ft.colors.SURFACE_VARIANT。
添加两个操作按钮：信息按钮（ft.IconButton(ft.icons.INFO_OUTLINED)）和设置按钮（ft.IconButton(ft.icons.SETTINGS)）。

页面布局

将content添加到页面上。
初始化导航栏的第一个选项为选中状态，并调用navigate函数来设置初始内容。

**4. 运行效果，截图为证 **
在这里插入图片描述

第四步：给标题栏添加关闭按钮并且实现功能逻辑

1.编程思路

给标题栏添加关闭按钮并且实现功能，原因是为了去除窗口顶部桌面程序才有的最大化最小化关闭按钮和logo以及标题手机应用仍然能够依靠手机关闭应用。为了去除窗口顶部桌面程序才有的最大化最小化关闭按钮和logo以及标题做准备。

2.示例代码


import flet as ft

def main(page: ft.Page):
    # 设置窗口大小
    page.window_width = 400
    page.window_height = 600
    
    # 初始化内容
    content = ft.Text("Body!")

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.value = "Explore Page Content!"
        elif page.navigation_bar.selected_index == 1:
            content.value = "Commute Page Content!"
        else:
            content.value = "Favorites Page Content!"

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.EXPLORE, 
                selected_icon=ft.icons.EXPLORE_ROUNDED, 
                label="Explore"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.COMMUTE, 
                selected_icon=ft.icons.COMMUTE_ROUNDED, 
                label="Commute"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.BOOKMARK_BORDER, 
                selected_icon=ft.icons.BOOKMARK, 
                label="Favorites"
            ),
        ],
        on_change=navigate
    )

    # 设置 AppBar
    def exit_app(e):
        page.window_close()

    page.appbar = ft.AppBar(
        leading=ft.Text("App Title"),
        center_title=True,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.INFO_OUTLINED),
            ft.IconButton(ft.icons.SETTINGS),
            ft.IconButton(ft.icons.CLOSE, on_click=exit_app),
        ],
    )

    # 添加内容到页面
    page.add(content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)

3. 解释说明

关闭按钮及其功能实现：
在这段代码中，关闭按钮是一个IconButton，其图标为ft.icons.CLOSE，并且绑定了一个事件处理函数exit_app。当用户点击这个按钮时，会触发exit_app函数，从而关闭整个应用程序窗口。

**4. 运行效果，截图为证 **

在这里插入图片描述

第五步：去除窗口顶部桌面程序才有的最大化最小化关闭按钮和logo以及标题

1.编程思路

移动应用是手机使用的，所以要去除窗口顶部桌面程序才有的最大化最小化关闭按钮和logo以及标题。

2.示例代码


import flet as ft

def main(page: ft.Page):
    # 设置窗口大小
    page.window_width = 400
    page.window_height = 600
    
    # 设置窗口无边框
    page.window_frameless = True
    
    # 初始化内容
    content = ft.Text("Body!")

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.value = "Explore Page Content!"
        elif page.navigation_bar.selected_index == 1:
            content.value = "Commute Page Content!"
        else:
            content.value = "Favorites Page Content!"

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.EXPLORE, 
                selected_icon=ft.icons.EXPLORE_ROUNDED, 
                label="Explore"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.COMMUTE, 
                selected_icon=ft.icons.COMMUTE_ROUNDED, 
                label="Commute"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.BOOKMARK_BORDER, 
                selected_icon=ft.icons.BOOKMARK, 
                label="Favorites"
            ),
        ],
        on_change=navigate
    )

    # 设置 AppBar
    def exit_app(e):
        page.window_close()

    page.appbar = ft.AppBar(
        leading=ft.Text("App Title"),
        center_title=True,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.INFO_OUTLINED),
            ft.IconButton(ft.icons.SETTINGS),
            ft.IconButton(ft.icons.CLOSE, on_click=exit_app),
        ],
    )

    # 添加内容到页面
    page.add(content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)

3. 解释说明
关键示例代码

# 设置窗口无边框
page.window_frameless = True

去除窗口顶部桌面程序才有的最大化最小化关闭按钮和logo以及标题就是设置窗口无边框。

**4. 运行效果，截图为证 **

在这里插入图片描述

第六步：添加页面安全区组件SafeArea

1.编程思路

SafeArea组件用于确保页面内容不会被屏幕边缘（如 iPhone 的刘海屏或 Android 的圆角屏）遮挡。它会在屏幕边缘留出一定的空间，使内容更加安全地显示。

2.示例代码


import flet as ft

def main(page: ft.Page):
    # 设置窗口大小
    page.window.width = 400
    page.window.height = 600
    
    # 设置窗口无边框
    page.window.frameless = True
    
    # 初始化内容
    content = ft.Text("Body!")

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.value = "Explore Page Content!"
        elif page.navigation_bar.selected_index == 1:
            content.value = "Commute Page Content!"
        else:
            content.value = "Favorites Page Content!"

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.EXPLORE, 
                selected_icon=ft.icons.EXPLORE_ROUNDED, 
                label="Explore"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.COMMUTE, 
                selected_icon=ft.icons.COMMUTE_ROUNDED, 
                label="Commute"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.BOOKMARK_BORDER, 
                selected_icon=ft.icons.BOOKMARK, 
                label="Favorites"
            ),
        ],
        on_change=navigate
    )

    # 设置 AppBar
    def exit_app(e):
        page.window_close()

    page.appbar = ft.AppBar(
        leading=ft.Text("App Title"),
        center_title=True,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.INFO_OUTLINED),
            ft.IconButton(ft.icons.SETTINGS),
            ft.IconButton(ft.icons.CLOSE, on_click=exit_app),
        ],
    )

    # 包裹内容在 SafeArea 组件内
    safe_area_content = ft.SafeArea(content)

    # 添加内容到页面
    page.add(safe_area_content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)

3. 解释说明

SafeArea组件的作用

SafeArea组件用于确保页面内容不会被屏幕边缘（如 iPhone 的刘海屏或 Android 的圆角屏）遮挡。它会在屏幕边缘留出一定的空间，使内容更加安全地显示。

如何使用SafeArea组件

创建SafeArea组件：

safe_area_content = ft.SafeArea(content)

将内容包裹在SafeArea组件内：

page.add(safe_area_content)

这样，content控件会被包裹在一个SafeArea组件内，确保内容不会被屏幕边缘遮挡。

**4. 运行效果，截图为证 **

在这里插入图片描述

第七步：修改导航栏按钮名称和三个页面显示文字内容

1.编程思路

修改导航栏按钮名称和三个页面显示文字内容，对应任务目标。

2.示例代码


import flet as ft

def main(page: ft.Page):
    # 设置窗口大小
    page.window.width = 400
    page.window.height = 600
    
    # 设置窗口无边框
    page.window.frameless = True
    
    # 初始化内容
    content = ft.Text("Body!")

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.value = "主页内容！"
        elif page.navigation_bar.selected_index == 1:
            content.value = "清单内容！"
        else:
            content.value = "关于内容！"

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.HOME, 
                selected_icon=ft.icons.HOME_ROUNDED, 
                label="主页"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.LIST, 
                selected_icon=ft.icons.LIST_ALT, 
                label="清单"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.INFO, 
                selected_icon=ft.icons.INFO_ROUNDED, 
                label="关于"
            ),
        ],
        on_change=navigate
    )

    # 设置 AppBar
    def exit_app(e):
        page.window_close()

    page.appbar = ft.AppBar(
        leading=ft.Text("App Title"),
        center_title=True,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.INFO_OUTLINED),
            ft.IconButton(ft.icons.SETTINGS),
            ft.IconButton(ft.icons.CLOSE, on_click=exit_app),
        ],
    )

    # 包裹内容在 SafeArea 组件内
    safe_area_content = ft.SafeArea(content)

    # 添加内容到页面
    page.add(safe_area_content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)

3. 解释说明

A.更新页面内容的函数 navigate(e)

def navigate(e):
    if page.navigation_bar.selected_index == 0:
        content.value = "主页内容！"
    elif page.navigation_bar.selected_index == 1:
        content.value = "清单内容！"
    else:
        content.value = "关于内容！"

    page.update()

解释：

将原来的英文内容替换为中文内容：
“Explore Page Content!” 替换为 “主页内容！”
“Commute Page Content!” 替换为 “清单内容！”
“Favorites Page Content!” 替换为 “关于内容！”

B.设置导航栏

page.navigation_bar = ft.NavigationBar(
    destinations=[
        ft.NavigationBarDestination(
            icon=ft.icons.HOME, 
            selected_icon=ft.icons.HOME_ROUNDED, 
            label="主页"
        ),
        ft.NavigationBarDestination(
            icon=ft.icons.LIST, 
            selected_icon=ft.icons.LIST_ALT, 
            label="清单"
        ),
        ft.NavigationBarDestination(
            icon=ft.icons.INFO, 
            selected_icon=ft.icons.INFO_ROUNDED, 
            label="关于"
        ),
    ],
    on_change=navigate
)

解释：

将原来的英文标签替换为中文标签：

“Explore” 替换为 “主页”
“Commute” 替换为 “清单”
“Favorites” 替换为 “关于”
更改了图标：

ft.icons.EXPLORE 替换为 ft.icons.HOME
ft.icons.EXPLORE_ROUNDED 替换为 ft.icons.HOME_ROUNDED
ft.icons.COMMUTE 替换为 ft.icons.LIST
ft.icons.COMMUTE_ROUNDED 替换为 ft.icons.LIST_ALT
ft.icons.BOOKMARK_BORDER 替换为 ft.icons.INFO
ft.icons.BOOKMARK 替换为 ft.icons.INFO_ROUNDED

**4. 运行效果，截图为证 **
在这里插入图片描述

第八步：关于页面添加作者文字信息

1.编程思路

给页面添加内容，这一次给关于页面添加作者文字信息

2.示例代码


import flet as ft

def main(page: ft.Page):
    # 设置窗口大小
    page.window.width = 400
    page.window.height = 600
    
    # 设置窗口无边框
    page.window.frameless = True
    
    # 初始化内容
    content = ft.Column(
        [
            ft.Text("Body!", size=20),
        ],
        alignment=ft.MainAxisAlignment.CENTER,
    )

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.controls = [
                ft.Text("主页内容！", size=20)
            ]
        elif page.navigation_bar.selected_index == 1:
            content.controls = [
                ft.Text("清单内容！", size=20)
            ]
        else:
            content.controls = [
                ft.Text("关于内容！", size=20),
                ft.Divider(),
                ft.Text("购物清单助手1.0", size=16),
                ft.Text("作者：传奇开心果", size=14),
                ft.Text("微信：lxm1093220242", size=14),
            ]

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.HOME, 
                selected_icon=ft.icons.HOME_ROUNDED, 
                label="主页"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.LIST, 
                selected_icon=ft.icons.LIST_ALT, 
                label="清单"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.INFO, 
                selected_icon=ft.icons.INFO_ROUNDED, 
                label="关于"
            ),
        ],
        on_change=navigate
    )

    # 设置 AppBar
    def exit_app(e):
        page.window_close()

    page.appbar = ft.AppBar(
        leading=ft.Text("App Title"),
        center_title=True,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.INFO_OUTLINED),
            ft.IconButton(ft.icons.SETTINGS),
            ft.IconButton(ft.icons.CLOSE, on_click=exit_app),
        ],
    )

    # 包裹内容在 SafeArea 组件内
    safe_area_content = ft.SafeArea(content)

    # 添加内容到页面
    page.add(safe_area_content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)

3. 解释说明

在提供的代码中，已经实现了当用户选择“关于”页面时展示相关信息的功能。具体来说，在navigate函数内部，当page.navigation_bar.selected_index等于2时（即选择了第三个选项“关于”），content.controls列表被更新为包含多个ft.Text组件，这些组件展示了应用的版本信息以及作者的联系方式。

关于页面内容解析

“关于内容！”：标题文本。
“购物清单助手1.0”：应用名称和版本号。
“作者：传奇开心果”：作者的名字。
“微信：lxm1093220242”：作者的联系方式。

如何工作

每当用户点击底部导航栏中的一个选项时，on_change事件触发navigate函数。此函数检查当前选中的导航项索引，并根据索引值更新content.controls的内容。当索引为2时，表示用户选择了“关于”页面，此时会显示上述提到的信息。

代码结构

使用ft.Column来组织页面上的内容。
navigate函数负责根据不同导航项的选择动态更新页面内容。
应用启动时，默认显示“主页”页面的内容，并且导航栏的初始选中项为“主页”。
通过这种方式，你可以轻松地为“关于”页面添加或修改任何信息，只需更改navigate函数中相关部分即可。

**4. 运行效果，截图为证 **

在这里插入图片描述

第九步：给关于页面添加图片

1.编程思路

给关于页面添加作者logo图片，达到图文并茂效果。

2.示例代码


import flet as ft

def main(page: ft.Page):
    # 设置窗口大小
    page.window.width = 400
    page.window.height = 600
    
    # 设置窗口无边框
    page.window.frameless = True
    
    # 初始化内容
    content = ft.Column(
        [
            ft.Text("Body!", size=20),
        ],
        alignment=ft.MainAxisAlignment.CENTER,
    )

    # 更新页面内容的函数
    def navigate(e):
        if page.navigation_bar.selected_index == 0:
            content.controls = [
                ft.Text("主页内容！", size=20)
            ]
        elif page.navigation_bar.selected_index == 1:
            content.controls = [
                ft.Text("清单内容！", size=20)
            ]
        else:
            content.controls = [
                ft.Text("关于内容！", size=20),
                ft.Divider(),
                ft.Image(src="logo传奇开心果.png", width=100, height=100),
                ft.Text("购物清单助手1.0", size=16),
                ft.Text("作者：传奇开心果", size=14),
                ft.Text("微信：lxm1093220242", size=14),
            ]

        page.update()

    # 设置导航栏
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.HOME, 
                selected_icon=ft.icons.HOME_ROUNDED, 
                label="主页"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.LIST, 
                selected_icon=ft.icons.LIST_ALT, 
                label="清单"
            ),
            ft.NavigationBarDestination(
                icon=ft.icons.INFO, 
                selected_icon=ft.icons.INFO_ROUNDED, 
                label="关于"
            ),
        ],
        on_change=navigate
    )

    # 设置 AppBar
    def exit_app(e):
        page.window_close()

    page.appbar = ft.AppBar(
        leading=ft.Text("App Title"),
        center_title=True,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.INFO_OUTLINED),
            ft.IconButton(ft.icons.SETTINGS),
            ft.IconButton(ft.icons.CLOSE, on_click=exit_app),
        ],
    )

    # 包裹内容在 SafeArea 组件内
    safe_area_content = ft.SafeArea(content)

    # 添加内容到页面
    page.add(safe_area_content)

    # 初始化导航栏
    page.navigation_bar.selected_index = 0
    navigate(None)

# 启动应用
ft.app(target=main)