Flet – Text

*The English version is at the end of Traditional Chinese*

在 Flet 中，文字的呈現通常會使用 Text widget.
Text 提供了許多的屬性來定義文字的內容、樣式等等，透過以下的例子，我們可以更清楚的了解 Text 這個 widget

# Flet - Text
# 2024-08-12
# https://www.george.tw/2024/08/12/flet-text/

import flet as ft

def main(page: ft.Page):

    page.appbar = ft.AppBar(
        leading=ft.Icon(ft.icons.TAG_FACES),
        leading_width=40,
        title=ft.Text("Text Example"),
        center_title=False,
        bgcolor=ft.colors.LIGHT_BLUE_ACCENT_200,
        toolbar_height= 40,
       
        actions=[
            ft.IconButton(ft.icons.CAKE),
            ft.IconButton(ft.icons.COOKIE_OUTLINED),
            ft.IconButton(ft.icons.BAKERY_DINING_OUTLINED),
       ],     
    )
    
    #利用 page.fonts 定義字型的名稱和來源
    page.fonts = {
        "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",
        "RobotoSlab": "https://github.com/google/fonts/raw/main/apache/robotoslab/RobotoSlab%5Bwght%5D.ttf",
        "Chewy": "https://github.com/google/fonts/raw/main/apache/chewy/Chewy-Regular.ttf",
    }
    #定義四個 text 的 widget
    # Font-family  - Kanit  
    font1 = ft.Text(
        "Hello Kanit ",
        size=30,
        font_family="Kanit",
        color = ft.colors.YELLOW_500,        
        bgcolor=ft.colors.GREEN_ACCENT,

    )     
    # Font-family  - RobotoSlab  
    font2 = ft.Text(
        "Hello RobotoSlab",
        size=30,
        font_family="RobotoSlab",
        italic= True,
        color = ft.colors.GREEN_ACCENT_700
    )      
    # Font-family  - Chewy  
    font3 = ft.Text(
        "Hello Chewy ",

        style=ft.TextStyle(
            color=ft.colors.CYAN_500,             
            size=30, 
            font_family="Chewy",
            decoration=ft.TextDecoration.UNDERLINE,
            decoration_color=ft.colors.RED,
            decoration_style=ft.TextDecorationStyle.WAVY,            
        )        
    )    
    #使用系統內的字型，毋需在 page.font 中定義名稱
    font4 = ft.Text(
        "Hello World",
        size=30,
        font_family="Bradley Hand ITC",
        weight=ft.FontWeight.W_300,
        color = ft.colors.RED_500
    )    
  
    page.add(font1,font2,font3,font4)

ft.app(target=main)

說明:

page.font 字型的用法是 “在 code 中定義的名稱:字型的來源”, 來源可以是網路，也可以是 assets 下的檔案

   page.fonts = {
          "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",  #來自網路
          "myfont" : "/fonts/OpenSans-Regular.ttf"                                                    #來自 assets 目錄下的檔案
   }

若是直接存取本機的字型，則不需定義，直接代入本機的字型名稱即可。定義完成後就能在 Text 中使用

接著說明一下之前的 code

    font1 = ft.Text(
        "Hello Kanit ",
        size=30,
        font_family="Kanit",
        color = ft.colors.YELLOW_500,        
        bgcolor=ft.colors.GREEN_ACCENT,

    )  

在 Text 中，第一個參數為要顯示的文字，接下來則是屬性的設置，以上面的例子來看，我們先用
size = 30 定義了文字的大小
font_family = “Kanit” 定義使用的字型為在 page.font 中定義的 Kanit 的字型
color = ft.colors.YELLOW_500 定義顏色為 YELLOW_500
bgcolor=ft.colors.GREEN_ACCENT 定義此文字的背景色為 GREEN_ACCENT

在 font2 的屬性，用了 italic= True 將字型設為斜體字
在 font4 中使用 weight=ft.FontWeight.W_300 將文字設為粗體，粗體的寬度為 W_300

另外我們也可以把所有關於外觀的屬性設定放在 TextStyle 中, 像 font3 的設定:

    font3 = ft.Text(
        "Hello Chewy ",

        style=ft.TextStyle(
            color=ft.colors.CYAN_500,             
            size=30, 
            font_family="Chewy",
            decoration=ft.TextDecoration.UNDERLINE,
            decoration_color=ft.colors.RED,
            decoration_style=ft.TextDecorationStyle.WAVY,            
        )        
    ) 

上例中比較不同的是 TextDecoration 這一塊:
ft.TextDecoration.UNDERLINE 將字型下面設置下標線
ft.colors.RED 將 underline 的 color 設為 red
ft.TextDecorationStyle.WAVY 將 underline 的格式設為波浪線
TextDecoration 的詳細設定請參考 https://flet.dev/docs/reference/types/textdecorationstyle/
Text 的更多說明請參考 : https://flet.dev/docs/controls/text

