Python使用Flet打造跨平台文本编辑器

2025-09-11 15:51:08 作者：站大爷IP

在Python生态中,构建图形界面应用常面临两难选择,Flet框架的出现打破了这一僵局,本文将通过实战案例,手把手教你用Flet开发一个支持自动保存、多端适配的文本编辑器,希望对大家有所帮助

在Python生态中，构建图形界面应用常面临两难选择：传统GUI库（如Tkinter）开发效率低，跨平台框架（如Kivy）学习曲线陡峭。Flet框架的出现打破了这一僵局——它基于Flutter引擎，却用Python作为开发语言，让开发者既能享受Flutter的现代化UI能力，又无需掌握Dart语言。本文将通过实战案例，手把手教你用Flet开发一个支持自动保存、多端适配的文本编辑器，代码量不足200行，却能实现专业级功能。

一、环境搭建：3分钟启动开发

1.1 安装Flet

Flet的安装过程堪称"傻瓜式"操作。在终端输入以下命令即可完成核心库安装：

pip install flet

对于需要打包应用的开发者，建议额外安装Flutter SDK以获得完整功能支持。不过Flet已内置了Flutter运行时，即使不安装SDK也能直接开发调试。

1.2 验证环境

创建测试文件hello_flet.py，输入以下代码：

import flet as ft
 
def main(page: ft.Page):
    page.title = "验证环境"
    page.add(ft.Text("Flet环境配置成功！"))
 
ft.app(target=main)

运行后若弹出窗口显示文字，说明环境配置正确。这个简单示例展示了Flet的核心开发模式：通过ft.app()启动应用，在main()函数中定义页面布局和交互逻辑。

二、核心组件开发：构建编辑器骨架

2.1 创建多行文本输入框

文本编辑器的核心是TextField组件。以下代码创建了一个支持自动换行、滚动和自定义光标的输入区域：

text_field = ft.TextField(
    multiline=True,       # 启用多行输入
    expands=True,         # 填充可用空间
    wrap=True,            # 自动换行
    scrollable=True,      # 启用滚动条
    cursor_color="blue",  # 光标颜色
    min_lines=20,         # 最小显示行数
    content_padding=ft.padding.all(10)  # 内边距
)

这些参数组合实现了类似专业编辑器的输入体验。特别要注意expands=True和min_lines的配合使用，前者确保组件随窗口缩放，后者设定最小高度防止内容过少时界面塌陷。

2.2 实现数据持久化

传统编辑器需要手动点击保存，我们通过实时监听实现自动保存功能。核心逻辑封装在TextEditor类中：

import os
 
FILE_PATH = "editor_content.txt"
 
