百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

Flet 界面设计1:用Column、Row和Container控件设计“计算器”

liuian 2025-02-27 15:51 10 浏览

为回应网友和粉丝咨询，本期使用 Flet 几个常用的“布局”控件，设计一个漂亮的“计算器”界面，从这个例子中，就可以掌握常用的 界面 设计技巧了。

一个真实的应用，会设计多个界面，各界面有相同的部分，这就需要界面复用了，这个下期再讲。今天主要分享 Column、Row和Container 这3个控件，用他们就足够设计一个漂亮的“计算器”了。下面，循序渐进地设计和优化界面：

循序渐进第一步：不用任何布局控件，直接用最原始的 page.add()，看看是什么样子

import flet as ft

def main(page: ft.Page):
    page.title = "我的计算器" # 定义标题
    result = ft.Text(value="0") # 计算结果存在着“文本”控件中

    # 一口气添加计算器所有按钮
    page.add(
        result,
        ft.ElevatedButton(text="AC"),
        ft.ElevatedButton(text="+/-"),
        ft.ElevatedButton(text="%"),
        ft.ElevatedButton(text="/"),
        ft.ElevatedButton(text="7"),
        ft.ElevatedButton(text="8"),
        ft.ElevatedButton(text="9"),
        ft.ElevatedButton(text="*"),
        ft.ElevatedButton(text="4"),
        ft.ElevatedButton(text="5"),
        ft.ElevatedButton(text="6"),
        ft.ElevatedButton(text="-"),
        ft.ElevatedButton(text="1"),
        ft.ElevatedButton(text="2"),
        ft.ElevatedButton(text="3"),
        ft.ElevatedButton(text="+"),
        ft.ElevatedButton(text="0"),
        ft.ElevatedButton(text="."),
        ft.ElevatedButton(text="="),
    )

ft.app(target=main)

按vscode的F5键，运行看效果如下：

直接用 page.add()，元素都在1列中，界面很丑很不合理，这显然不是我们需要的。但这也说明一个问题：就是 Flet 界面布局，默认是一个 “列”，记住这个特性。

循序渐进第二步：使用“行”布局控件Row，把以上按钮，分布在多个“行”中间。当然，控件Row 也需要 add 到根控件 page 中。Row 控件 用数组容纳子控件，务必用数组 [ ] 。

import flet as ft

def main(page: ft.Page):
    page.title = "我的计算器" # 定义标题
    result = ft.Text(value="0") # 计算结果存在着“文本”控件中

    # 一口气添加多个 Row 控件
    page.add(
        # Row 控件 用数组容纳子控件，务必用数组 [ ] 
        # 把计算结果单独放在一行中
        ft.Row(controls=[result,]), 
        # 把 AC、+/-、%、/   这4个按钮，放在单独一行中
        ft.Row(controls=[
                ft.ElevatedButton(text="AC"),
                ft.ElevatedButton(text="+/-"),
                ft.ElevatedButton(text="%"),
                ft.ElevatedButton(text="/"),
            ]
        ),
        # 如法炮制，把其他按钮也分组到各自单独的行中，如下：
        ft.Row(
            controls=[
                ft.ElevatedButton(text="7"),
                ft.ElevatedButton(text="8"),
                ft.ElevatedButton(text="9"),
                ft.ElevatedButton(text="*"),
            ]
        ),
        ft.Row(
            controls=[
                ft.ElevatedButton(text="4"),
                ft.ElevatedButton(text="5"),
                ft.ElevatedButton(text="6"),
                ft.ElevatedButton(text="-"),
            ]
        ),
        ft.Row(
            controls=[
                ft.ElevatedButton(text="1"),
                ft.ElevatedButton(text="2"),
                ft.ElevatedButton(text="3"),
                ft.ElevatedButton(text="+"),
            ]
        ),
        ft.Row(
             controls=[
                ft.ElevatedButton(text="0"),
                ft.ElevatedButton(text="."),
                ft.ElevatedButton(text="="),
            ]
        ),
    )

ft.app(target=main)

按vscode的F5键，运行看效果如下：

用 “行”控件Row，对按钮进行分行呈现后，美观多了，但还是不够漂亮。

循序渐进第三步：用 “列”控件Column 和 “容器”控件Container，进一步美化界面。

因为Flet的“容器”控件Container，每个只能装饰一个控件，为了可以整体装饰所有按钮，我们需要把上面的各个行，放在一个“列”控件Column中，然后Container就可以对这个Column进行装饰了。

这里用到了控件的几个通用属性：color 定义颜色，size定义文字大小，bgcolor定义背景色；特别用到了 expand 属性，每个控件expand 值的比例分配容器内的剩余空间，确保容器里面的子控件，自动适应大小。

