10. Flutter的彈性佈局：Expanded、Column與Row

• 使用到的Widget：Expanded、Row、Column、SizedBox、GestureDetector

Expanded Widget

Expanded擴展其子物件以填滿可用空間。下列的Widget1會依Expanded的flex係數自動伸縮：

Row / Column / Flex
　└──→children: Expanded(flex: 數值)
　　　　　　　　　　└──→ child: Widget1

範例程式

1. 建立一個橫列
2. 在橫列裡添加三個容器，分別設定容器之背景色
3. 容器內的Text顯示自身的flex係數值
4. 改寫三個容器為for迴圈
5. 變更StatelessWidget為StatefulWidget
6. 加上觸擊事件：容器區域加大flex係數
7. 加上觸擊事件：容器文字還原flex係數為1

▼ demo10_expanded.dart

解說影片

＃＃

您可能也會有興趣的類似文章

• 03. 更多的Flutter範例：StatelessWidget、StatefulWidgett與其他Widgets (0則留言, 2019/09/21)
• 02. 用IDEA快速建立第一支Flutter程式 (0則留言, 2019/09/19)
• 07. 學習Flutter Widget的4個教學App (0則留言, 2019/10/06)
• 09. Flutter的常用佈局Widget：Container (0則留言, 2019/10/12)
• IntelliJ IDEA與括號相關的操作並介紹括號識別外掛：Rainbow Brackets (0則留言, 2019/09/22)
• 08. 成功組建由GitHub複製Flutter專案的關鍵步驟 (0則留言, 2019/10/10)
• 06. Flutter AlertDialog對話窗Widget使用重點 (0則留言, 2019/09/29)
• 05. Flutter的學習輔助應用程式：FlutterGo (0則留言, 2019/09/28)
• 04. 使用第三方Android模擬器來執行Android/Flutter App (0則留言, 2019/09/27)
• 01. 使用IntelliJ IDEA開發Flutter App：開發環境設置 (0則留言, 2019/09/15)
• WP Widget Cache造成WordPress有問題 (2則留言, 2009/10/26)
• 超級起手式－兼具效率與彈性的程式啟動器FARR (0則留言, 2008/08/16)
• jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)
• 另一個Google Reader的替代網站BazQux.com (0則留言, 2013/07/01)
• [QNAP NAS] 如何重置Download Station資料檔的步驟 (0則留言, 2014/07/23)