不懂前端也能写 App?Flet (Flutter for Python) 开发跨平台应用实战 (Android/iOS/Web)

不懂前端也能写 App?Flet (Flutter for Python) 开发跨平台应用实战 (Android/iOS/Web)

标签: #Python #Flet #Flutter #跨平台开发 #GUI #移动端开发


🚀 前言:为什么是 Flet?

如果你是 Python 党,你一定会有这样的痛点:
脚本写得很溜,但老板非要个“可视化界面”;或者你想把数据分析结果做成一个手机 App 给客户看。
传统的 Python GUI 库(Tkinter, Qt)在移动端几乎是废的。

Flet 的核心逻辑是:

你负责写 Python(处理数据、逻辑),Flet 负责在后台调用 Flutter 引擎画出漂亮的界面。你不需要懂 CSS 布局,也不需要配置复杂的安卓环境(开发阶段)。


🏗️ 一、 架构原理:Python 怎么指挥 Flutter?

Flet 采用的是 Server-Driven UI (服务端驱动 UI) 模式。
你的 Python 代码其实是一个“服务端”,而显示界面的窗口其实是一个“Flutter 客户端”。

工作流示意图 (Mermaid):

UI 端 (Flutter 引擎)

Python 端 (你的代码)

page.add(Text)

WebSocket / HTTP

用户点击事件

更新指令

业务逻辑

Flet Server

Flet Client (App/Web)

这种架构的好处是:极快。Python 修改属性,界面毫秒级刷新,开发体验极佳。


💻 二、 极速上手:写一个计数器 App

安装 Flet:

pip install flet 

新建 main.py。你会发现,它的写法非常像 React,但是是 Python 版本的。

import flet as ft defmain(page: ft.Page):# 1. 设置页面基础属性 page.title ="Flet 计数器" page.vertical_alignment = ft.MainAxisAlignment.CENTER page.theme_mode = ft.ThemeMode.LIGHT # 支持深色/浅色模式切换# 2. 定义状态变量 txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)# 3. 定义交互逻辑defminus_click(e): txt_number.value =str(int(txt_number.value)-1) page.update()# 类似 React 的 setState,通知界面刷新defplus_click(e): txt_number.value =str(int(txt_number.value)+1) page.update()# 4. 组装 UI (搭积木) page.add( ft.Row([ ft.IconButton(ft.icons.REMOVE, on_click=minus_click), txt_number, ft.IconButton(ft.icons.ADD, on_click=plus_click),], alignment=ft.MainAxisAlignment.CENTER,))# 运行应用 (默认以桌面应用方式打开) ft.app(target=main)

运行效果:
你会看到一个原生的 Windows/Mac 窗口,界面是标准的 Material Design 风格,丝滑流畅。


📱 三、 进阶:如何变成手机 App?

Flet 不仅仅是跑在电脑上的。
要在手机上预览,只需要改一行代码:

# view=ft.AppView.WEB_BROWSER 会在浏览器打开# 局域网预览模式: ft.app(target=main, port=8550, view=ft.AppView.WEB_BROWSER)

真机调试步骤:

  1. 确保手机和电脑在同一 WiFi 下。
  2. 电脑运行代码。
  3. 手机浏览器访问 http://电脑IP:8550
  4. 神奇的事情发生了:你的 Python 代码变成了一个 PWA 网页应用,操作手感和原生 App 几乎没区别!
打包 APK (硬核环节)

如果你真的想把这个生成 .apk 文件安装到手机上,Flet 提供了 flet build 命令(基于 Flutter SDK)。

  1. 安装 Flutter SDK 和 Android SDK(这是唯一复杂的环境配置)。
  2. 运行打包命令:
flet build apk 
  1. 喝杯咖啡,Python 代码就被编译成了可以在安卓手机安装的安装包。

📊 四、 适用场景与避坑

Flet 虽然好用,但不是万能的。

