Flutter基礎篇——常用Widget

對于初學flutter的朋友來說，要知道，flutter的UI萬物皆Widget。

創(chuàng)新互聯(lián)是一家集網站建設,海淀企業(yè)網站建設,海淀品牌網站建設,網站定制,海淀網站建設報價,網絡營銷,網絡優(yōu)化,海淀網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

flutter所寫的頁面的結構可以被看成套娃，一層套一層，一層套一層，一層套一層。。。。。。

Flutter Widget采用現(xiàn)代響應式框架構建，這是從 React 中獲得的靈感，中心思想是用widget構建你的UI。 Widget描述了他們的視圖在給定其當前配置和狀態(tài)時應該看起來像什么。當widget的狀態(tài)發(fā)生變化時，widget會重新構建UI，F(xiàn)lutter會對比前后變化的不同， 以確定底層渲染樹從一個狀態(tài)轉換到下一個狀態(tài)所需的最小更改。

Text ： 該 widget 可讓創(chuàng)建一個帶格式的文本。

Row 、 Column ： 這些具有彈性空間的布局類Widget可讓您在水平（ Row ）和垂直（ Column ）方向上創(chuàng)建靈活的布局。

Stack ：取代線性布局 (和Android中的LinearLayout相似)，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對于 Stack 的上下左右四條邊的位置。

Container ： Container 可讓您創(chuàng)建矩形視覺元素。 您可以為 Container 裝飾一個 BoxDecoration , 如 background、一個邊框、或者一個陰影。 Container 也可以具有邊距（margins）、填充(padding)和應用于其大小的約束(constraints)。另外， Container 可以使用矩陣在三維空間中對其進行變換。

具體的演示見我另外的博客

有一部分Widget都有一個 child 屬性，用于容納唯一的子Widget。

例如：Container、Center、Padding、Align等Widget。

還有一部分Widget允許存在多個子Widget，用 children 作為屬性。

例如：Row、Column、Stack等Widget。

在StatefulWidget調用createState之后，框架將新的狀態(tài)插入樹種，然后調用狀態(tài)對象的initState。子類化State可以重寫initState，以完成僅需要一次執(zhí)行的工作。當然在initState的實現(xiàn)中需要調用super.initState

當一個狀態(tài)對象不再需要時，框架調用狀態(tài)對象的dispose。也可以通過覆蓋dispose方法來執(zhí)行清理工作。

OVER~

Flutter 之 彈性布局 (Row、Column) (十一)

彈性布局允許子組件按照一定比例來分配父容器空間

Flex組件和Row、Column屬性主要的區(qū)別就是多一個direction。

當direction的值為Axis.horizontal的時候，則是Row。

當direction的值為Axis.vertical的時候，則是Column。

它們之中都有主軸（MainAxis）和交叉軸（CrossAxis）的概念：

Row可以沿水平方向排列其子widget。定義如下：

示例1 - 基本使用

示例2 - 基線對齊

基線是英文字母X的下端兩點連成的一條線

示例3 - 水平方向包裹

Column可以沿垂直方向排列其子widget。定義如下：

Column 基本使用 示例

再看一個示例

運行效果如下：

我們發(fā)現(xiàn)文本并沒有居中？

解釋：

實際上，Row和Column都只會在主軸方向占用盡可能大的空間，而交叉軸的長度則取決于他們最大子元素的長度。如果我們想讓本例中的兩個文本控件在整個手機屏幕中間對齊，我們有兩種方法：

運行效果如下：

如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column會占用盡可能大的空間，里面Row或Column所占用的空間為實際大小，下面以Column為例說明

如果要讓里面的Column占滿外部Column，可以使用Expanded 組件：

Flutter 布局用法總結

本篇主要整理 flutter 中多組件布局用法。

以 Row 為例說明， Column 先省略。

flutter 中的彈性布局，主要使用 Flex 和 Expanded 配合實現(xiàn)。

參考資料：

網站題目：flutter彈性,簡書 flutter
文章分享：http://chinadenli.net/article29/dseejch.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供手機網站建設、標簽優(yōu)化、搜索引擎優(yōu)化、靜態(tài)網站、網站設計、App開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)