執行的結果:

Source Code:https://github.com/lcc728/flet/blob/main/ex_text.py

---

=== English Version ===

Text widgets are typically used to render text.
Text provides many attributes to define text content, style, etc.
Through the following examples, we can understand the Text widget more clearly.

# Flet - Text
# 2024-08-12
# https://www.george.tw/2024/08/12/flet-text/

import flet as ft

def main(page: ft.Page):

    page.appbar = ft.AppBar(
        leading=ft.Icon(ft.icons.TAG_FACES),
        leading_width=40,
        title=ft.Text("Text Example"),
        center_title=False,
        bgcolor=ft.colors.LIGHT_BLUE_ACCENT_200,
        toolbar_height= 40,
       
        actions=[
            ft.IconButton(ft.icons.CAKE),
            ft.IconButton(ft.icons.COOKIE_OUTLINED),
            ft.IconButton(ft.icons.BAKERY_DINING_OUTLINED),
       ],     
    )
    
    #利用 page.fonts 定義字型的名稱和來源
    page.fonts = {
        "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",
        "RobotoSlab": "https://github.com/google/fonts/raw/main/apache/robotoslab/RobotoSlab%5Bwght%5D.ttf",
        "Chewy": "https://github.com/google/fonts/raw/main/apache/chewy/Chewy-Regular.ttf",
    }
    #定義四個 text 的 widget
    # Font-family  - Kanit  
    font1 = ft.Text(
        "Hello Kanit ",
        size=30,
        font_family="Kanit",
        color = ft.colors.YELLOW_500,        
        bgcolor=ft.colors.GREEN_ACCENT,

    )     
    # Font-family  - RobotoSlab  
    font2 = ft.Text(
        "Hello RobotoSlab",
        size=30,
        font_family="RobotoSlab",
        italic= True,
        color = ft.colors.GREEN_ACCENT_700
    )      
    # Font-family  - Chewy  
    font3 = ft.Text(
        "Hello Chewy ",

        style=ft.TextStyle(
            color=ft.colors.CYAN_500,             
            size=30, 
            font_family="Chewy",
            decoration=ft.TextDecoration.UNDERLINE,
            decoration_color=ft.colors.RED,
            decoration_style=ft.TextDecorationStyle.WAVY,            
        )        
    )    
    #使用系統內的字型，毋需在 page.font 中定義名稱
    font4 = ft.Text(
        "Hello World",
        size=30,
        font_family="Bradley Hand ITC",
        weight=ft.FontWeight.W_300,
        color = ft.colors.RED_500
    )    
  
    page.add(font1,font2,font3,font4)

ft.app(target=main)

The usage of page.font is “name defined in code: source of font”.
The source can be the Internet or a file in local file system.

page.fonts = {          
          "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",  #from Internet
          "myfont" : "/fonts/OpenSans-Regular.ttf"                                                    #from local folder
}

If you access the local font directly, no definition is needed; just replace the local font name. Once the definition is complete, you can use it in Text

we will explain the previous code

    font1 = ft.Text(
        "Hello Kanit ",
        size=30,
        font_family="Kanit",
        color = ft.colors.YELLOW_500,        
        bgcolor=ft.colors.GREEN_ACCENT,

    )  

The first parameter is the text to display, and the next step is to set the attributes.
In the example above, we first define the size of the text with size = 30, and font_family = “Kanit” defines the font used.
Kanit font defined in page.font
color = ft.colors.YELLOW_500 defines the color as YELLOW_500
bgcolor=ft.colors.GREEN_ACCENT defines the background color of this text as GREEN_ACCENT

In the attributes of font2, use italic= True to set the font to italic.
In font4, use weight=ft.FontWeight.W_300 to make the text bold. The width of bold is W_300.
In addition, we can also put all of the appearance attribute settings in TextStyle, like the font3 settings:

    font3 = ft.Text(
        "Hello Chewy ",

        style=ft.TextStyle(
            color=ft.colors.CYAN_500,             
            size=30, 
            font_family="Chewy",
            decoration=ft.TextDecoration.UNDERLINE,
            decoration_color=ft.colors.RED,
            decoration_style=ft.TextDecorationStyle.WAVY,            
        )        
    ) 

The difference in the above example is the TextDecoration:
ft.TextDecoration.UNDERLINE sets an underline under the font.
ft.Colors.RED sets the color of the underline to red
ft.TextDecorationStyle.WAVY sets the style of the underline to a wavy line.
TextDecoration: https://flet.dev/docs/reference/types/textdecorationstyle/
For more instructions on Text, please refer to : https://flet.dev/docs/controls/text

Result:

Source Code:https://github.com/lcc728/flet/blob/main/ex_text.py