class TextEditor(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.text_field = None
 
    def save_text(self, text):
        with open(FILE_PATH, "w", encoding="utf-8") as f:
            f.write(text)
 
    def load_text(self):
        if os.path.exists(FILE_PATH):
            with open(FILE_PATH, "r", encoding="utf-8") as f:
                return f.read()
        return "欢迎使用智能编辑器\n内容自动保存..."
 
    def on_text_change(self, e):
        self.save_text(self.text_field.value)
 
    def build(self):
        initial_text = self.load_text()
        self.text_field = ft.TextField(
            # ...（同上参数配置）
            value=initial_text,
            on_change=self.on_text_change
        )
        return self.text_field

这个实现包含三个关键设计：

自动加载：实例化时读取文件内容
实时保存：通过on_change事件触发保存逻辑
异常处理：文件不存在时显示欢迎提示

三、界面美化：打造专业级外观

3.1 主题色定制

Flet支持Material Design 3色彩系统，通过page.update()方法动态切换主题：

def dark_mode(e):
    page.theme_mode = ft.ThemeMode.DARK
    page.update()
 
def light_mode(e):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.update()
 
# 在页面工具栏添加切换按钮
page.add(
    ft.Row(
        [
            ft.IconButton(ft.icons.LIGHT_MODE, on_click=light_mode),
            ft.IconButton(ft.icons.DARK_MODE, on_click=dark_mode)
        ],
        alignment=ft.MainAxisAlignment.END
    )
)

3.2 响应式布局

采用Row+Column组合实现自适应布局，确保在不同屏幕尺寸下都能完美显示：

def main(page: ft.Page):
    page.title = "智能编辑器"
    page.vertical_alignment = ft.MainAxisAlignment.START
    page.padding = 20
 
    # 创建工具栏
    toolbar = ft.Row(
        controls=[
            ft.IconButton(ft.icons.SAVE, on_click=save_action),
            ft.IconButton(ft.icons.FILE_OPEN, on_click=open_action)
        ],
        alignment=ft.MainAxisAlignment.SPACE_BETWEEN
    )
 
    # 主编辑区
    editor = TextEditor()
 
    # 状态栏
    status_bar = ft.Text("就绪", size=12, color=ft.colors.GREY)
 
    # 组合所有组件
    page.add(
        toolbar,
        ft.Divider(height=1, color=ft.colors.WITH_50),
        editor,
        ft.Divider(height=1, color=ft.colors.WITH_50),
        status_bar
    )

关键设计点：

使用Divider组件实现视觉分隔
通过padding和spacing参数控制间距
状态栏显示当前操作状态

四、功能扩展：添加专业级特性

4.1 文件操作对话框

集成系统原生文件选择器，提升用户体验：

async def open_action(e):
    file_path = await ft.file_picker.open_file(
        title="打开文件",
        file_type=ft.FileFilter(["txt", "md", "py"])
    )
    if file_path:
        with open(file_path, "r", encoding="utf-8") as f:
            editor.text_field.value = f.read()
        status_bar.value = f"已打开: {os.path.basename(file_path)}"
        page.update()
 
async def save_action(e):
    file_path = await ft.file_picker.save_file(
        title="保存文件",
        file_type=ft.FileFilter(["txt"])
    )
    if file_path:
        with open(file_path, "w", encoding="utf-8") as f:
            f.write.text_field.value)
        status_bar.value = f"已保存: {os.path.basename(file_path)}"
        page.update()

4.2 快捷键支持

通过监听键盘事件实现常用快捷键：

def main(page: ft.Page):
    # ...（前文代码）
    
    def key_handler(e):
        if e.key == "s" and e.ctrl:
            save_action(None)
        elif e.key == "o" and e.ctrl:
            open_action(None)
 
    page.on_keyboard_event = key_handler

4.3 语法高亮（进阶）

借助highlight.js实现基础语法高亮，需先创建Web视图组件：

def create_web_editor():
    html_content = """
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css" rel="external nofollow" >
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
        <script>hljs.highlightAll();</script>
    </head>
    <body>
        <pre><code class="language-python">{}</code></pre>
    </body>
    </html>

 """.format(editor.text_field.value.replace("\n", "\n"))
 
    return ft.WebView(
        content=ft.WebContent(html=html_content),
        width=page.width - 40,
        height=page.height - 200
    )

五、打包部署：一键生成多平台应用

5.1 桌面应用打包

使用Flet内置命令生成可执行文件：

# Windows平台
flet pack main.py --platform windows --name TextEditor --icon editor.ico
 
# macOS平台
flet pack main.py --platform macos --name TextEditor

5.2 Web应用部署

通过flet build web命令生成静态文件，上传至任何Web服务器即可运行：

flet build web
# 生成的文件位于dist目录

5.3 移动端适配

对于Android开发，需先安装Flutter SDK并配置Android Studio：

flutter doctor
flet pack main.py --platform android

六、性能优化与调试技巧

6.1 减少不必要的更新

使用page.update()时指定需要更新的组件：

# 低效方式（更新整个页面）
page.update()
 
# 高效方式（仅更新状态栏）
status_bar.update()

6.2 异步文件操作

对于大文件读写，使用asyncio避免界面卡顿：

import asyncio
 
async def async_save(file_path, content):
    loop = asyncio.get_event_loop()
    await loop.run_in_executor(None, lambda: 
        with open(file_path, "w", encoding="utf-8") as f:
            f.write(content)
    )

6.3 内存管理

对于长时间运行的应用，定期清理未使用的资源：

def cleanup():
    import gc
    gc.collect()
    # 释放WebView等重型组件资源
    if hasattr(page, "web_view"):
        page.web_view = None
        page.update()

七、完整代码示例

import flet as ft
import os
from pathlib import Path
 
FILE_PATH = str(Path.home() / "Documents" / "flet_editor_content.txt")
 
