•容器組件

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

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

寫(xiě)一個(gè)簡(jiǎn)單的例子，體驗(yàn)一下容器組件Container，主要是加了一個(gè)邊框及底色，示例代碼如下：

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

　頁(yè)面截圖如下：

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

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

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

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

Container小結(jié)：

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

•圖片組件

圖片組件（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，但是我并沒(méi)有設(shè)置圖片的填充模式，那么我把填充模式設(shè)置為fitHeight會(huì)怎么樣呢？

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

可以看的出來(lái)，高度充滿(mǎn)了，但是水平方向被拉伸了。

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

總結(jié)

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

最新評(píng)論