import flet as ft

def main(page: ft.Page):

    page.title = "我的计算器" # 定义标题
    page.window_height = 380 # 定义窗口尺寸
    page.window_width  = 450

    # 计算结果存在着“文本”控件中。color定义颜色，size定义文本大小
    result = ft.Text(value="0",color='#ffffff',size=20) 

    page.add(
        ft.Container( 
            bgcolor="#000000", # 容器背景色为黑色
            width= 400, # 容器的宽、高
            height= 300,
            border_radius= ft.border_radius.all(20), # 设置容器为圆角
            padding=20, # 设置容器内边距
            # 容器的内容，一个 Column 控件
            content = ft.Column(controls= [ 
                # Column 控件的子元素，多个 Row
                # 把计算结果单独放在一行中
                ft.Row(controls=[result,]), 
                # 把 AC、+/-、%、/   这4个按钮，放在单独一行中
                ft.Row(controls=[
                        # 多个子控件，设置 expand 属性，每个控件expand 值的比例分配容器内的剩余空间
                        ft.ElevatedButton(text="AC", expand=1),
                        ft.ElevatedButton(text="+/-", expand=1),
                        ft.ElevatedButton(text="%", expand=1),
                        ft.ElevatedButton(text="/", expand=1),
                    ]
                ),
                # 如法炮制，把其他按钮也分组到各自单独的行中，如下：
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="7", expand=1),
                        ft.ElevatedButton(text="8", expand=1),
                        ft.ElevatedButton(text="9", expand=1),
                        ft.ElevatedButton(text="*", expand=1),
                    ]
                ),
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="4", expand=1),
                        ft.ElevatedButton(text="5", expand=1),
                        ft.ElevatedButton(text="6", expand=1),
                        ft.ElevatedButton(text="-", expand=1),
                    ]
                ),
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="1", expand=1),
                        ft.ElevatedButton(text="2", expand=1),
                        ft.ElevatedButton(text="3", expand=1),
                        ft.ElevatedButton(text="+", expand=1),
                    ]
                ),
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="0", expand=1),
                        ft.ElevatedButton(text=".", expand=1),
                        ft.ElevatedButton(text="=", expand=2), # 等号 = 的expand=2，放大一倍
                    ]
                ),
            ]
        )
    ))

ft.app(target=main)

按vscode的F5键，运行看效果如下：

循序渐进第四步：继续用控件的文本、颜色、背景色等属性，进一步美化。我们把 加减乘除等运算符，背景色设为黄色，把数字设置为暗灰色。

import flet as ft

def main(page: ft.Page):

    page.title = "我的计算器" # 定义标题
    page.window_height = 380 # 定义窗口尺寸
    page.window_width  = 450

    # 计算结果存在着“文本”控件中。color定义颜色，size定义文本大小
    result = ft.Text(value="0",color='#ffffff',size=20) 

    page.add(
        ft.Container( 
            bgcolor="#000000", # 容器背景色为黑色
            width= 400, # 容器的宽、高
            height= 300,
            border_radius= ft.border_radius.all(20), # 设置容器为圆角
            padding=20, # 设置容器内边距
            # 容器的内容，一个 Column 控件
            content = ft.Column(controls= [ 
                # Column 控件的子元素，多个 Row
                # 把计算结果单独放在一行中
                ft.Row(controls=[result,]), 
                # 把 AC、+/-、%、/ 这4个按钮，放在单独一行中
                ft.Row(controls=[
                        # 多个子控件，设置 expand 属性，每个控件expand 值的比例分配容器内的剩余空间
                        ft.ElevatedButton(text="AC", expand=1),
                        ft.ElevatedButton(text="+/-", expand=1),
                        ft.ElevatedButton(text="%", expand=1),
                        ft.ElevatedButton(text="/", expand=1, bgcolor="#ffcc00", color="#ffffff"),
                    ]
                ),
                # 如法炮制，把其他按钮也分组到各自单独的行中，如下：
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="7", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="8", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="9", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="*", expand=1, bgcolor="#ffcc00", color="#ffffff"),
                    ]
                ),
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="4", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="5", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="6", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="-", expand=1, bgcolor="#ffcc00", color="#ffffff"),
                    ]
                ),
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="1", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="2", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="3", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text="+", expand=1, bgcolor="#ffcc00", color="#ffffff"),
                    ]
                ),
                ft.Row(
                    controls=[
                        ft.ElevatedButton(text="0", expand=1, bgcolor="#999999", color="#ffffff"),
                        ft.ElevatedButton(text=".", expand=1, bgcolor="#999999", color="#ffffff"),
                        # 等号 = 的 expand=2，放大一倍
                        ft.ElevatedButton(text="=", expand=2, bgcolor="#ffcc00", color="#ffffff"), 
                    ]
                ),
            ]
        )
    ))

