Flutter學習筆記（23）--多個子元素的佈局Widget（Rwo、Column、Stack、IndexedStack、Table、Wrap）

来源:https://www.cnblogs.com/upwgh/archive/2019/08/26/11414084.html
-Advertisement-
Play Games

上一篇梳理了擁有單個子元素佈局的Widget，今天來梳理一下擁有多個子元素佈局的Widget。 Row Row組件常見屬性如下： mainAxisAlignment：主軸的排列方式 crossAxisAlignment：次軸的排列方式 mainAxisSize：... ...


如需轉載，請註明出處：Flutter學習筆記（23）--多個子元素的佈局Widget（Rwo、Column、Stack、IndexedStack、Table、Wrap）

 

上一篇梳理了擁有單個子元素佈局的Widget，今天來梳理一下擁有多個子元素佈局的Widget。

  • Row

Row組件常見屬性如下：

mainAxisAlignment：主軸的排列方式

crossAxisAlignment：次軸的排列方式

mainAxisSize：主軸應該占據多少空間，取值max為最大，min為最小

children：組件子元素，它的本質是一個List列表

對於Row來說，水平方向是主軸，垂直方向是次軸。

首先來看一下mainAxisAlignment屬性值都有哪些

enum MainAxisAlignment {
  start,//將子控制項放在主軸開始的位置
  end,//將子控制項放在主軸結束的位置
  center,//將子控制項放在主軸中間的位置
  spaceBetween,//將主軸空白位置進行均分，排列子元素，首尾沒有空隙
  spaceAround,//將主軸空白區域均分，使中間各個子控制項間距相等，首尾子控制項間距為中間子控制項間距的一半
  spaceEvenly,//將主軸空白區域均分，使各個子空間間距相等
}

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Text('11111111111'),
            new Text('22222222222'),
            new Text('33333333333')
          ],
        ),
      ),
    );
  }
}

  • Column

Column組件常見屬性如下：

mainAxisAlignment：主軸的排列方式

crossAxisAlignment：次軸的排列方式

mainAxisSize：主軸應該占據多少空間，取值max為最大，min為最小

children：組件子元素，它的本質是一個List列表

對Column來說，垂直方向是主軸，水平方向是次軸，使用上和Row大同小異

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Text('11111111111'),
            new Text('22222222222'),
            new Text('33333333333')
          ],
        ),
      ),
    );
  }
}

  • Stack

Stack/alignment：

Stack組件的每一個子組件要麼定位，要麼不定位，定位的子組件是用Positioned組件包裹的，Stack組件本身包含所有不定位的子組件，子組件根據alignment屬性定位（預設為左上角）。然後根據定位的子組件的top、right、bottom、left屬性將他們放置在Stack組件上。

Stack既然是允許子元素堆疊的組件，那麼定位堆疊位置的屬性值有哪些呢？

alignment屬性值：bottomCenter 底部中間位置、bottomLeft 底部左側位置、bottomRight 底部右側位置、center 正中間位置、centerLeft 中間居左位置、centerRight 中間居右位置、topCenter 上部居中位置、topLeft 上部居左位置、topRight 上部居右位置

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Center(
          child: new Stack(
            alignment: Alignment.centerLeft,
            children: <Widget>[
              new Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
              ),
              new Text('這是一段文本')
            ],
          ),
        ),
      ),
    );
  }
}

Stack/Positioned：

上面的示例是通過系統提供的定位來給子元素進行堆疊，但是實際工作中，上面的幾類屬性值往往不能滿足我們UI的需求，UI可能會要求子元素放在任何你想不到的位置，那麼這時候就需要用到我們Positioned來進行定位了。

Positioned屬性值：top 子元素相對頂部邊界距離，left 子元素相對左側邊界距離，right 子元素相對右側邊界距離，bottom 子元素相對底部邊界距離。

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Center(
          child: new Stack(
            children: <Widget>[
              new Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
              ),
              new Positioned(
                top: 20.0,
                left: 50.0,
                child: new Text('這是一段文本')
              )
            ],
          ),
        ),
      ),
    );
  }
}

  • IndexedStack

IndexedStack繼承自Stack，它的作用是顯示第index個child，其他的child都是不可見的，所以IndexedStack的尺寸永遠是和最大的子節點尺寸一致。由於IndexedStack是繼承自Stack，所以它只比Stack多了一個index屬性，即對應child的索引。

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Center(
          child: new IndexedStack(
            index: 1,
            children: <Widget>[
              new Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
              ),
              new Positioned(
                top: 20.0,
                left: 50.0,
                child: new Text('這是一段文本')
              )
            ],
          ),
        ),
      ),
    );
  }
}

  • Table

Table表格佈局，每一行的高度由其內容決定，每一列的寬度由columnWidths屬性單獨控制。

Table組件常見屬性如下：

columnWidths：設置每一列的寬度。

defaultColumnWidth：預設的每一列寬度，預設情況下均分。

textDirection：文字方向。

border：表格邊框。

