当前位置:首页 > 技术分析 > 正文内容

使用vscode,编写第一个Flet程序

ruisui883个月前 (03-12)技术分析16

Flet 是一个框架,允许使用 Python 构建网页、桌面和移动应用程序,而无需具备前端开发经验。

下面使用vscode,编写第一个flet程序吧。

第一步,安装flet框架

pip install flet


第二步,在vscode中新建文档 demo1.py,并敲入以下代码

import flet as ft

def main(page: ft.Page):    
        page.title = "Flet 计数器示例"    
        page.vertical_alignment = ft.MainAxisAlignment.CENTER    
        txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)    

def minus_click(e):        
        txt_number.value = str(int(txt_number.value) - 1)        
        page.update()    

def plus_click(e):        
        txt_number.value = str(int(txt_number.value) + 1)        
        page.update()    
        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(main)


第三步,运行程序

要运行该应用程序,按vscode的F5健即可啦。该程序实现了计数器功能,效果见图,代码解读给我留言。



这段代码,通过不同的编译,就可以编译为在Windows,Linux,iOS,Android等平台运营的程序了,编译后面再分享。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2733.html

标签: vscode怎么用
分享给朋友:

“使用vscode,编写第一个Flet程序” 的相关文章

vue项目-父页面数据变化使子页面更新的几种情况

当操作页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望组件中的数据要和最新数据一致,就需要重新更新渲染。以下是针对几种不同情况下方式:一.子页面调用接口后重新渲染1.使用ref方式父组件中用ref=“xxx” 来声明子组件,然后通过在父组件值改变的地方来调用子组件中的方法this.$...

带你五步学会Vue SSR

作者:liuxuan 前端名狮转发链接:https://mp.weixin.qq.com/s/6K6GUHcLwLG4mzfaYtVMBQ前言SSR大家肯定都不陌生,通过服务端渲染,可以优化SEO抓取,提升首页加载速度等,我在学习SSR的时候,看过很多文章,有些对我有很大的启发作用,有些就只是照搬官...

编码 10000 个小时后,开发者悟了:“不要急于发布!”

【CSDN 编者按】在软件开发的道路上,时间是最好的老师。根据“一万小时定律”,要成为某个领域的专家,通常需要大约一万小时的刻意练习。本文作者身为一名程序员,也经历了一万小时的编程,最终悟出了一个道理:慢即是快,重视架构设计和代码质量,确保每一行代码都经得起时间的考验。作者 | Sotiris Ko...

Solid State Logic 发布低保真数字失真插件 Digicrush

Solid State Logic 宣布推出低保真数字失真插件 Digicrush ,他们最新的创意工具具有经典数字失真的粗糙、低保真特性,完美模拟早期数字音频的衰减和伪影。Digicrush 充满怀旧气息,深受经典数字采样器和效果器的影响,具有内置抖动、可调比特深度和采样率降低功能,是为音轨添加复...

多项修正 尼康D4s发布最新1.10版固件

尼康公司与2014年8月27日发布了D4s的最新固件,固件版本号为C:1.10。这次固件升级,主要解决了一些BUG,并且对拍摄菜单与相机操作做了一定调整。下面是本次新固件的具体信息:尼康发布D4s最新C固件 1.10版对C固件升级到1.10版所作的修改:当选定运动VR模式并换上 AF-S 尼克尔 4...

Vue中的路由配置常用属性

router:路由页面跳转的核心库;引入路由:import VueRouter from 'vue-router'; 注册路由:const router = new VueRouter({ })mode:模式路由有hash history两种模式:hash模式URL中包含#,#后边是...