维度适合用 Flet不适合用 Flet
应用类型内部工具、管理后台、数据看板、简单的 CRUD 应用3D 游戏、极其复杂的自定义动效、高性能音视频编辑
开发效率⭐⭐⭐⭐⭐ (极快)⭐⭐
包体积较大 (包含 Python解释器+Flutter引擎)小 (原生开发)
生态Python 生态 (Pandas, Requests 随便用)需要深度调用手机底层硬件 (蓝牙/NFC 支持尚不完善)

🎯 总结

Flet 是 Python 工程师拓展边界的利器。
它不需要你精通前端,只要你会写 Python 函数,就能构建出颜值得体的跨平台应用。

对于 企业内部工具个人副业项目 来说,Flet 是目前性价比最高的技术选型之一。

Next Step:
把上面的计数器代码复制下来,尝试加一个 ft.Dropdown 下拉框,做一个简单的“汇率转换器”。当你第一次在手机上点开自己写的 App 时,你会爱上这种感觉的。

Read more

Web 可访问性最佳实践:构建人人可用的前端界面

Web 可访问性最佳实践:构建人人可用的前端界面 代码如诗,包容如画。让我们用可访问性的理念,构建出人人都能使用的前端界面。 什么是 Web 可访问性? Web 可访问性(Web Accessibility)是指网站、工具和技术能够被所有人使用,包括那些有 disabilities 的人。这意味着无论用户的能力如何,他们都应该能够感知、理解、导航和与 Web 内容交互。 为什么 Web 可访问性很重要? 1. 法律要求:许多国家和地区都有法律法规要求网站必须具有可访问性。 2. 扩大用户群体:约 15% 的世界人口生活有某种形式的 disability,可访问性可以让更多人使用你的网站。 3. SEO 优化:搜索引擎爬虫依赖于可访问性良好的网站结构。 4. 更好的用户体验:可访问性改进通常会使所有用户受益,而不仅仅是那些有 disabilities 的用户。 5. 社会责任:

【测试理论与实践】(十)Web 项目自动化测试实战:从 0 到 1 搭建博客系统 UI 自动化框架

【测试理论与实践】(十)Web 项目自动化测试实战:从 0 到 1 搭建博客系统 UI 自动化框架

目录 前言 一、项目背景与测试规划:先明确 "测什么" 和 "怎么测" 1.1 项目介绍 1.2 测试目标 1.3 测试范围与用例设计 编辑 二、环境搭建:3 步搞定自动化测试前置准备 2.1 安装核心依赖包 2.2 浏览器配置 2.3 项目目录结构设计 三、核心模块开发:封装公共工具,提高代码复用性 3.1 驱动管理与截图工具封装(common/Utils.py) 3.2 代码说明与优化点 四、测试用例开发:

破除各种限制,手把手教你本地部署大语言模型,打造私人AI

破除各种限制,手把手教你本地部署大语言模型,打造私人AI

随着 AI 应用的快速普及,它已经悄然融入了人们的日常生活。相信大家对 ChatGPT、豆包、元宝这些 AI 应用已经不再陌生,并且几乎离不开它们了。但是,随着这些商用 AI 的广泛应用,一些问题也随之而来。由于监管日益严格,商用大模型的“输出限制”越来越多,动不动就触发拦截;另一方面,很多人也担心自己的敏感信息(比如商业机密、个人敏感信息,或者一些不便于给别人知道的对话)被大厂收集导致隐私泄露。这就导致很多时候,虽然 AI 很智能,但在某些特定场景下却显得非常“鸡肋”。那么,在自己的电脑上本地部署一个完全受自己控制的大语言模型的需求对个人用户就变得非常迫切。本文就将一步一步教你在本地电脑上部署一个专属于你自己的AI。 第一步:认识并安装 Ollama 简单来说,Ollama 是一个开源的本地大模型运行框架。在过去,想要在自己的电脑上运行一个几十亿参数的大语言模型(LLM),你需要懂 Python、配置复杂的代码环境、处理各种让人头疼的报错。而