defaultVerticalAlignment：預設垂直方向的對齊方式，top 放置在頂部、middle 垂直居中、bottom 放置在底部、baseline 文本baseline對齊、fill 充滿整個cell

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
          // 設置表格有多少列，並且指定列寬
          columnWidths:const <int,TableColumnWidth> {
            0:FixedColumnWidth(40.0),
            1:FixedColumnWidth(40.0),
            2:FixedColumnWidth(60.0),
            3:FixedColumnWidth(60.0),
            4:FixedColumnWidth(130.0),
          },
          // 設置表格邊框樣式
          border: TableBorder.all(
            color: Colors.blue,
            width: 2.0,
            style: BorderStyle.solid
          ),
          children: const <TableRow>[
            // 添加第一行數據
            TableRow(
              children: <Widget>[
                SizedBox(
                  child: Text('姓名'),
                  height: 30,
                ),
                Text('性別'),
                Text('年齡'),
                Text('身高'),
                Text('備註'),
              ],
            ),
            // 添加第二行數據
            TableRow(
              children: <Widget>[
                Text('張三'),
                Text('男'),
                Text('20'),
                Text('186'),
                Text('學渣'),
              ],
            ),
            // 添加第三行數據
            TableRow(
              children: <Widget>[
                Text('李四'),
                Text('男'),
                Text('20'),
                Text('188'),
                Text('學酥'),
              ],
            ),
            // 添加第四行數據
            TableRow(
              children: <Widget>[
                Text('王五'),
                Text('男'),
                Text('21'),
                Text('177'),
                Text('學霸'),
              ],
            ),
            // 添加第五行數據
            TableRow(
              children: <Widget>[
                Text('小梅'),
                Text('女'),
                Text('22'),
                Text('170'),
                Text('學神，需要重點培養'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

  • Wrap

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Wrap(
          spacing: 3.0,
          runSpacing: 20.0,//縱軸方向的間距
          alignment: WrapAlignment.end,//縱軸方向的對其方式
          children: <Widget>[
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('A'),
              ),
              label: new Text('文本一'),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('B'),
              ),
              label: new Text('文本二'),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('C'),
              ),
              label: new Text('文本三'),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('D'),
              ),
              label: new Text('文本四'),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('E'),
              ),
              label: new Text('文本五'),
            ),
          ],
        ),
      ),
    );
  }
}

 


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

-Advertisement-
Play Games
更多相關文章
  • ETL子系統
    最近在看《Pentaho Kettle 解決方案》，看到 ETL子系統，發現信息量比較大，用簡短的語句做一下筆記。 ETL子系統有34種子系統，被分成4個部分：抽取、清洗和更正、發佈、管理。 一、抽取 子系統1：數據剖析系統 指從不同源系統中搜集數據的統計信息或其他相關信息的過程，目的是分析不同數據 ...
  • 關於ORACLE圖形化安裝過程中出現的豎線的處理辦法
    這種情況上傳個jre 並指定下就好了~/database/runInstaller -jreLoc /usr/local/jre1.8.0_191/ ...
  • 圖靈學院Java架構師-VIP-【性能調優-Mysql索引數據結構詳解與索引優化】
    本篇文章主要學習了MySQL的索引的數據結構的認識，以及一些索引優化的註意事項，做一個大概的瞭解即可。 ...
  • HBase 系列（七）——HBase 過濾器詳解
    一、HBase過濾器簡介 Hbase 提供了種類豐富的過濾器（filter）來提高數據處理的效率，用戶可以通過內置或自定義的過濾器來對數據進行過濾，所有的過濾器都在服務端生效，即謂詞下推（predicate push down）。這樣可以保證過濾掉的數據不會被傳送到客戶端，從而減輕網路傳輸和客戶端處 ...
  • NDK Cmake
    CMake與NDK搭配使用時，可以配置的部分變數： 1. ：指定Android的目標版本，對應 目錄下的版本。通常情況下是 中的 ，這樣就能確保所有大於等於 的設備都可以使用編譯生成的庫。 但是也有例外，比如：當 時，即使 為`18 ANDROID_PLATFORM=android 21 $NDK/ ...
  • iOS代碼混淆
    混淆原理 代碼編譯階段將符號（方法名、屬性名等）替換成隨機生成的字元串 長話短說，直接上步驟。 混淆集成步驟 步驟一、創建shell文件（confuse.sh）並配置相應的運行環境。 在項目根目錄下新建一個文件夾 這裡取文件夾名稱為CodeObfuscation，如下圖所示 在上一步的文件下新建一個 ...
  • Android-WebView支持input file啟用相機/選取照片
    webview要調起input file拍照或者選取文件功能，可以在webview.setWebChromeClient方法中重寫指定的方法，來攔截webview的input事件，並做我們相應的操作。 Android代碼 這裡的java代碼是來攔截input事件的，裡面做了很多api版本的判斷，不同 ...
  • Android app targetSdk升級到27碰到的一個bug補充說明
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/203 完美解決google nexus設備全面屏主題crash問題 前面有一篇文章，記錄了我在app升級到targetSdk 27中，出現的bug，文章位於  ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類