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用法能够去官网看更多的属性用法：一键到达