文章目錄

• 一、Wrap 組件
• 二、Expanded 組件
• 三、完整代碼示例
• 四、相關資源

一、Wrap 組件

---

Wrap 組件 : 該組件是可換行的水平線性布局組件 , 與 Row 組件間類似 , 但是可以換行 ;

class Wrap extends MultiChildRenderObjectWidget {/// Creates a wrap layout.////// By default, the wrap layout is horizontal and both the children and the/// runs are aligned to the start.////// The [textDirection] argument defaults to the ambient [Directionality], if/// any. If there is no ambient directionality, and a text direction is going/// to be necessary to decide which direction to lay the children in or to/// disambiguate `start` or `end` values for the main or cross axis/// directions, the [textDirection] must not be null.Wrap({Key key,this.direction = Axis.horizontal,this.alignment = WrapAlignment.start,this.spacing = 0.0, // 水平方向間距this.runAlignment = WrapAlignment.start,this.runSpacing = 0.0, // 垂直方向間距this.crossAxisAlignment = WrapCrossAlignment.start,this.textDirection,this.verticalDirection = VerticalDirection.down,List<Widget> children = const <Widget>[], // 子組件集合}) : super(key: key, children: children); }

Wrap 組件用法 :

• 設置水平間距 : spacing 字段 ;
• 設置垂直間距 : runSpacing 字段 ;
• 設置布局中的子組件 : children 字段 ;

// 可自動換行的水平線性布局 Wrap(// 設置水平邊距spacing: 間距值 ( double 類型 ),// 設置垂直間距runSpacing: 間距值 ( double 類型 ),children: <Widget>[設置若干子組件 ] )

代碼示例 : Chip 組件用法參考 【Flutter】StatelessWidget 組件 ( CloseButton 組件 | BackButton 組件 | Chip 組件 ) 博客 ;

// 可自動換行的水平線性布局 Wrap(// 設置水平邊距spacing: 40,// 設置垂直間距runSpacing: 10,children: <Widget>[Chip(// 設置主體標簽文本label: Text("宋江"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("宋"),),),Chip(// 設置主體標簽文本label: Text("盧俊義"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("盧"),),),Chip(// 設置主體標簽文本label: Text("吳用"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("吳"),),),Chip(// 設置主體標簽文本label: Text("公孫勝"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("公孫"),),),Chip(// 設置主體標簽文本label: Text("關勝"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("關"),),),], ),

運行效果 :

二、Expanded 組件

---

Expanded 組件 : 該組件可以自動識別父容器的方向 , 在垂直或水平方向上填充剩余空間 ;

class Expanded extends Flexible {/// Creates a widget that expands a child of a [Row], [Column], or [Flex]/// so that the child fills the available space along the flex widget's/// main axis.const Expanded({Key key,int flex = 1,@required Widget child,}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child); }

Expanded 組件 在 Row 組件 中會自動填充水平方向上的剩余空間 ;

Expanded 組件 在 Column 組件 中會自動填充垂直方向上的剩余空間 ;

代碼示例 :

// 普通樣式的 Row Row(children: <Widget>[Container(// 背景設置成黑色decoration: BoxDecoration(color: Colors.black,),// 字體設置成黃色child: Text("Text 原始樣式",style: TextStyle(color: Colors.yellow),),),], ), // 空行 SizedBox(width: 10,height: 20, ), // 使用了 Exoanbded 組件的 Row Row(children: <Widget>[Expanded(child: Container(// 背景設置成黑色decoration: BoxDecoration(color: Colors.black,),// 字體設置成黃色child: Text("Text 原始樣式",style: TextStyle(color: Colors.yellow),),),),], ), // 空行

執行效果 :

第一個組件是 Row 中沒有使用 Expanded 組件的情況 ;

第二個組件是 Row 中使用了 Expanded 組件的情況 ;

三、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget {@override_LayoutPageState createState() => _LayoutPageState(); }class _LayoutPageState extends State<LayoutPage> {/// 當前被選中的底部導航欄索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設置給 Text 文本組件// 設置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: '布局組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('布局組件示例'),),// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,// 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值onTap: (index){// 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引// 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態_currentSelectedIndex = index;});},// 條目items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),// 設置懸浮按鈕floatingActionButton: FloatingActionButton(onPressed: (){print("懸浮按鈕點擊");},child: Text("懸浮按鈕組件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器組件RefreshIndicator(// 顯示的內容child: ListView(children: <Widget>[Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("主頁面選項卡, 下拉刷新"),// 水平方向排列的線性布局Row(children: <Widget>[// 原始圖片, 用于對比Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),// 圓形裁剪組件 , 將 child 布局裁剪成圓形ClipOval(// 使用 SizedBox 組件約束布局大小child: SizedBox(width: 100,height: 100,// 使用 SizedBox 約束該 Image 組件大小child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"),),),Padding(// 設置內邊距 5padding: EdgeInsets.all(15),// 方形裁剪組件 , 將組件裁剪成方形child: ClipRRect(// 設置裁剪圓角, 四個角設置半徑為 10 的圓角borderRadius: BorderRadius.all(Radius.circular(10)),// 修改透明度組件 , 這里設置 50% 透明度child: Opacity(opacity: 0.5,// 設置 100x100 大小的圖片組件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),),),),],),// 設置一個布局容器 , 用于封裝 PageView 組件Container(// 設置高度height: 200,// 設置邊距margin: EdgeInsets.all(15),// 設置裝飾, 背景深橙色decoration: BoxDecoration(color: Colors.white),// 設置子組件 PageView 的裁剪組件child:PhysicalModel(color: Colors.transparent,// 設置圓角半徑 15borderRadius: BorderRadius.circular(50),// 設置裁剪行為 , 抗鋸齒clipBehavior: Clip.antiAlias,// 設置 PageView 組件child:PageView(// 設置 PageView 中封裝的若干組件children: <Widget>[// 第一個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.green),// 顯示的主要文字child: Text("頁面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.red),// 顯示的主要文字child: Text("頁面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.black),// 顯示的主要文字child: Text("頁面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],),),),],),),Container(child: Column(children: <Widget>[// 水平/垂直方向平鋪組件FractionallySizedBox(// 設置寬度充滿父容器widthFactor: 1,// 要設置的水平 / 垂直方向的平鋪操作的組件child: Container(decoration: BoxDecoration(color: Colors.black),child: Text("高度自適應, 寬度充滿父容器",style: TextStyle(color: Colors.amberAccent),),),)],),),// 幀布局Stack(children: <Widget>[Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),// 設置組件位置在 Stack 的相對位置Positioned(left: 0, // 距離右側 0 距離top: 0, // 距離底部 0 距離// 設置約束的組件位置child: Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",width: 25,height: 25,),),],),// 可自動換行的水平線性布局Wrap(// 設置水平邊距spacing: 40,// 設置垂直間距runSpacing: 10,children: <Widget>[Chip(// 設置主體標簽文本label: Text("宋江"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("宋"),),),Chip(// 設置主體標簽文本label: Text("盧俊義"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("盧"),),),Chip(// 設置主體標簽文本label: Text("吳用"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("吳"),),),Chip(// 設置主體標簽文本label: Text("公孫勝"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("公孫"),),),Chip(// 設置主體標簽文本label: Text("關勝"),// 設置左側圓形頭像avatar: CircleAvatar(// 設置背景顏色backgroundColor: Colors.green.shade600,child: Text("關"),),),],),// 普通樣式的 RowRow(children: <Widget>[Container(// 背景設置成黑色decoration: BoxDecoration(color: Colors.black,),// 字體設置成黃色child: Text("Text 原始樣式",style: TextStyle(color: Colors.yellow),),),],),// 空行SizedBox(width: 10,height: 20,),// 使用了 Exoanbded 組件的 RowRow(children: <Widget>[Expanded(child: Container(// 背景設置成黑色decoration: BoxDecoration(color: Colors.black,),// 字體設置成黃色child: Text("Expanded 組件中的 Text 組件",style: TextStyle(color: Colors.yellow),),),),],),// 空行SizedBox(width: 10,height: 100,),],),// 刷新時回調的方法// 列表發生下拉操作時, 回調該方法// 該回調是 Future 類型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("設置頁面選項卡")],),) , // 該設置與 _currentSelectedIndex == 0? 相對應, ?: 三目運算符),);}/// RefreshIndicator 發生下拉操作時, 回調該方法/// 該方啊是一個異步方法 , 在方法體前添加 async 關鍵字Future<Null> _refreshIndicatorOnRefresh() async{// 暫停 500 ms , 使用 await 關鍵字實現// 在這 500 ms 之間 , 列表處于刷新狀態// 500 ms 之后 , 列表變為非刷新狀態await Future.delayed(Duration(milliseconds: 500));return null;}}

運行效果展示 :

四、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。