Flet -Stack – Magic 8 ball – George的生活點滴

Stack 元件就是影像編輯軟體中的圖層 (layer), 利用 stack 我們可以將多個元件放在同一個位置。它的屬性並不多，我們這裡就以一個神奇八號球為例，讓大家看一下 stack 的效果:

神奇 8 號球的說明 : https://www.george.tw/2020/05/01/python-dict-magic-8-ball/


# Flet - Stack - 神奇 8 號球
# 2024-09-04
# https://github.com/lcc728/flet/blob/main/ex_stack_magic_8_ball.py

import flet as ft 
import random

MagicMap = {
            1:'It is certain \n這是必然',
            2:'It is decidedly so \n肯定是的',
            3:'Without a doubt  \n不用懷疑',
            4:'Yes, definitely  \n毫無疑問',
            5:'You may rely on it  \n你能依靠它',
            6:'As I see it, yes  \n如我所見，是的',
            7:'Most likely  \n很有可能',
            8:'Outlook good  \n外表很好',
            9:'Yes  \n是的',
            10:'Signs point to yes  \n種種跡象指出「是的」',
            11:'Reply hazy try again  \n回覆攏統，再試試',
            12:'Ask again later  \n待會再問',
            13:'Better not tell you now  \n最好現在不告訴你',
            14:'Cannot predict now  \n現在無法預測',
            15:'Concentrate and ask again  \n專心再問一遍',
            16:'Don\'t count on it  \n想的美',
            17:'My reply is no  \n我的回覆是「不」',
            18:'My sources say no  \n我的來源說「不」',
            19:'Outlook not so good \n外表不太好',
            20:'Very doubtful  \n很可疑'
        }

def main(page:ft.page):
    page.title= "神奇8號球"
    page.window.width = 480
    page.window.height= 600

    def magic_ball(e): 
        magicNum = random.randint(1,20)
        result_text.value = MagicMap[magicNum]
        result_text.update()


    result_text = ft.Text(
                    "在下面輸入你的問題\n       按下送出鈕 \n   我可以幫你解答",
                    color="white",
                    size=20,
                    weight="bold",
                    opacity=0.4,
                )
    st = ft.Stack(
        [
            ft.Image(
                src="./8.png",
                width=450,
                height=450,
                fit=ft.ImageFit.CONTAIN,
            ),
            ft.Container(
                content=result_text,
                alignment=ft.alignment.center,
            ),
        ],
        width=450,
        height=450,
        )
    question_input = ft.TextField(label="問題")
    answer_button = ft.ElevatedButton("送出", on_click=magic_ball)
    page.add(st, question_input, answer_button)

ft.app(target=main)

程式一開始，我們先定義了一個 dict 叫 MagicMap.

外觀 UI 我們用了 Stack 在第一個圖層放了一張 8 號球的圖，第二個圖層放了顯示答案的文字，同時我們也定義這個 stcak 的寬與高

下方放了一個輸入問題的 TextField 和一個送出的按鈕，按下按鈕時，會呼叫 magic_ball

magic_ball 裡會產生一組從 1 到 20 的亂數，再依產生的亂數在我們先前定義的 MagicMap 中找到答案，並放入 result_text, 最後把 result_text 更新一下，使用者就能知道問題的答案了

執行結果: