【Flutter實戰】定位裝飾權重組件及柱狀圖案例

来源:https://www.cnblogs.com/mengqd/archive/2020/06/22/13179103.html
-Advertisement-
Play Games

老孟導讀：Flutter中有這麼一類組件，用於定位、裝飾、控制子組件，比如 Container (定位、裝飾)、Expanded (擴展)、SizedBox (固定尺寸)、AspectRatio (寬高比)、FractionallySizedBox (占父組件比例)。這些組件的使用頻率非常高，下麵一 ...


老孟導讀：Flutter中有這麼一類組件，用於定位、裝飾、控制子組件，比如 Container (定位、裝飾)、Expanded (擴展)、SizedBox (固定尺寸)、AspectRatio (寬高比)、FractionallySizedBox (占父組件比例)。這些組件的使用頻率非常高，下麵一一介紹，最後給出項目中實際案例熟悉其用法。
【Flutter實戰】系列文章地址：http://laomengit.com/guide/introduction/mobile_system.html

Container

Container 是最常用的組件之一，它是單容器類組件，即僅能包含一個子組件，用於裝飾和定位子組件，例如設置背景顏色、形狀等。

最簡單的用法如下：

Container(
	child: Text('老孟'),
 )

子組件不會發生任何外觀上的變化：

設置背景顏色：

Container(
	color: Colors.blue,
    child: Text('老孟'),
)

設置內邊距( padding ) 和 外邊距( margin )

Container(
      color: Colors.blue,
      child: Container(
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(20),
        color: Colors.red,
        child: Text('老孟'),
      ),
    )

效果如下：

decoration 屬性設置子組件的背景顏色、形狀等。設置背景為圓形，顏色為藍色：

Container(
  child: Text('老孟，專註分享Flutter技術及應用'),
  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
)

預設情況下，圓形的直徑等於 Container 窄邊長度，相當於在矩形內繪製內切圓。

上面的情況明顯不是我們希望看到了，希望背景是圓角矩形：

Container(
        child: Text('老孟，專註分享Flutter技術及應用'),
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Colors.blue),
      )

除了背景我們可以設置邊框效果，代碼如下：

Container(
        child: Text('老孟，專註分享Flutter技術及應用'),
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: Colors.blue,
            width: 2,
          ),
        ),
      )

創建圓角圖片和圓形圖片：

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image:  DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
    )


修改其形狀為圓形，代碼如下：

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        shape: BoxShape.circle,
      ),
    )

設置對齊方式為居中，背景色為藍色，代碼如下：

Container(
        color: Colors.blue,
        child: Text('老孟，一個有態度的程式員'),
        alignment: Alignment.center,
      )

註意：設置對齊方式後，Container將會充滿其父控制項，相當於Android中 match_parent 。

Alignment 已經封裝了常用的位置，

通過名字就知道其位置，這裡要介紹一下其他的位置，比如在距離左上角1/4處：

Container(
  alignment: Alignment(-.5,-.5),
  child: Text('老孟，專註分享Flutter技術及應用'),
)

所以這裡有一個非常重要的坐標系，Alignment 坐標系如下：

組件的中心為坐標原點。

設置固定的寬高屬性：

Container(
        color: Colors.blue,
        child: Text('老孟，專註分享Flutter技術及應用'),
        alignment: Alignment.center,
        height: 60,
        width: 250,
      )

通過 constraints 屬性設置最大/小寬、高來確定大小，如果不設置，預設最小寬高是0，最大寬高是無限大（double.infinity），約束width代碼如下：

Container(
        color: Colors.blue,
        child: Text('老孟，專註分享Flutter技術及應用'),
        alignment: Alignment.center,
        constraints: BoxConstraints(
          maxHeight: 100,
          maxWidth: 300,
          minHeight: 100,
          minWidth: 100,
        ),
      )

通過transform可以旋轉、平移、縮放Container，旋轉代碼如下：

Container(
        color: Colors.blue,
        child: Text('老孟，專註分享Flutter技術及應用'),
        alignment: Alignment.center,
        height: 60,
        width: 250,
        transform: Matrix4.rotationZ(0.5),
      )

註意：Matrix4.rotationZ()參數的單位是弧度而不是角度

SizedBox

SizedBox 是具有固定寬高的組件，直接指定具體的寬高，用法如下：

