[突發專案] 攻防定番？｜vocus 自製工具復活與試用 Flet 套件開發新介面

文前碎碎唸

正如所預測的，不久前方格子個人頁面大改版後，我在 [突發專案] 強化懶懶病良藥？｜自做方格子 iOS 小工具 - Flask、爬蟲，與 Widgy 這篇中，所製作的爬蟲後台也隨之炸裂，間接地也導致手機上的小工具就此失去了作用。

世界瞬間空白（？

雖然說這種你修我改的攻防遊戲，對於外掛類工具的製作者來說，應該是家常便飯的戲碼了，但看著這些不再顯示的數據，不免還是有些失落。

雖然我可以就此打住，默默的將這個小工具從桌面移除⋯

但好勝心，終究還是戰勝了理智，該是時候再次動工啦（？

後台修整

其實說起來，讓之前那套流程失效的主要原因，就是在這次改版中拔掉了所依賴的 RSS 資料來源，而導致爬蟲中斷。

因此就要重新在頁面中，湊齊所需的七顆龍珠（？）才能夠救回整個流程。

不過，因為只是重新尋找對應元件，所以細部內容就不再多贅述。

因為今天的重點，是在新的介面改造上喔！

套件整形術

其實這次的整修紀錄，某部分也是因為近期找到 Flet 這個好用的套件。

簡單來說，Flet 是一個以 Flutter （由 Google 開發的一種跨平台邏輯架構）為基礎的介面框架。

開發者可以透過它在專案中以熟悉的 Python 形式，寫出的好看，又能整合軟硬體能力的使用者介面。

另外，這個套件還提供便利的打包工具，可藉由 Flutter 本身具備的跨平台特性，將專案匯出成可執行於四大桌面系統的獨立軟體、Web應用，甚至是針對兩大手機系統的 APP 等⋯至少理論上是如此。

總之，這次計畫就是要透過這個套件，重製一下之前以  Tkintr 編寫的版本啦！

根本重頭來

首先，有寫過 Python 的人應該都明白，要使用套件的話，當然就是要先安裝啦，這裡直接透過 Pip 指令即可。

pip install flet

不過要特別⁠注意的是，由於這是個新的套件，更新頗為頻繁，許多功能都還在陸續完善中。

因此要確定安裝下來的盡量要是最新版本，以避免缺少官方說明文件中的功能。

完成安裝後，接者就來建立我們程式的第一個視窗吧，下面這段程式是節錄自官方文件中提供的基礎視窗架構。

import flet as ft

# Define main Page
def main(page: ft.Page):
    # Create New Text Object and Set Color to Green
    t = ft.Text(value="Hello, world!", color="green")
    # Add Text Object "t" to main page
    page.controls.append(t)
    # Call Update Page
    page.update()

# Run Main Page
ft.app(target=main)

依序說明的話，就是：

1. 定義一個產生頁面的函式。
2. 在函式內新增一個顏色為綠色的文字項目。

1. 將這個文字項目新增到頁面上，然後呼叫重整頁面功能。
2. 最後以 Flet 套件的 app 函式呼叫執行這個介面。

直接執行程式後，就會看到像這樣的視窗跳出來，恭喜你完成第一個 Python Flet APP 啦！

而如果同時要塞多個元件到視窗中，像是搜尋列上的輸入框及送出鈕的話，同樣可以在視窗中新增多個控制元件後，再以 Row 結構做排列。

def main(page: ft.Page):
   # Define a TextField Object
    txtin = ft.TextField(
            label="Input",
            autofocus=True,
            expand=True,
        )

   # Define a Button Object
    sndbt = ft.ElevatedButton(
            content=ft.Container(
                content=ft.Column(
                    [
                        ft.Text(value="◈", size=50),
                    ],
                    alignment=ft.MainAxisAlignment.CENTER,
                    spacing=5,
                )
            ),
        )
   
    # Define Main Page With Row Structure
    manpg = ft.Row(
            [
                txtin,
                sndbt,
            ],
            alignment=ft.MainAxisAlignment.CENTER,
            expand=True,
    )
   
    # Add Row Structure to Main Page and Update
    page.controls.append(manpg)
    page.update()

ft.app(target=main)

執行後結果如下，看起來很簡單吧。

其實在撰寫 Flet 視窗時，只要記得它是一層一層的容器結構及元件所組成的。

而元件本身除了它所包含的子元件（如上面範例中 Row 所包含的 TextField 及 Button）外，還可以附帶定義自身特性的參數。

這樣就可以比較容易的去理解，該如何以文字方式去編排腦中所想像的理想介面。

另外，在 Flet 的官方文件 中，也有提供許多不同的元件說明及範例，甚至還有一些小型專案可以參考。

內容可以說是十分詳細，初學者也能直接依照其中程式碼來自行修改。

新介面設計

接著先來回顧一下，之前一代改版前的介面模樣吧。

現在看來，確實是十分單調且陽春，再加上新的後台有新增除最後發布時間外的其他項目，因此就藉機重新設計一下編排方式吧！

至於目前爬蟲所能抓取到的資訊，則如下列清單所示：

