Flet – DataTable – Multiplication table – 99 乘法表

這是一個 DataTable 的練習範例 – 99 乘法表，Python 版本的請參考這裡

# Flet - Multiplication table - 99 乘法表
# 2024-08-26
# https://github.com/lcc728/flet/blob/main/ex_99.py
import flet as ft

def main(page: ft.Page):
    page.title = "99 乘法表"

    dt = ft.DataTable(
        width=800,
        border=ft.border.all(2, "black"),
        border_radius=10,
        vertical_lines=ft.border.BorderSide(1, "black"),
        horizontal_lines=ft.border.BorderSide(1, "black"),
        column_spacing=5,
        heading_row_height=50,
        data_row_max_height=50,
        columns=[
             ft.DataColumn(ft.Container(content=ft.Text("*", size=20, weight=ft.FontWeight.BOLD), alignment=ft.alignment.center)),
             *[ft.DataColumn(ft.Container(content=ft.Text(str(i), size=20, weight=ft.FontWeight.BOLD), alignment=ft.alignment.center,width=72)) for i in range(1, 10)]            
            
        ],
        rows=[
            ft.DataRow(
                cells=[
                    ft.DataCell(ft.Container(ft.Text(str(i), size=20, weight=ft.FontWeight.BOLD))),
                    *[ft.DataCell(ft.Container(content=ft.Text(str(i*j), size=20, color= "blue"), alignment=ft.alignment.center)) for j in range(1, 10)]
                ]
            ) for i in range(1, 10)
        ]
    )

    page.add(dt)

ft.app(target=main)

在程式中，我們建立了一個 DataTable, 定義了它的屬性:

• width=800 ，表格寬度為 800
• border=ft.border.all(2, “black”) 表格外框四個邊框的顏色為黑色，寬度為 2
• border_radius=10 圓角半徑為 10
• vertical_lines=ft.border.BorderSide(1, “black”), 重直線顏色為黑色，寬度為 1
• horizontal_lines=ft.border.BorderSide(1, “black”), 水平線顏色為黑色，寬度為 1
• column_spacing 標題欄的間距為 5
• heading_row_height=50 標題欄的高度為 50
• data_row_max_height=50 資料列的高度為 50
• columns 定義標題欄的資料
• rows 定義資料列的資料

Columns 和 Rows 的資料，我們都使用 for 迴圈來完成

執行結果:

SourceCode: https://github.com/lcc728/flet/blob/main/ex_99.py