Flet – Container

George

4 週前

在 Flet 裡， Container 是一個組織和佈局的重要元件，它提供了多種的屬性設定，讓我們在排版是可以更加的靈活。

Container 就像一個盒子，你可以在盒子內放許多的東西，像是之前介紹過的 Text ，Image，TextField 和 Button 等等。

在下面的例子，我們放放了圖片和文字在容器裡:


# Flet - Container
# 2024-08-21
# https://github.com/lcc728/flet/blob/main/ex_container.py

import flet as ft

def main(page: ft.Page):
    page.title = "容器",
    page.vertical_alignment = ft.MainAxisAlignment.CENTER    
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER  
    page.add(
        ft.Container(
            image_src='102.jpg',
            image_fit=ft.ImageFit.FILL,
            content=ft.Text("This is a container", weight=ft.FontWeight.BOLD,color="white"),
            alignment= ft.alignment.center,
            bgcolor=ft.colors.BLUE_400,
            height=400,
            width=600,
            border_radius=ft.border_radius.all(35),
  
         )
    )

ft.app(target=main)

程式一開始先設定了 page.title, 接著設定 page 的對齊方式:

vertical_alignmen 設定重直的對齊方式, 詳細的屬性請參考: https://flet.dev/docs/reference/types/mainaxisalignment/
horizontal_alignment 設定水平的對齊方式, 詳細的屬性請參考: https://flet.dev/docs/reference/types/crossaxisalignment/

在 Container 中，我們設定的屬性有:

image_src : 放了一張 102.jpg 的圖在 container 中
image_fit: 設定圖片在容器中的填滿方式:
- NONE: 預設值。圖片會根據其原始尺寸顯示，不會進行任何縮放或剪裁。如果圖片大於容器，則會超出顯示範圍。
- CONTAIN: 根據容器大小進行縮放，確保整個圖片都在容器內並保持原始的寬高比，如果容器的寬高比與圖片不同，則圖片會被縮小到能完全放入容器的最大尺寸。
- COVER: 根據容器大小進行縮放，確保圖片完全覆蓋整個容器。可能導致圖片被裁剪，以符合容器大小。
- FILL: 將圖片填滿整個容器。這會導致圖片失真，使用時請小心
- FIT_HEIGHT: 圖片高度會調整為與容器等高，寬度按比例縮放。
- FIT_WIDTH: 圖片寬度會調整為與容器等寬，高度按比例縮放。
- SCALE_DOWN: 如果圖片大於容器，則縮小圖片以適合容器，但不會放大圖片。
content: 容器中主要的子物件，可以是任何能放入容器的元件，這裡用了一個 Text 元件。
alignment: 子物件的對齊方式，本例為置中對齊
bgcolor: 背景色，image_fit 設為 fill，所以無法開出結果，可以試著換一下 image_fit 的設定，就看到結果。
height，width : 容器的高和寬
border_radius : 容器4個角的半徑，我們也能單獨設定某個角，請參考 https://flet.dev/docs/reference/types/borderradius

其它還有一些這個例子沒有用到的:

border : 設定容器的邊框，及邊框的樣式
gradient : 底色以漸層方式呈現，若此設定與 bgcolor 同時存在，它會覆蓋 bgcolor 的設定。
margin: 設定容器與外部的距離
padding: 設定容器與內部元件的距離
shadow: 設定容器的陰影
shape: 設定容器的形狀為方形或圓形，預設為方形

執行結果:

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