class TextEditor(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.text_field = None
 
    def save_text(self, text):
        try:
            with open(FILE_PATH, "w", encoding="utf-8") as f:
                f.write(text)
        except Exception as e:
            print(f"保存失败: {e}")
 
    def load_text(self):
        try:
            if os.path.exists(FILE_PATH):
                with open(FILE_PATH, "r", encoding="utf-8") as f:
                    return f.read()
            return "欢迎使用Flet智能编辑器\n内容自动保存至文档文件夹..."
        except Exception as e:
            return f"加载失败: {e}"
 
    def on_text_change(self, e):
        self.save_text(self.text_field.value)
 
    def build(self):
        initial_text = self.load_text()
        self.text_field = ft.TextField(
            multiline=True,
            expands=True,
            wrap=True,
            scrollable=True,
            cursor_color="blue",
            min_lines=20,
            content_padding=ft.padding.all(10),
            value=initial_text,
            on_change=self.on_text_change
        )
        return self.text_field
 
async def open_action(e):
    file_path = await ft.file_picker.open_file(
        title="打开文件",
        file_type=[ft.FileFilter(["txt", "md", "py"])]
    )
    if file_path:
        try:
            with open(file_path, "r", encoding="utf-8") as f:
                editor.text_field.value = f.read()
            status_bar.value = f"已打开: {os.path.basename(file_path)}"
            page.update()
        except Exception as e:
            status_bar.value = f"打开失败: {e}"
            page.update()
 
async def save_action(e):
    file_path = await ft.file_picker.save_file(
        title="保存文件",
        file_type=[ft.FileFilter(["txt"])]
    )
    if file_path:
        try:
            with open(file_path, "w", encoding="utf-8") as f:
                f.write(editor.text_field.value)
            status_bar.value = f"已保存: {os.path.basename(file_path)}"
            page.update()
        except Exception as e:
            status_bar.value = f"保存失败: {e}"
            page.update()
 
def key_handler(e):
    if e.key == "s" and e.ctrl:
        save_action(None)
    elif e.key == "o" and e.ctrl:
        open_action(None)
 
def main(page: ft.Page):
    global editor, status_bar
    page.title = "Flet智能编辑器"
    page.vertical_alignment = ft.MainAxisAlignment.START
    page.padding = 20
    page.theme_mode = ft.ThemeMode.LIGHT
    page.on_keyboard_event = key_handler
 
    # 工具栏
    toolbar = ft.Row(
        controls=[
            ft.IconButton(ft.icons.SAVE, on_click=save_action),
            ft.IconButton(ft.icons.FILE_OPEN, on_click=open_action),
            ft.IconButton(ft.icons.LIGHT_MODE, on_click=lambda e: setattr(page, "theme_mode", ft.ThemeMode.LIGHT) or page.update()),
            ft.IconButton(ft.icons.DARK_MODE, on_click=lambda e: setattr(page, "theme_mode", ft.ThemeMode.DARK) or page.update())
        ],
        alignment=ft.MainAxisAlignment.SPACE_BETWEEN
    )
 
    # 编辑器
    editor = TextEditor()
 
    # 状态栏
    status_bar = ft.Text("就绪", size=12, color=ft.colors.GREY)
 
    # 组合布局
    page.add(
        toolbar,
        ft.Divider(height=1, color=ft.colors.WITH_50),
        editor,
        ft.Divider(height=1, color=ft.colors.WITH_50),
        status_bar
    )
 
editor = None
status_bar = None
page = None
 
ft.app(target=main, assets_dir="assets")

八、总结与展望

这个200行代码的编辑器项目展示了Flet的强大能力：

开发效率：相比Tkinter/PyQt，代码量减少60%
跨平台：一次编写，桌面/Web/移动端通用
现代化UI：内置Material Design 3组件

未来可扩展方向：

添加Markdown实时预览
实现协作编辑功能
集成AI代码补全
开发插件系统

Flet正在颠覆Python GUI开发范式，它让开发者能像开发Web应用一样轻松创建跨平台桌面程序。随着Flutter 3.0的发布，Flet的性能和功能将持续进化，值得每个Python开发者关注。

到此这篇关于Python使用Flet打造跨平台文本编辑器的文章就介绍到这了,更多相关Python文本编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！