Flutter中怎么實現一個容器組件

今天就跟大家聊聊有關Flutter中怎么實現一個容器組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

?容器組件

容器組件（Container）可以理解為在Android中的RelativeLayout或LinearLayout等，在其中你可以放置你想布局的元素控件，從而形成最終你想要的頁面布局。當然Flutter中的容器組件作為一個"容器"，肯定會有一些給我們提供一些屬性來約束我們容器內的組件，下面介紹一下容器組件（Container）的一些常用屬性及描述：

屬性名　      類型      說明              key      Key      Container唯一標識符，用于查找更新              alignment　      AlignmentGeometry      控制child的對其方式，如果Container或者Container父節點尺寸大于Child的尺寸，這個屬性設置會生效，有很多種對齊方式              padding      EdgeInsetsGeometry      Decoration內部的空白區域，如果有child的話，child位于padding內部              color      Color      用來設置Container背景色，如果foregroundDecoration設置的話，可能會遮蓋color效果              decoration　      Decoration      繪制在child后面的裝飾，設置了Decoration的話，就不能設置color屬性，否則會報錯，此時應該在Decoration中進行顏色的設置              foregroundDecoration      Decoration      繪制在child前面的裝飾              width      double      Container的寬度，設置為double.infinity可以強制在寬度上撐滿              height      double      Container的高度，設置為double.infinity可以強制在高度上撐滿              constraints      BoxConstraints      添加到child上額外的約束條件              margin      EdgeInsetsGeometry      圍繞在Decoration和child之外的空白區域，不屬于內容區域              transform      Matrix4      設置Container的變換矩陣，類型為Matrix4              child      Widget      Container中的內容Widget

于，padding是包含在content內，而margin則是外部邊界，設置點擊事件的話，padding區域會響應，而margin區域不會響應。

寫一個簡單的例子，體驗一下容器組件Container，主要是加了一個邊框及底色，示例代碼如下：

import 'package:flutter/material.dart';void main() => runApp(DemoApp());class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp(  title: '容器組件demo',  home: Scaffold(  body: Center(   child: Container(   width: 200,   height: 200,   //添加邊框裝飾效果   decoration: BoxDecoration(    color: Colors.blue,    border: new Border.all(    width: 10, //邊框粗細    color: Colors.amberAccent //邊框顏色    ),    borderRadius: const BorderRadius.all(const Radius.circular(5)) //邊框圓角   ),   child: Text(    'Flutter Container Demo',    textAlign: TextAlign.center,    style: TextStyle(fontSize: 20),   ),   ),  ),  ), ); }}

　頁面截圖如下：

講解一下上面的代碼，其實很簡單，就是在body內放置了一個container組件和一個text組件，給容器組件container設置的寬、高、背景色、邊框、邊框圓角、邊框的粗細以及邊框的顏色，然后在容器container內放了一個text組件，并設置的text的對齊方式以及字體大小。

看到頁面可能有人會問，為什么這個容器會在頁面的正中央呢？這是因為body的內容設置的屬性為center居中。

簡單說幾點屬性的可選值比如textAlign（文本的對齊方式）、BorderRadius（圓角）、TextStyle（字體樣式），最直接的還是讓大家看一下截圖，如下：

大家可以從提示中看到，textAlign（文本的對齊方式）有左對齊、右對齊、居中等等，BorderRadius（圓角）有對右上、左上、右下、左下單獨設置圓角的屬性，TextStyle（字體樣式）有顏色、大小、行高、陰影、粗細等等屬性，這里我們就不一一說明了，感興趣的同學可以自己嘗試一下。

Container小結：

說實話這也是我第一次開始用Flutter寫一個簡單的界面Demo，作為一個Android程序員來講，感覺不是很習慣，好在我有weex的開發經歷，寫過很多vue的頁面，其實在Flutter里面寫頁面就是一層一層的child嵌套，用無數個child堆積出一個頁面，現在寫的Demo很簡單，不知道以后頁面復雜了，會不會把自己嵌套懵了.......

?圖片組件

圖片組件（Image）是顯示圖像的組件，Image組件有多種構造函數

　　1.new Image：從ImageProvider獲取圖像

　　2.new Image.asset：加載資源圖片

　　3.new Image.file：加載本地圖片文件

　　4.new Image.newwork：加載網絡圖片

　　5.new Image.memory：加載Uint8List資源圖片

Image組件屬性及描述

屬性      類型      說明              image      ImageProvider      抽象類，需要自己實現獲取圖片數據的操作              width/heyght      double      Image顯示區域的寬度和高度，這里需要把Image和圖片兩個東西區分開，圖片本身有大小，Image Width是圖片的容器，本身也有大小，寬度和高度的配置通常和fit屬性配合使用              fit      BoxFit      圖片填充模式，具體取值見下一個表              color      Color      圖片顏色              colorBlendMode      BlendMode      在對圖片進行手動處理的時候，可能用到圖層混合，如改變圖片的顏色。此屬性可以對顏色進行混合處理。              alignment      Alignment      控制圖片的擺放位置，比如圖片放置在右下角則為Alignment.BottomRight              repeat      ImageRepeat      此屬性可以設置圖片的重復模式，noRepeat為不重復，Repeat為x和y方向重復，repeatX為x方向重復，repeatY為y方向重復              centerSlice      Rect

當圖片需要被拉伸顯示時，centerSlice定義的舉行區域會被拉伸，可以理解成我們在圖片內部定義一個9個點文件用作拉伸，9個點為上、下、左、右、上中、下中、左中、右中、正中

matchTextDirection      bool      matchTextDirection和Directionality配合使用，TextDirection有兩個值，分別為TextDirection.ltr從左向右展示圖片與TextDirection.rtl從右向左展示圖片              gaplessPlayback      bool      當ImageProvider發生變化后，重新加載圖片的過程中，原圖片的展示是否保留，值為true則保留，值為false則不保留，直接空白等待下一張圖片加載

BoxFit取值及描述

取值      描述              BoxFit.fill      全圖顯示，顯示可能拉伸，充滿              BoxFit.contain      全圖顯示，顯示原比例，不需充滿              BoxFit.cover      顯示可能拉伸，可能裁剪，充滿              BoxFit.fitWidth      顯示可能拉伸，可能裁剪，寬度充滿              BoxFit.fitHeight      顯示可能拉伸，可能裁剪，高度充滿              BoxFit.none      原始大小              BoxFit.scaleDown      效果和BoxFit.contain差不多，但是此屬性不允許顯示超過源圖片大小，即可小不可大

按照慣例附上一段Demo：

import 'package:flutter/material.dart';void main() => runApp(DemoApp());class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp(  title: '圖片組件Demo',  home: new Center(  child: Container(   color: Colors.white,   child: new Image.network(   'https://cache.yisu.com/upload/information/20201211/272/44891.png',   width: 200,   height: 200,   ),  ),  ), ); }}

按照慣例附上效果截圖：

上面可以看出，我給從網絡上獲取的圖片設置的寬、高分別為200，但是我并沒有設置圖片的填充模式，那么我把填充模式設置為fitHeight會怎么樣呢？

import 'package:flutter/material.dart';void main() => runApp(DemoApp());class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp(  title: '圖片組件Demo',  home: new Center(  child: Container(   color: Colors.white,   child: new Image.network(   'https://cache.yisu.com/upload/information/20201211/272/44891.png',   width: 200,   height: 200,   fit: BoxFit.fitHeight,   ),  ),  ), ); }}

看完上述內容，你們對Flutter中怎么實現一個容器組件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。