Flutter經常使用組件（Widget）解析-Container

一個組件它每每包含了一些常見的painting, positioning和sizing這樣的小部件。

Container至關於咱們經常使用的div，在Flutter中用的很是多，如今來看看Container容器中的一些屬性。

一、alignment

這個屬性是針對容器中的child的對其方式。咱們先作一個效果：創建一個Container容器，而後讓容器裏面的文字內容居中對齊。

 

具體代碼以下：

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application.
 @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), home: new CenterDemoPage() , ); } } class CenterDemoPage extends StatefulWidget { @override createState() =>new CenterDemoPageState(); } class CenterDemoPageState extends State<CenterDemoPage> { @override Widget build(BuildContext context){ return new Scaffold( appBar: new AppBar( title: new Text('Container Widget Demo'), ), body: _buildDemo(), ); } Widget _buildDemo() { return new Center( child: Container( child: new Text('Hello world',style: TextStyle(fontSize: 48.0)), alignment: Alignment.center, ), ); } }

 

這時候咱們能夠看見，文本居中顯示在咱們手機屏幕上了，出來居中對其這種方式，還有如下幾種對齊方式可供選擇：

• topCenter：頂部居中對齊
• topLeft：頂部左對齊
• topRight：頂部右對齊
• center：水平垂直居中對齊
• centerLeft：垂直居中水平居左對齊
• centerRight：垂直居中水平居右對齊
• bottomCenter底部居中對齊
• bottomLeft：底部居左對齊
• bottomRight：底部居右對齊

除了對Container容器中的child設置對齊方式，咱們還能夠對容器進行一些寬高顏色屬性的操做，以下：

二、decoration

容器的修飾器，用於背景或者border。

若是在decoration中用了color，就把容器中設置的color去掉，不要重複設置color，設置的邊框樣式是讓四條邊框的寬度爲8px，顏色爲黑色

child: Container( child: new Text('Hello world',style: TextStyle(fontSize: 48.0)), alignment: Alignment.center, width: 300, height: 300, decoration: BoxDecoration( color: Colors.redAccent, border: Border.all( color: Colors.black, width: 8.0, ), ), ),

 

decoration裏面還能夠漸變色：以下

decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment(0.8, 0.0), // 10% of the width, so there are ten blinds.
      colors: [const Color(0xFFFFFFEE), const Color(0xFF999999)], // whitish to gray
      tileMode: TileMode.repeated, // repeats the gradient over the canvas
 ), ),

 

這樣漸變出來的效果就是：

三、margin

margin屬性是表示Container與外部其餘組件的距離。

child: new Text('Hello world',style: TextStyle(fontSize: 48.0)), alignment: Alignment.center, width: 300, height: 300, margin: EdgeInsets.all(20.0),//表示與外部元素的距離是20px decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment(0.8, 0.0), // 10% of the width, so there are ten blinds.
            colors: [const Color(0xFFFFFFEE), const Color(0xFF999999)], // whitish to gray
            tileMode: TileMode.repeated, // repeats the gradient over the canvas
 ), border: Border.all( color: Colors.black, width: 8.0, ), ),

 

咱們爲了有更好的顯示效果，能夠在正在調試的終端下輸入‘ p ’，這樣你就能夠清楚看到Container的佈局了，以下：

固然若是你不想設置每一個外邊距都同樣，想分別設置的話，可使用以下：

 margin: EdgeInsets.fromLTRB(left, top, right, bottom),

 

你能夠分別對每一個邊距設定值。

四、padding

padding就是Container的內邊距，指Container邊緣與Child之間的距離。先試試讓每一個內邊距都爲20

padding: EdgeInsets.all(20.0),

 

效果以下：

若是不想讓每一個內邊距同樣，依據本身的需求來設置，可使用以下方法：

 margin: EdgeInsets.fromLTRB(left, top, right, bottom),

 

和margin的使用幾乎同樣。

五、transform

這個屬性可讓Container容易進行一些旋轉之類的，用法： transform: Matrix4.rotationZ(0.2), 能夠根據本身的須要調整旋轉的角度，效果以下：

六、以上是使用比較多的一些屬性，固然在工做中會有不少的需求，各類各樣的，那就須要咱們更進一步去了解，去研究更深層的屬性用法。

Container Widget用法能夠去官網看更多的屬性用法：一鍵到達