1. 距上次發文經過經過的時間
2. 個人頁面追蹤人數（不含沙龍）
3. 發表文章數（不含沙龍貼文）

再加上作為抓取依據的使用者 ID，總共會有四個項目需要塞進視窗中。

而經過多次修改測試後，最終決定的版本，就長得像下圖這樣。

包含的元件其實不多，主要就是將所要顯示的四項資訊，各自用 Container 包起來，再分別用 Column 及 Row 架構去排列相對位置。

如果簡單寫出程式的話，大概會像是這樣：

# Only Page Update Function
def updpg(usr,gath):
    # Info From vocus
    disp = {
        "⟳":str(gath["last_pub"]),
        "☻":str(gath["follower"]),
        "✎":str(gath["article"])
    }
    
    # Buffer List for Container Row
    ilst = []

    # For Loop to Create Container for Each Item
    for ico,val in disp.items():
        ilst.append(
            # Create Container
            ft.Container(
                content=ft.Text(value=ico+" "+val),
                alignment=ft.alignment.center,
                border_radius=ft.border_radius.all(5),
            )
        )
     
    # Define Row Structure for Container List
    infr = ft.Row(
         ilst,
         spacing=10,
         alignment=ft.MainAxisAlignment.CENTER,
     )
     
    # Create Container for User ID
    usrnm = ft.Container(
            content=ft.Text(value=usr.upper()),
            margin=5,
            padding=10,
            alignment=ft.alignment.center,
            border_radius=5,
            border=ft.border.all(3, elcol),
        )
        
    # Create Column Structure for Main Page
    mpg = ft.Column(
        # Add User ID Container and Info Row
        [
            usrnm,
            infr,
        ],
        spacing=10,
    )
    
    # Add Column Item to Page and Update
    page.add(mpg)
    page.update()

接著以這個範例做進一步修改調整後，就可以作出如下圖的結果了。

看起來是不是比之前的陽春版精緻的多了呢（自己講 XD）。

另外附註一下，上述程式碼僅包含主要結構，已刪去部分定義外觀之次要參數，因此直接執行可能不會與展示結果相同。

發布收工⋯嗎？

完工之後，各位朋友應該會想說，接下來的步驟，應該就是跟上次一樣，打包發布成執行檔，讓大家下載使用了吧？

錯，並沒有！

其實原本我也是這麼想的，但就在照著官網的匯出教學，依序安裝所需的 VSCode、Flutter、Android Studio 等開發工具，並使用內建的打包指令之後⋯

接著就是 Debug 地獄的開始，各種奇怪的錯誤接踵而至，最後輸出的執行檔也無法順利啟動，雖然不確定到底是自己系統環境，還是套件本身的問題，但嘗試數次後，依然完全無法有所進展。

最後回去仔細閱讀官網的說明文件後，終於在近期的 Roadmap 公告中看到這樣的字句。

果然，終究還是因為這個套件太年輕了，看來它的打包功能還尚未如想像中那麼完整，所以只能猜測是其中未知的錯誤所導致，畢竟也很少有其他相關資訊能夠參考。

依目前情況來看，除非自己就具備魔改套件的能力，不然也就只能等待開發團隊持續完善了。

結語

雖然這次的成品，在建立的過程中遭遇到不少的阻礙，但就成果來看，我個人認為 Flet 確實是個蠻值得等待的套件。

因為它解決了開發者過去需要切換多程式語言，如 Flutter 原生的 Dart 語言，或是各系統的底層語言，才能跨平台開發的痛點，僅用一套 Python 就能打天下。

雖然要實際匯出還是有一定但書，像是 Apple 生態系統的包裝，依然只能在 Mac 執行，以及行動裝置上運作的只能是純 Python 所撰寫的套件等。

但光憑開發者們能在不大量修改原始邏輯的情況下，快速部署至多平台上執行，並同時維持相似的介面體驗這點，就值得讓人一試了。

也希望這個套件能趕快成熟，讓跨平台開發流程更便利。

後續補充

就在撰寫及整理完今天這篇文章後，我又嘗試了官方文件中較舊的打包方式，終於成功輸出為 Windows 系統使用的 EXE 執行檔了！

而根據說明內容，舊的打包方式使用的，其實就是我在前一版時相同的 Pyinstaller 打包套件，果然有些時候，舊版的還是相對比較可靠（？）。

[最新打包工具]

• flet build {target_type}
• 可輸出為 Web、Windows、Mac、Andriod、iOS 等
• 使用 Flutter SDK，但執行時仍會有錯誤，或甚至無法進行

[舊版打包工具]

• flet pack {py_file.py}
• 僅能輸出為 Windows 或 Mac 應用
• 使用 Pyinstaller，目前測試可成功

總之，這裡就提供新的版本讓大家試玩看看啦，使用方法與前版大致相同，僅輸入改為使用者 ID 即可查詢。

_{Unzip Password-} [ 點我下載 ] _{->Mercteria@vocus}

另外，除了同樣只有 Windows 版本外，還有一個已知問題就是整體檔案不知為何爆肥，可能是因為打包時系統沒有特別篩去不相關的套件內容吧，在意者請斟酌。

《全文。終了》