聊聊flutter的UI布局

2022-02-15 07:23:11 字數 676 閱讀 2995

ui布局多半是套路,熟悉套路的規則。

flutter的ui布局也有一套規則

center

center可以讓任何元素在螢幕中居中,既是水平居中又是垂直居中,如果想讓元素從上而下排列要怎麼辦呢?那就得使用column來配合

container

container是個容器,可以包在乙個元素的外面,container大多數可以做乙個圓角邊框,或者設乙個統一的背景色,container預設隨元素的大小而變化。所以container是乙個很吝嗇的元素,另外一些元素想和其他元素保持一定的間距,可以借用container的margin屬性來設定

row column 

作為橫向或者豎向的布局,column最大的寬度有子元素的最大寬度決定的,換句話說,如果column的子元素設為了居中,其它子元素根據column的寬度居中,因此column 預設處在螢幕的最左邊,如果讓column居中,需要使用center來配合, row 布局元素的時候,如果元素的長度比如text超出了一行的長度,並不會自動換行,必須配合expanded,但是column是會自動換行的,這個是它們的一點異同點,需要注意

expanded

顧名思義是膨脹擴充套件的意思,只能用在具有flex布局屬性的容器控制項裡,譬如column,row

比如row裡有三個元素,我想讓某乙個元素占用所有的剩餘行空間,可以在該元素外面套上expanded

flutter學習 布局

名稱 型別說明 scrolldirection axis axis.horizontal axis.vertical padding edgeinsetsgeometry 內邊距resolve bool 元件反向排序 children list 列表元素 listview.builder itemc...

Flutter 基本布局

本篇部落格大致介紹了通過flutter實現一些簡單的頁面布局,官方的參考文件 首先,專案的入口如下,後面的所有操作都是對container變數進行更改 import package flutter material.dart class override widget build buildcont...

Flutter必備 聊聊那些彈框

對話方塊作為乙個挺重要的東西,這裡來說一下,細細一數也蠻多的,本文包括 1 dialog 2 alertdialog 3 cupertinoalertdialog 4 dialog中的元件狀態更新 5 snackbar 6 bottomsheet0.搭個場子再說 class dialogshow e...