【Flutter】Flutter 布局元件 ( 布局元件簡介 | Row 元件 | Column 元件 | SizedBox 元件

文章目錄

一、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.
  @override
  Widget 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 可以設定多個 BottomNavigationBarItem
        bottomNavigationBar: 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】Flutter 布局元件 ( 布局元件簡介 | Row 元件 | Column 元件 | 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 ( 随部落格進度一直更新 , 有可能沒有本部落格的源碼 )

【Flutter】Flutter 布局元件 ( 布局元件簡介 | Row 元件 | Column 元件 | SizedBox 元件 | ClipOval 元件 )

文章目錄

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

二、Row 和 Column 元件

三、SizedBox 元件

四、ClipOval 元件

五、完整代碼示例

六、相關資源

繼續閱讀

打開AndroidStudio預設運作Flutter程式出現"building Symbols..."無響應的處理

Flutter 電影 app 應用，相容 Android 和 iOS，使用豆瓣開放Api。

Flutter permission_handler ios擷取不到權限

程式員如何建構自己的知識體系

Google的“ JavaScript殺手” Dart 與JavaScript的比較，前端人趕緊把Dart學起來！

自己面試大廠iOS開發的心得以及一些面試題

Dart中Class、mixin、interface三者間關系及異同

HDU 1330 Deck

輪播圖Banner功能的開發

前端團隊的flutter驗證

準備好了嗎？It's time for Flutter！

Flutter使用流水帳

Flutter中編解碼Convert基本使用

flutter 崩潰收集一、flutter 崩潰收集的方式二、Flutter異常收集最佳實踐三、Flutter crash 收集平台

flutter阿裡雲OSS圖檔上傳

Future和async(異步函數)、await(同步等待)

【Flutter】Flutter 布局元件 ( 布局元件簡介 | Row 元件 | Column 元件 | SizedBox 元件 | ClipOval 元件 )

文章目錄

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

二、Row 和 Column 元件

三、SizedBox 元件

四、ClipOval 元件

五、 完整代碼示例

六、 相關資源

繼續閱讀

五、完整代碼示例

六、相關資源