SizedBox(
        height: 60,
        width: 200,
        child: Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('老孟，專註分享Flutter技術及應用'),
        ),
      )

設置尺寸無限大，如下：

SizedBox(
  height: double.infinity,
  width: double.infinity,
  ...
)

雖然設置了無限大，子控制項是否會無限長呢？不，不會，子控制項依然會受到父組件的約束，會擴展到父組件的尺寸，還有一個便捷的方式設置此方式：

SizedBox.expand(
  child: Text('老孟，專註分享Flutter技術及應用'),
)

SizedBox 可以沒有子組件，但仍然會占用空間，所以 SizedBox 非常適合控制2個組件之間的空隙，用法如下：

Column(
          children: <Widget>[
            Container(height: 30,color: Colors.blue,),
            SizedBox(height: 30,),
            Container(height: 30,color: Colors.red,),
          ],
        )

AspectRatio

AspectRatio 是固定寬高比的組件，用法如下：

Container(
        height: 300,
        width: 300,
        color: Colors.blue,
        alignment: Alignment.center,
        child: AspectRatio(
          aspectRatio: 2 / 1,
          child: Container(color: Colors.red,),
        ),
      )

aspectRatio 是寬高比，可以直接寫成分數的形式，也可以寫成小數的形式，但建議寫成分數的形式，可讀性更高。效果如下：

FractionallySizedBox

FractionallySizedBox 是一個相對父組件尺寸的組件，比如占父組件的70%：

Container(
  height: 200,
  width: 200,
  color: Colors.blue,
  child: FractionallySizedBox(
    widthFactor: .8,
    heightFactor: .3,
    child: Container(
      color: Colors.red,
    ),
  ),
)

通過 alignment 參數控制子組件顯示的位置，預設為居中，用法如下：

FractionallySizedBox(
  alignment: Alignment.center,
  ...
)

權重組件

Expanded、Flexible 和 Spacer 都是具有權重屬性的組件，可以控制 Row、Column、Flex 的子控制項如何佈局的組件。

Flexible 組件可以控制 Row、Column、Flex 的子控制項占滿父組件，比如，Row 中有3個子組件，兩邊的寬是100，中間的占滿剩餘的空間，代碼如下：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

還是有3個子組件，第一個占1/6，第二個占2/6，第三個占3/6，代碼如下：

