flex和grid主要属性（Flet简明中文教程三）

Text控件用于输出文本数据它的主要属性是value和size，但它也有许多格式化属性来控制其外观例如，我来为大家科普一下关于flex和grid主要属性?下面希望有你要的答案，我们一起来看看吧!

flex和grid主要属性

Text 控件

Text控件用于输出文本数据。它的主要属性是value和size，但它也有许多格式化属性来控制其外观。例如

t = Text( value="This is a Text control sample", size=30, color="white", bgcolor="pink", weight="bold", italic=True, ) page.add(t)

Text style

import flet from flet import ListView, Page, Text def main(page: Page): page.title = "Text theme styles" page.scroll = "adaptive" page.add( Text("Display Large", style="displayLarge"), Text("Display Medium", style="displayMedium"), Text("Display Small", style="displaySmall"), Text("Headline Large", style="headlineLarge"), Text("Headline Medium", style="headlineMedium"), Text("Headline Small", style="headlineMedium"), Text("Title Large", style="titleLarge"), Text("Title Medium", style="titleMedium"), Text("Title Small", style="titleSmall"), Text("Label Large", style="labelLarge"), Text("Label Medium", style="labelMedium"), Text("Label Small", style="labelSmall"), Text("Body Large", style="bodylLarge"), Text("Body Medium", style="bodyMedium"), Text("Body Small", style="bodySmall"), ) flet.app(target=main)

Text 属性

value

显示的字符

size

显示像素大小，默认14

weight

默认 normal，支持 bold, w100, w200, w300, w400, w500, w600, w700, w800, w900

italic

斜体：True ，False

no_wrap

默认值：False，超过边界自动分行，True：截断

style：

字体样式：

"displayLarge",

"displayMedium",

"displaySmall",

"headlineLarge",

"headlineMedium",

"headlineSmall",

"titleLarge",

"titleMedium",

"titleSmall",

"labelLarge",

"labelMedium",

"labelSmall",

"bodyLarge",

"bodyMedium",

"bodySmall",

max-lines:

no-wrap必须为False，否则多行不生效

文本如超出给定的行数，则溢出截断

overflow：

溢出部分文字的处理，支持fade (默认), ellipsis, clip, visible

selectable：

否是可选择，True，False

color：

字体颜色，"red","blue",或者colors.RED,colors.BLUE

bgcolor：

背景色，"red","blue",或者colors.RED,colors.BLUE

Icon 控件

显示图标

import flet from flet import Icon, Page, Row, colors, icons def main(page: Page): page.add( Row( [ Icon(name=icons.FAVORITE, color=colors.PINK), Icon(name=icons.AUDIOTRACK, color=colors.GREEN_400, size=30), Icon(name=icons.BEACH_ACCESS, color=colors.BLUE, size=50), Icon(name="settings", color="#c1c1c1"), ] ) ) flet.app(target=main)

Icon 属性

name：

图标名字，如icons.XXX

color:

图标颜色

size：

图标大写，默认24

tooltip:

鼠标悬停，显示信息

Image 控件

显示图片

import flet from flet import Image, Page, Row, border_radius def main(page: Page): page.title = "Images Example" page.theme_mode = "light" page.padding = 50 page.update() img = Image( src=f"/icons/icon-512.png", width=100, height=100, fit="contain", ) images = Row(expand=1, wrap=False, scroll="always") page.add(img, images) for i in range(0, 30): images.controls.append( Image( src=f"https://picsum.photos/200/200?{i}", width=200, height=200, fit="none", repeat="noRepeat", border_radius=border_radius.all(10), ) ) page.update() flet.app(target=main)

Image 属性

src:

网络地址如https://picsum.photos/200/200

或者本地文件地址 /images/my-image.png，本地需要指定assets文件位置，如文件结构如下

/assets /images/my-image.png main.py

程序

import flet from flet import Page, Image def main(page: Page): page.add(Image(src=f"/images/my-image.png")) flet.app( target=main, assets_dir="assets" )

src_base64:

使用如下

import flet from flet import Page, Image def main(page: Page): page.add(Image(src_base64="iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAYAAADnnNMGAAAACXBIWXMAAAORAAADkQFnq8zdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm 48GgAAA6dJREFUSImllltoHFUYx3/fzOzm0lt23ZrQ1AQbtBehNpvQohgkBYVo410RwQctNE3Sh0IfiiBoIAjqi6TYrKnFy4O3oiiRavDJFi3mXomIBmOxNZe63ay52GR3Zj4f2sTEzmx3m//TYf7/c35zvgPnO6KqrESXqpq3muocAikv6m /zytj3ejik1VN21G31YA9CgJ6xC bMyQZPVCuarciPAMYC99V6Vw5pLbFSibHmlVoRVj9P3cmPBM8tSJI/M6mzabpfoAQ9fIF7WK4bd5vvuFnLGgy2vi0abg94A0AcJGvMq3hDxGRyar9r4F iLAm0yIiRk8m37tctS1WsrIhhrI30 Srmg J87OXUf3lWGS1q89dC6ltsSanxk4Aj2QBABii96300g87P/rtlrWr8l vyDMfdlXSyyEikqxsiOUAQJCBhfHdXRfCq1LSsSlcWG KBAGStvvrMkgiuv8lUc2mREukPwLUfHG uTQv8Eown7VL3XlbBxYhf1c17hbVF3MDwA9bts280TnaU1YYqPby07aeFlUlHt27wSQ4CLo F8AvoTCvHmyKF ZbEb/M77P2LgvAwmrTHAHflN3KZxVbMC2jMFNOpgPnrMSOhvvFkMezXdwV4ePbtvHtxnJAMQ0j4JtVnO eLb5oiSlt5HDbv7t1O90lpYCCCKbhfzW5kAIwUAazR0BlfII8Ow0I6uoVmI9MyAMwbMs8CExmDbk4zgu931MyO4OI4KrYflkRjOoTI uM9d1vjotwKPu9QMk/sxzuO8POiVFcdZ1M2YBVsMEAKOqLvaPIe7mACuw0z/80SMH58SMplxlfiDhVi7dw2pltRhjKBQTQdrSja2KKTfE551NHuaZ0QVPvWYQUn31/Vm2nDvgjF4grVJx6suSvrvrSJ/6cSW2Oz9mf264uNrB806xZ1k/CZ49dUKgDEtlCROX2hfHpx8pGuuo3PpqYulw8fjndOp1yhgtNKRevJ1FyR2Ola jXAjdnwTkZ6o896GdWdxDw7IxFg 0DpmXchTKSBWQnIuJn9u4j7dt 13UfHXEkXQOcuQ4kMhVtqsgUyPiQiPQfHw1NB2sRjmXKuTg1NwwBYLhtPtQX26eqTwGXPDOqvmcC4Hnwfrrad94GrVsOYTqUTkQY iTlNe/6O1miSP/x0VB/ wMIDwHn/vtV1iQC4Xv95uUEWVCoL9Y5Z gdovoyMHUFJHv88jmVy0vTuw7cZNv2YaA61Bfb7ZX5F8SaUv2xwZevAAAAAElFTkSuQmCC")) flet.app(target=main)

转化文件内容到base64

linux，wsl，macos

base64 -i <image.png> -o <image-base64.txt>

windows powershell

[convert]::ToBase64String((Get-Content -path "your_file_path" -Encoding byte))

width：

宽度

height：

高度

repeat:

绘制XY方向，支持noRepeat (默认), repeat, repeatX, repeatY

fit：