Flet – Icon

George

4 個月前

*The English version is at the end of Traditional Chinese*

Icon 中程式中扮演著重要的角色，能夠吸引使用者的目光，也能更簡單明白的傳遞資訊，因此在 APP 中很常見到各式各樣的 Icon，像是各類型的 Bar、選單、按鈕及通知等等，因此學會如何使用 Icon 可以增加 UI 的美觀及使用者的體驗。

Flet 中 Icon 的使用方式如下例:


# Flet Icon
# 2024-08-13
# https://github.com/lcc728/flet/blob/main/ex_icon.py

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Icon(name=ft.icons.FAVORITE, color="red", size=50),
        ft.Icon(name=ft.icons.FAVORITE, color="red", size=50, opacity=0.5336),
        ft.Icon(name=ft.icons.FAVORITE_OUTLINE_OUTLINED, color="red", size=50, semantics_label="Heart"),
        ft.Icon(name=ft.icons.FAVORITE_OUTLINE_SHARP, color="red", size=50, tooltip="Heart"),
        ft.Icon(name=ft.icons.FAVORITE_OUTLINED, color="red", size=50, rotate=45),
    )
ft.app(target=main)

Icon 這個 widget 包含的參數較其它 widget少，常用的有

name: 指定要使用的 icon 名稱，利用 icons 這個模組，呼叫想使用的 icon, 如我們這個例子中使用的是 FAVORITE 的 icon。要注意一點: icon 的名稱是有分大小寫的，但若改成 name=”favorite” 的寫法就不分大小寫。
color: 指定 icon 呈現的顏色
size:　icon 的大小

其它還有:

opacity :透明度，其值介於 0-1 之間，值愈接近 0 愈透明
semantics_label: 主要用於輔助閱讀用，當輔助閱讀遇到這個 icon 時會讀出 semantics_label 設定的文字
tooltip:當游標移到此 icon 時會顯示的文字
rotate: icon 要旋轉的角度

同一個 Icon 還有好幾種變化，我們可以連上 Icon Browser 查看, 點一下你要的 icon 就會直接 copy 它的名字到剪貼簿，回到編輯器直接貼上就行了。

上面有些 Icon 的變化並沒有太大的差別，像是 FAVORITE_OUTLINE_OUTLINED 和 FAVORITE_OUTLINE_SHARP ，於是問了一下 AI，得到這樣的回答:

在 Flet 的 Icon 元件中，_OUTLINE_SHARP 和 _OUTLINE_OUTLINED 這兩個屬性通常用來定義 Icon 的樣式，特別是輪廓線的風格。雖然它們看起來相似，但實際上有一些細微的差別。

OUTLINE_SHARP:
- 銳利輪廓： 這類 Icon 的輪廓線通常比較銳利，線條清晰分明。
- 精確細節： Icon 的細節部分會被清晰地呈現出來。
- 適用場景： 適合需要高辨識度和清晰細節的場合，例如需要快速辨識的按鈕或導航欄上的 Icon。
OUTLINE_OUTLINED:
- 柔和輪廓： 這類 Icon 的輪廓線相對較柔和，線條可能略帶圓角。
- 簡約風格： Icon 的細節部分可能會被簡化，以達到更簡潔的視覺效果。
- 適用場景： 適合需要更柔和、簡約風格的場合，例如品牌形象比較溫暖或希望營造輕盈氛圍的應用程式。

總之，還是透過自己的設計及需求，尋找適當的 icon 吧!

執行結果:

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

=== English Version ===

Icons play an important role in Flet. They can attract users’ attention and convey information more easily and clearly. Therefore, various icons are commonly seen in APPs, such as different types of bars, menus and buttons. and notifications, etc. Therefore, learning how to use Icon can enhance the beauty of the UI and the user experience.

The usage of Icon in Flet is as follows:


# Flet Icon
# 2024-08-13
# https://github.com/lcc728/flet/blob/main/ex_icon.py

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Icon(name=ft.icons.FAVORITE, color="red", size=50),
        ft.Icon(name=ft.icons.FAVORITE, color="red", size=50, opacity=0.5336),
        ft.Icon(name=ft.icons.FAVORITE_OUTLINE_OUTLINED, color="red", size=50, semantics_label="Heart"),
        ft.Icon(name=ft.icons.FAVORITE_OUTLINE_SHARP, color="red", size=50, tooltip="Heart"),
        ft.Icon(name=ft.icons.FAVORITE_OUTLINED, color="red", size=50, rotate=45),
    )
ft.app(target=main)

The Icon widget has fewer parameters than other widgets. The most common ones are

name: Specify the name of the icon you want to use. Use the Icons module to call the icon you want to use. For example, in our example we use the FAVORITE icon. Note that the name of the icon is case-sensitive, but if it is changed to name=”favorite”, it will not be case-sensitive.
color: Specifies the color of the icon
size: Icon size

Others include:

opacity: Transparency, its value is between 0-1. The closer the value is to 0, the more transparent it is.
semantics_label: mainly used to assist reading. When the reading assistant encounters this icon, it will read the text set by semantics_label.
tooltip: Text that will appear when the cursor is hovering over the icon.
rotate: The angle of rotation of the icon

There are several variations of the same icon. We can connect to the Icon Browser to view them. Click on the icon you want and it will copy its name directly to the clipboard. Just go back to the editor and paste it directly.

It is better to find the appropriate icon based on your own design and needs!

Result:

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