Column(
      children: <Widget>[
        Flexible(
          flex: 1,
          child: Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text('1 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Text('2 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
        Flexible(
          flex: 3,
          child: Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: Text('3 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
      ],
    )

子組件占比 = 當前子控制項 flex / 所有子組件 flex 之和。

Flexible中 fit 參數表示填滿剩餘空間的方式，說明如下：

  • tight：必須（強制）填滿剩餘空間。
  • loose：儘可能大的填滿剩餘空間，但是可以不填滿。

這2個看上去不是很好理解啊，什麼叫儘可能大的填滿剩餘空間？什麼時候填滿？看下麵的例子：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
			  child: Text('Container',style: TextStyle(color: Colors.white),),
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

這段代碼是在最上面代碼的基礎上給中間的紅色Container添加了Text子控制項，此時紅色Container就不在充滿空間，再給Container添加對齊方式，代碼如下：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
			  alignment: Alignment.center,
			  child: Text('Container',style: TextStyle(color: Colors.white),),
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )


此時又填滿剩餘空間。

大家是否還記得 Container 組件的大小是如何調整的嗎？Container 預設是適配子控制項大小的，但當設置對齊方式時 Container 將會填滿父組件，因此是否填滿剩餘空間取決於子組件是否需要填滿父組件。

如果把 Flexible 中子組件由 Container 改為 OutlineButton，代碼如下：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
          child: OutlineButton(
            child: Text('OutlineButton'),
          ),
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

OutlineButton 正常情況下是不充滿父組件的，因此最終的效果應該是不填滿剩餘空間：

下麵再來介紹另一個權重組件 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 繼承字 Flexible，fit 參數固定為 FlexFit.tight，也就是說 Expanded 必須（強制）填滿剩餘空間。上面的 OutlineButton 想要充滿剩餘空間可以直接使用 Expanded ：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Expanded(
          child: OutlineButton(
            child: Text('OutlineButton'),
          ),
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

Spacer 也是一個權重組件，源代碼如下：

@override
Widget build(BuildContext context) {
  return Expanded(
    flex: flex,
    child: const SizedBox.shrink(),
  );
}

Spacer 的本質也是 Expanded 的實現的，和Expanded的區別是：Expanded 可以設置子控制項，而 Spacer 的子控制項尺寸是0，因此Spacer適用於撐開 Row、Column、Flex 的子控制項的空隙，用法如下：

Row(
  children: <Widget>[
    Container(width: 100,height: 50,color: Colors.green,),
    Spacer(flex: 2,),
    Container(width: 100,height: 50,color: Colors.blue,),
    Spacer(),
    Container(width: 100,height: 50,color: Colors.red,),
  ],
)

三個權重組建總結如下：

  • Spacer 是通過 Expanded 實現的，Expanded繼承自Flexible。
  • 填滿剩餘空間直接使用Expanded更方便。
  • Spacer 用於撐開 Row、Column、Flex 的子組件的空隙。

仿 掘金-我 效果

先看下效果：

拿到效果圖先不要慌 （取出手機拍照發個朋友圈

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 也來聊聊 HTTPS.
    前言： 網上聊 HTTPS 的文章已經數都數不過來了吧，厚著臉皮，整理下讀書筆記，結合平常項目的實踐，也來聊聊 HTTPS。 ##一、為什麼需要 HTTPS？ 眾所周知，HTTP 協議具有無連接、不可靠、盡最大努力的特點，這也為 HTPP 協議帶來信息竊聽或身份偽裝等安全問題。主要體現在幾個方面： ...
  • 【Python】使用Selenium實現淘寶搶單
    最近，小明為了達成小姐姐的願望，在某寶買到心儀的寶貝，再加上又迷上了python，就通過python輕而易舉地實現了（個人聲明：對Java來說，這並不是背叛）。 需求分析&前期準備 需求其實很簡單，正常購物。那我們平常的購物流程如下所示： 開始之前，我們需要準備一下程式運行環境。 環境 系統：Win ...
  • Python 程式報錯崩潰後，如何倒回到崩潰的位置？
    假設我們有一段程式，從 Redis 中讀取數據，解析以後提取出裡面的 name 欄位： import json import redis client = redis.Redis() def read(): while True: data = client.lpop('info') if data ...
  • 架構設計 | 高併發流量削峰，共用資源加鎖機制
    本文源碼：GitHub·點這裡 || GitEE·點這裡 一、高併發簡介 在互聯網的業務架構中，高併發是最難處理的業務之一，常見的使用場景：秒殺，搶購，訂票系統；高併發的流程中需要處理的複雜問題非常多，主要涉及下麵幾個方面： 流量管理，逐級承接削峰； 網關控制，路由請求，介面熔斷； 併發控制機制，資 ...
  • Java的前景如何，好不好自學？
    Java前景如何？我負責任地說，Java非常有前景，因為使用Java的開發場景就非常非常多，可以說是多不勝數。 我剛參加工作的時候，使用Java開髮網站應用，用JSP和Servlet，那時候J2EE已經被認為過重了，新的Java應用框架層出不窮，還用Java的Java Applet功能做過網頁，當時 ...
  • Visual VM 垃圾回收性能監控開源插件, 支持Java 8和VisualVM 2.0
    Visual VM 垃圾回收性能監控插件, 加入對最新版VisualVM 2.0的支持, 做了中英雙語支持.源碼地址: https://github.com/beansoftapp/gcperf原始項目: https://github.com/bitcharmer/gcperf原始介紹: https... ...
  • Spring如何解決迴圈依賴？
    介紹 先說一下什麼是迴圈依賴，Spring在初始化A的時候需要註入B，而初始化B的時候需要註入A，在Spring啟動後這2個Bean都要被初始化完成 Spring的迴圈依賴有兩種場景 構造器的迴圈依賴 屬性的迴圈依賴 構造器的迴圈依賴，可以在構造函數中使用@Lazy註解延遲載入。在註入依賴時，先註入 ...
  • 【JAVA SE基礎篇】31.內部類
    內部類分為：成員內部類(靜態和非靜態)、匿名內部類、局部內部類 1.成員內部類(可以使用private、default、protected、public任意修飾) 非靜態內部類 1.非靜態內部類必須寄存在一個外部類對象里。因此，如果有一個非靜態內部類對象那麼一定存在對應的外部類對象 2.非靜態內部類 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類