•容器組件

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

于，padding是包含在content內(nèi)，而margin則是外部邊界，設(shè)置點(diǎn)擊事件的話，padding區(qū)域會響應(yīng)，而margin區(qū)域不會響應(yīng)。

寫一個簡單的例子，體驗一下容器組件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, //邊框粗細(xì)
    color: Colors.amberAccent //邊框顏色
    ),
    borderRadius: const BorderRadius.all(const Radius.circular(5)) //邊框圓角
   ),
   child: Text(
    'Flutter Container Demo',
    textAlign: TextAlign.center,
    style: TextStyle(fontSize: 20),
   ),
   ),
  ),
  ),
 );
 }
}

　頁面截圖如下：

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

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

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

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

Container小結(jié)：

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

•圖片組件

圖片組件（Image）是顯示圖像的組件，Image組件有多種構(gòu)造函數(shù)

　　1.new Image：從ImageProvider獲取圖像

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

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

　　4.new Image.newwork：加載網(wǎng)絡(luò)圖片

　　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,
   ),
  ),
  ),
 );
 }
}

按照慣例附上效果截圖：

上面可以看出，我給從網(wǎng)絡(luò)上獲取的圖片設(shè)置的寬、高分別為200，但是我并沒有設(shè)置圖片的填充模式，那么我把填充模式設(shè)置為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,
   ),
  ),
  ),
 );
 }
}

可以看的出來，高度充滿了，但是水平方向被拉伸了。

其他的圖片屬性以及填充方式的屬性，我就不一一給大家演示了，我嘗試了很多種組合，發(fā)現(xiàn)還挺有意思的，希望大家也能多多的進(jìn)行嘗試！

總結(jié)

以上所述是小編給大家介紹的Flutter實現(xiàn)容器組件、圖片組件 的代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論