怎么在Flutter中實現容器組件和圖片組件

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

?容器組件

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

于，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組件屬性及描述

BoxFit取值及描述

按照慣例附上一段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://flutter.io/images/homepage/header-illustration.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://flutter.io/images/homepage/header-illustration.png',
   width: 200,
   height: 200,
   fit: BoxFit.fitHeight,
   ),
  ),
  ),
 );
 }
}

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