Flutter-Layout

Container

• child(子组件)

• padding(margin)

  • EdgeInsets. ( all( ),fromLTRB( ),only( ) )

• decoration

  • BoxDecoration(边框、圆角、渐变、阴影、背景色、背景图片)

• alignment

  • Alignment(内容对齐)

• transform

  • Matrix4（平移-translate、旋转rotate、缩放-scale、斜切、skew）

• Container没有子组件的时候会尽可能大，但是如果Container的父组件有传递一个无限大（无边界）的约束给它，那Container就会尽可能小。

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Center(//居中组件
      child: Container(
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(2),
        // color: Colors.red, //不能同时使用color和decoration，想都用的话，color只能在decoration里面使用
        alignment: Alignment.center, //容器内容居中
        // transform: Matrix4.rotationZ(2),//旋转，X是竖直方向，Y是水平方向，Z是垂直屏幕方向
        decoration: const BoxDecoration(
          color: Colors.amber,
          borderRadius: BorderRadius.all(Radius.circular(20.0))
        ),
        child: const Text(
          'Hello Kahvia !'
        ),
      ),
    );
  }
}