Flet – QR Code Generator – George的生活點滴

程式提供一個文字方框，利用 Python QRCode 的 library 來產生相對應的 QR Code，

我們必須先用 pip 安裝 qrcode : pip install qrcode

整個設計的流程是:

利用 flet 產生相關的介面:

一個 textfield 讓 user 輸入欲產生的 QRCode
一個 button 送出用者的文字，定義 on_click 的動作
一個 image 顯示產生出來的 QRCode
一個 text 顯示 user 輸入的文字 ( 選項)

當 user 輸入完後，點擊 button 後，呼叫 generate_qrcode 產生相對映的 QRCode，將其放到 image 的元件，透過 page.update() 的方法，更新頁面，顯示新的圖片


# Flet - QR Code Generator
# 2024-08-16
# https://www.george.tw/2024/08/17/flet-qrcode_generator/

import flet as ft
import qrcode
import os
import time

def main(page: ft.Page):
    page.theme = ft.Theme(
        color_scheme=ft.ColorScheme(
            primary=ft.colors.GREEN_400,
          
        )
    )    
    textField = ft.TextField(                      #1
        label="請輸入文字", 
        border=ft.InputBorder.UNDERLINE, 
    )
    image = ft.Image(src="123.png")                #3
    textOutput = ft.Text(" ", color="blue")        #4

    def generate_qrcode(e):
        text = textField.value
        img = qrcode.make(text)        
        current_dir = os.path.dirname(os.path.abspath(__file__))
        timestamp = int(time.time())  
        qr_filename = f"qrcode_{timestamp}.png"
        qr_path = os.path.join(current_dir, qr_filename)        
        img.save(qr_path)     
        image.src = qr_path
        textOutput.value = f"此圖的文字容為: {textField.value}"
        page.update()
        #time.sleep(0.1)
        #os.remove(qr_path )

    button = ft.ElevatedButton(text="產生 QR Code", icon=ft.icons.QR_CODE_2_ROUNDED, on_click=generate_qrcode)   #2
    page.add( textField, button, image , textOutput)

ft.app(target=main)

程式在 #3 的部份，我放了一張不存在的圖，讓這個部份在第一次顯示時留白，# 1 2 4 的部份就不多說了

除了本來的 Flet library 外，我們還 import 了 3 個 library:

qrcode 產生 QRCode 的 library
os 取得檔案路徑
time 產生時間戳記，在產生的圖片後加上時間戳記避免檔名重複

qrcode 的產生方法


img = qrcode.make('Your text here')   #產生一張內容為 Your text here 的 QR Code 圖片，並放入 img 變數中
img.save("filename.png")              #儲存檔案，檔名為 filename.png

為了讓這張圖和程式放在同一目錄，我們先利用了 os.path.abspath(file) 取得檔案的絕對路徑後，再利用 os.path.dirname() 獲得目錄名稱

確保每次 Flet 都正確更新 QR code 的圖像，我們在檔案名稱後方加入了以 time.time() 產生的時間戳記。這項看似簡單的步驟，實際上解決了 Flet cache 機制可能導致舊圖像無法更新的問題。透過不斷變化的檔案名稱，強制 Flet 每次都重新載入最新的 QR code 圖像。

產生完圖檔後即可使用 image.src 更改 image 的來源，在圖片下方，我們也加上了一個 text 元件，主要用來顯示 QR Code 的文字內容，在更新圖片的同時，我們也更新了這個 text 的值 :
textOutput.value = f”此圖的文字容為: {textField.value}”
最後利用 page.update() 更新頁面就能看到結果。

更新後有2行註解的程式碼，目的在刪除此次產生的 QR Code，如果覺得目錄裡會放太多圖的話，可把這 2 行加上。
#time.sleep(0.1)
#os.remove(qr_path )

如果想要把這程式 build 成 app，requirements.txt 要記得加上 qrcode