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)
• [Obs＃84] 另一個更簡便的筆記分欄作法：使用Columns外掛 (0則留言, 2022/04/30)
• Obs155｜程設師的編程好友：CodeBlock Customizer／Code Styler、Codeblock Tabs、Keyshots (0則留言, 2024/03/09)
• VREW：準確率頗高的語音轉文字工具-自動產生YouTube字幕的另一選擇 (0則留言, 2022/06/03)
• Vrew2-【AI技術大揭密】從一句標題自動產出完整影片！腳本、配圖、語音、背景音樂一次搞定！ (0則留言, 2023/04/14)
• WP Widget Cache造成WordPress有問題 (2則留言, 2009/10/26)