Flutter基础组件-Container

效果图

效果图

Container属性列表

• alignment：child的对齐方式，九种对其方式，上左，上中，上右，中左，正中，中右，下左，下中，下右
• padding：内部间隔区域，可响应点击
• margin：外部间隔区域，不响应点击
• color：设置背景颜色，不能和 decoration一起用
• decoration：设置装饰器，可设置边框、主体、阴影等
• foregroundDecoration：设置前景装饰器，可设置边框、主体、阴影等
• width：view宽
• height：view高
• constraints：设置子view约束，限制最大最小宽高
• transform：设置矩阵变换
• child：子view

Container示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyContainer extends StatefulWidget{
  @override
  State createState() => _MyContainerState();
}

class _MyContainerState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,//child的对齐方式 Alignment.topLeft,topCenter,topRight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight
      padding: EdgeInsets.all(3.0),//内部间隔区域，可响应点击
      margin: EdgeInsets.all(50),//外部间隔区域，不响应点击
//      color: Color(0xffffffff), //设置颜色，不能和 decoration一起用
      decoration: new BoxDecoration(//设置装饰器，可设置边框、主体、阴影等
        color:  Color(0xffffffff),
        border:Border.all(color:Color(0xffd9d9d9)),
        borderRadius: BorderRadius.circular(10.0),
        boxShadow:[
          BoxShadow(
              color: Color(0xfff4f4f4),
              offset: Offset(10,10)
          ),
        ],
      ),
      foregroundDecoration: new BoxDecoration(//设置前景装饰器，可设置边框、主体、阴影等
        color: Color(0x00000000),
      ),
      width: 300,//view宽
      height: 100,////view高
      constraints:BoxConstraints(minHeight: 80,minWidth: 80),//约束布局，控制子view的大小
      transform: Matrix4.rotationZ(0.1),//设置矩阵变换
      child: Text('这是一个 Container'),//包含的子view
    );
  }

}