Site icon George的生活點滴

Flet – AppBar

George

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

AppBar 是位於應用程式最上方，用來顯示應用程式標題、導航及動作按鈕等元素的地方
底下的文章，有更多的介紹:
我之前的文章 : https://www.george.tw/2019/10/08/flutter-appbar/
Flutter AppBar : https://api.flutter.dev/flutter/material/AppBar-class.html
Flet 官方介紹: https://flet.dev/docs/controls/appbar/

程式碼的部份


import flet as ft
def main(page: ft.Page):
    page.appbar = ft.AppBar(                        #產生一個 AppBar
        leading=ft.Icon(ft.icons.TAG_FACES),        #在 leading 的位置放了一個 icon
        leading_width=40,                           #指定寬度為 40
        title=ft.Text("My APP"),                    # Title的文字設為 文字: MyAPP
        center_title=False,                         #關閉文字的置中對齊  
        bgcolor=ft.colors.LIGHT_BLUE_ACCENT_200,    #背景色設定為  LIGHT_BLUE_ACCENT_200
        actions=[                                   #在 action 的位置放三個 Icon button
           ft.IconButton(ft.icons.CAKE),
           ft.IconButton(ft.icons.COOKIE),
           ft.IconButton(ft.icons.BAKERY_DINING_OUTLINED),   # 在 icons 的名稱後加上 _OUTLINED 為 建立外框
        ],    
    )
    page.add(ft.Text("Hello World"))
ft.app(target=main)


上面還有許多還沒介紹到的，你可以先參考:
Icon : https://flet.dev/docs/controls/icon/
要找到合適的 Icon, 可使用官方的 icon browser:　https://gallery.flet.dev/icons-browser/
或在這裡找尋 https://underground.github.io/material-icons-search/

Color: https://flet.dev/docs/reference/colors/
顏色的表達方式和 Flutter 略有不同，請直參考用 flet 官網的說明

執行程式 python appbar.py 或 flet run appbar.py 即可看到結果:

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

=== English Version ===


The AppBar is located at the top of the application and is used to display items such as the application title, navigation, and action buttons.
See the article below for more information:

My previous article: https://www.george.tw/2019/10/08/flutter-appbar/
Flutter AppBar: https://api.flutter.dev/flutter/material/AppBar-class.html
Flet official introduction: https://flet.dev/docs/controls/appbar/


import flet as ft
def main(page: ft.Page):
    page.appbar = ft.AppBar(                        
        leading=ft.Icon(ft.icons.TAG_FACES),        
        leading_width=40,                           
        title=ft.Text("My APP"),                    
        center_title=False,                          
        bgcolor=ft.colors.LIGHT_BLUE_ACCENT_200,    
        actions=[                                   
           ft.IconButton(ft.icons.CAKE),
           ft.IconButton(ft.icons.COOKIE),
           ft.IconButton(ft.icons.BAKERY_DINING_OUTLINED),   
        ],    
    )
    page.add(ft.Text("Hello World"))
ft.app(target=main)

There are many things not introduced above, you can refer:
Icon: https://flet.dev/docs/controls/icon/
To find the icons, you can use flet icon browser: https://gallery.flet.dev/icons-browser/
Or you can find it here: https://underground.github.io/material-icons-search/

Color: https://flet.dev/docs/reference/colors/
The color display is slightly different than in Flutter. Please read the instructions on the official website of flet.

Run python appbar.py or flet run appbar.py to see the results:

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

Exit mobile version