为回应网友和粉丝咨询，本期使用 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控件复用”，对“我的计算器”进行改造。