ft.app(target=main)

按vscode的F5键，运行看效果如下：

至此，计算器界面就算设计完毕了。还算漂亮吧？

不过有个问题：每个按钮，都在单独设置属性，而且代码重复多；那可否重用呢？当然可以。 下期我们分享如何“UI控件复用”，对“我的计算器”进行改造。

#python# #Flet #计算器# #界面设计#

相关推荐

使用Assembly打包和部署Spring Boot工程

SpringBoot项目的2种部署方式目前来说，SpringBoot项目有如下2种常见的部署方式一种是使用docker容器去部署。将SpringBoot的应用构建成一个docke...

java高级用法之:调用本地方法的利器JNA

简介JAVA是可以调用本地方法的，官方提供的调用方式叫做JNI，全称叫做javanativeinterface。要想使用JNI，我们需要在JAVA代码中定义native方法，然后通过javah命令...

Linux中如何通过Shell脚本来控制Spring Boot的Jar包启停服务?

SpringBoot项目在为开发者带来方便的同时，也带来了一个新的问题就是Jar包如何启动？在一般情况下我们都是采用了最为经典的java-jar命令来进行启动。然后通过ps命令找到对应的应用线程通...

牛逼!自己手写一个热加载（人民币手写符号一个横还是两个横）

热加载：在不停止程序运行的情况下，对类（对象）的动态替换JavaClassLoader简述Java中的类从被加载到内存中到卸载出内存为止，一共经历了七个阶段：加载、验证、准备、解析、初始化、使用、...

java 错误: 找不到或无法加载主类?看看怎么解决吧!

问题扫述：项目名称调整，由原来的com.mp.qms.report.biz调整为com.mp.busicen.mec.qms.report.biz后。项目在IDEA直接运行，但打包部署到服务器...

如何将 Spring Boot 工程打包成独立的可执行 JAR 包

导语：通过将SpringBoot项目打包成独立的可执行JAR包，可以方便地在任何支持Java环境的机器上运行项目。本文将详细介绍如何通过Maven构建插件将SpringBoot...

class 增量发包改造为 jar 包方式发布

大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...

Jar启动和IDE里启动Sprintboot的区别

想聊明白这个问题，需要补充一些前提条件，比如Fatjar、类加载机制等1、Fatjar我们在开发业务程序的时候，经常需要引用第三方的jar包，最终程序开发完成之后，通过打包程序，会把自己的代码和三...

Java 20年，以后将往哪儿走?（java还能流行多久）

在今年的Java20周年的庆祝大会中，JavaOne2015的中心议题是“Java的20年”。甲骨文公司Java平台软件开发部的副总裁GeorgesSaab的主题演讲就将关注点放在了java...

Spring Boot Jar 包秒变 Docker 镜像实现多环境部署

你是否在互联网大厂后端开发工作中，遇到过这样的困扰？当完成一个SpringBoot项目开发，准备将Jar包部署到不同环境时，却发现各个环境依赖不同、配置复杂，部署过程繁琐又容易出错，不仅耗费...

从0开始，让你的Spring Boot项目跑在Linux服务器

1搭建Linux服务器1.1购买阿里云服务器或安装虚拟机这里建议是CentOS7.X或CentOS8.X，当然其他的Linux如deepin、Ubuntu也可以，只是软件环境的安装包和安装方式...

【技术】Maven 上传第三方jar包到私服

通过nexus后台上传私服以NexusRepositoryManagerOSS2.14.5-02为例。登录nexus后台。定义Maven坐标Maven坐标有两种方式：1.自定义参数；2....

JVM参数、main方法的args参数使用

一、前言我们知道JVM参数分为自定义参数、JVM系统参数，Javamain方法的参数。今天就谈谈怎么使用吧。二、查看jvm参数定义自定义参数我们打开cmd窗口，输入java，就能看到自定义参数的格式...

Maven项目如何发布jar包到Nexus私服

Maven项目发布jar包到Nexus私服在编码过程中，有些通用的代码模块，有时候我们不想通过复制粘贴来粗暴地复用。因为这样不仅体现不了变化，也不利于统一管理。这里我们使用mavendeploy的方...

干货丨Hadoop安装步骤!详解各目录内容及作用

Hadoop是Apache基金会面向全球开源的产品之一，任何用户都可以从ApacheHadoop官网下载使用。今天，播妞将以编写时较为稳定的Hadoop2.7.4版本为例，详细讲解Hadoop的安...

一周热门
最近发表
标签列表