一個組件它往往包含了一些常見的painting, positioning和sizing這樣的小部件。
Container相當於我們常用的div，在Flutter中用的非常多，現在來看看Container容器中的一些屬性。
這個屬性是針對容器中的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設置對齊方式，我們還可以對容器進行一些寬高顏色屬性的操作，如下：
2、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
), ),
這樣漸變出來的效果就是：
3、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),
你可以分別對每個邊距設定值。
4、padding
padding就是Container的內邊距，指Container邊緣與Child之間的距離。先試試讓每個內邊距都為20
padding: EdgeInsets.all(20.0),
效果如下：
如果不想讓每個內邊距一樣，依據自己的需求來設置，可以使用如下方法：
margin: EdgeInsets.fromLTRB(left, top, right, bottom),
和margin的使用幾乎一樣。
5、transform
這個屬性可以讓Container容易進行一些旋轉之類的，用法： transform: Matrix4.rotationZ(0.2), 可以根據自己的需要調整旋轉的角度，效果如下：
6、以上是使用比較多的一些屬性，當然在工作中會有很多的需求，各種各樣的，那就需要我們更進一步去了解，去研究更深層的屬性用法。
Container Widget用法可以去官網看更多的屬性用法：一鍵到達