Flutter开发之Container组件

Container

Container 顾名思义是容器，一个拥有绘制、定位、调整大小的 widget，Container也是进行Flutter开发最常用的组件之一。

Container常用的属性有哪些？
child: Text(),//容器子元素
alignment: Alignment.topCenter,//对齐方式
height: 200.0,//容器高度
width: 300.0,//容器宽度
decoration: BoxDecoration(),//装饰
padding:EdgeInsets.fromLTRB(10, 30, 5, 0),//内边距
margin: EdgeInsets.fromLTRB(10, 30, 5, 0),//外边距
transform:Matrix4.skewY(0.5),//旋转效果，绕Y轴倾斜

其中， decoration，以BoxDecoration()为例：
decoration: BoxDecoration(//装饰
color: Colors.yellow,//颜色
border: Border.all(//边框
color: Colors.deepOrange,//边框颜色
width: 2.0,//边框宽度
),
borderRadius: BorderRadius.all(//边框半径
Radius.circular(10),
)
),

demo

测试效果：

image.png

测试代码：

return Center(
          child: Container(
              child: Text(//容器子元素
                'Flutter开发之Container组件',
                textAlign:TextAlign.left,
                overflow:TextOverflow.ellipsis ,
                maxLines: 2,
                textScaleFactor: 1.8,
                style:TextStyle(
                  fontSize: 16.0,
                  color:Colors.red,
                )
              ),
              alignment: Alignment.topCenter,//对齐方式
              height: 300.0,//容器高度
              width: 300.0,//容器宽度
              decoration: BoxDecoration(//装饰线
                color: Colors.yellow,//颜色
                border: Border.all(//边框
                  color: Colors.deepOrange,
                  width: 2.0
                ),
                borderRadius: BorderRadius.all(//边框半径
                //  Radius.circular(150),    //圆形
                  Radius.circular(10),  
                )
              ),
              padding:EdgeInsets.fromLTRB(10, 30, 5, 0),//内边距
              margin: EdgeInsets.fromLTRB(10, 30, 5, 0),//外边距
              // transform:Matrix4.translationValues(100,0,0),//平移,x, y, z
              transform:Matrix4.skewY(0.5),//绕Y轴倾斜
              // transform:Matrix4.rotationZ(0.5),//z轴旋转
              // transform:Matrix4.diagonal3Values(1, 0.5, 1),//缩放,x, y, z
          ),
    );

参考：
https://api.flutter.dev/flutter/widgets/Container-class.html