Flet – TextField

TextField 元件主要用於讓使用者在程式中輸入文字，像是登入表單中的帳號和密碼，又或是搜尋資料及各式表單，均需使用到這個 widget ，算是非常常用的元件。透過底下的範例，我們可以更了解這個元件:

# Flet - TextField
# 2024-08-14
# https://github.com/lcc728/flet/blob/main/ex_textfield.py

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.TextField(
            label="帳號:", 
            hint_text="你的帳號", 
            icon=ft.icons.PERSON, 
            color="blue", 
            border = "outline", 
            border_color="green",
            bgcolor="amber",
            text_size= 30,
            text_align="center",
            border_radius= ft.border_radius.all(10),
            border_width= 5,
            cursor_color= "red",
            focused_bgcolor="green",
            focused_border_color="amber", 
            keyboard_type = ft.KeyboardType.NUMBER,
            ),
        ft.TextField(
            label="密碼:",
            password=True,
            can_reveal_password=True,
            hint_text="請輸入密碼",
            helper_text="忘記密碼請聯絡管理員",
            color="red",
            icon=ft.icons.KEY,
            max_length=15,

        ),
        ft.TextField(
            label="備註:",
            multiline=True,
            min_lines=5,
            max_lines=10,
            icon=ft.icons.NOTE,
            border=ft.InputBorder.UNDERLINE
        ),    
    )
ft.app(target=main)

在 TextField 的元件中，常用的屬性有：

• label： 文字方框左上方的標籤，用來說明這個方框的用途。
• hint_text： 當文字方框為空時，顯示的提示文字。
• color：方框內文字的顏色
• icon ：可設定方框左側的圖示
• bgcolor： 方框本身的背景色
• text_size：文字的大小
• text_align：文字的對齊方式
• border： 方框的框線類型
• border_color：方框的框線顏色
• border_radius： 框線四個角圓角的半徑
• border_width： 框線的粗度
• cursor_color： 當 foucs 在此方框時所呈現的顏色
• focused_border_color： 當 foucs 在此方框時框線的顏色
• keyboard_type： 在手機上我們還能指定鍵盤樣式，這裡使用 number，表示鍵盤只有數字鍵
• password： 設定文字方框為密碼格式
• can_reveal_password： 是否允許 user 看輸入的文字
• helper_text： 在方框下方的文字
• max_length： 允許輸入的最多字數
• multiline： 是否開啟多行文字方框
• min_lines： 開啟多行後，最少呈現幾行的文字方框
• max_lines： 同上，最多呈現的行數

還有更多的屬性，請參考官網

執行結果:

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