文章目錄

• 一、Flutter 布局相關的組件簡介
• 二、Row 和 Column 組件
• 三、SizedBox 組件
• 四、ClipOval 組件
• 五、 完整代碼示例
• 六、 相關資源

一、Flutter 布局相關的組件簡介

---

Flutter 與布局相關的組件 :

• Container : 容器組件 ;
• RenderObjectWidget : 布局渲染相關組件 ;
  • SingleChildRenderObjectWidget : 單節點布局組件 ;
    • Opacity : 常用于修改組件透明度 ;
    • ClipOval : 裁剪布局組件 , 可以將布局裁剪成圓形 ;
    • ClipRRect : 裁剪布局組件 , 可以將布局裁剪成方形 ;
    • PhysicalModel : 將布局顯示成不同的形狀 ;
    • Align : 布局設置組件 , 一般設置布局居中操作 ;
    • Padding : 設置內邊距的組件 ;
    • SizeBox : 用于約束布局大小的組件 ;
    • FractionallySizedBox : 約束布局水平 / 垂直方向的平鋪操作 ;
  • MultiChildRenderObjectWidget : 多節點布局組件 ;
    • Stack : 相當于幀布局 FrameLayout ;
    • Flex :
      • Column : 相當于線性布局 , 垂直方向布局 , 組件從上到下擺放 ;
      • Row : 相當于線性布局 , 水平方向布局 , 組件從左到右 ;
    • Wrap : 該組件與 Row 組件類似 , Wrap 組件可以換行 ;
    • Flow : 不常用 ;
• ParentDataWidget :
  • Positioned : 用于固定組件位置的組件 ;
  • Flexible : 用于約束組件在父容器中展開大小的組件 ;

二、Row 和 Column 組件

---

Row 組件相關參數 : Row 組件相當于線性布局 , 水平方向布局 , 組件從左到右 ;

class Row extends Flex {Row({Key key,MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,MainAxisSize mainAxisSize = MainAxisSize.max,CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,TextDirection textDirection,VerticalDirection verticalDirection = VerticalDirection.down,TextBaseline textBaseline,List<Widget> children = const <Widget>[],}) : super(children: children,key: key,direction: Axis.horizontal,mainAxisAlignment: mainAxisAlignment,mainAxisSize: mainAxisSize,crossAxisAlignment: crossAxisAlignment,textDirection: textDirection,verticalDirection: verticalDirection,textBaseline: textBaseline,); }

Column 組件相關參數 : Column 組件相當于線性布局 , 垂直方向布局 , 組件從上到下擺放 ;

class Column extends Flex {Column({Key key,MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,MainAxisSize mainAxisSize = MainAxisSize.max,CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,TextDirection textDirection,VerticalDirection verticalDirection = VerticalDirection.down,TextBaseline textBaseline,List<Widget> children = const <Widget>[],}) : super(children: children,key: key,direction: Axis.vertical,mainAxisAlignment: mainAxisAlignment,mainAxisSize: mainAxisSize,crossAxisAlignment: crossAxisAlignment,textDirection: textDirection,verticalDirection: verticalDirection,textBaseline: textBaseline,); }

Row 和 Column 組件使用時 , 設置其對應的 children: [] 即可 , 在中括號 [] 中是多個組件的集合 , 使用逗號隔開 ;

示例代碼 :

// 水平方向排列的線性布局 Row(children: <Widget>[組件1,組件2,組件3,] )// 垂直方向排列的線性布局 Column(children: <Widget>[組件1,組件2,組件3,] )

三、SizedBox 組件

---

SizeBox : 用于約束布局大小的組件 ;

class SizedBox extends SingleChildRenderObjectWidget {const SizedBox({ Key key, this.width, this.height, Widget child }): super(key: key, child: child); }

SizeBox 組件使用方法 : 在 width 和 height 字段設置組件的寬高屬性 , 在 child 字段設置要設置大小的組件 ;

// 使用 SizedBox 組件約束布局大小 SizedBox(width: 寬度像素值,height: 高速像素值,// 使用 SizedBox 約束組件大小child: 要約束的組件, ),

代碼示例 :

// 使用 SizedBox 組件約束布局大小 SizedBox(width: 100,height: 100,// 使用 SizedBox 約束該 Image 組件大小child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"), ),

四、ClipOval 組件

---

ClipOval 組件 : 裁剪布局組件 , 可以將布局裁剪成圓形 ;

class ClipOval extends SingleChildRenderObjectWidget {const ClipOval({Key key, this.clipper, this.clipBehavior = Clip.antiAlias, Widget child}): assert(clipBehavior != null),super(key: key, child: child); }

ClipOval 組件使用方法 : 將要裁剪的組件設置到該 ClipOval 對應的 child 字段中 , 即可將該組件裁剪 ;

代碼示例 : 此處 ClipOval 組件對 SizedBox 組件進行圓形裁剪 , SizedBox 組件約束 Image 組件的大小 ;

// 圓形裁剪組件 , 將 child 布局裁剪成圓形 ClipOval(// 使用 SizedBox 組件約束布局大小child: SizedBox(width: 100,height: 100,// 使用 SizedBox 約束該 Image 組件大小child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"),), ),

五、 完整代碼示例

---

完整代碼示例 :

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"),),),],),],),),],),// 刷新時回調的方法// 列表發生下拉操作時, 回調該方法// 該回調是 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;}}

運行效果展示 : 第二行的整體布局放在 Row 組件中 , 橫向布局中放置了兩個組件 , 第一個 Image 組件顯示原始圖片 , 第二個組件是經過 SizedBox 組件約束大小 , 和 ClipOval 組件裁剪成圓形后的效果 ;

六、 相關資源

---

參考資料 :

• 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 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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