Flutter - 布局组件-1

1. Align

Center 就是继承于这个组件的

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

Align组件有一个alignment属性,而Center居中比较常用,所以Center直接固定把alignment设置为居中了.
alignment还可以通过坐标参数设置Alignment(x,y),x和y的取值范围是[-1,1],如果超出这个区域,则会约过父组件的显示范围

image.png

2.Container

• Container可以设置宽高度
• Container 如果不设置width和height则它的大小由它的child决定
• 可以设置背景:color,边框border,外边距:margin,内边距padding

class ContainerDemo extends StatelessWidget {
  const ContainerDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      //color 设置背景色
      //这个属性和decoration 不可以同时设置
      // color: Colors.red,

      //设置对齐方式
      // alignment: Alignment.bottomLeft,
      //设置宽高
      width: 200,
      height: 200,

      //设置外边距
      // padding: EdgeInsets.only(left: 100, top: 100),

      //设置外边距
      margin: EdgeInsets.only(left: 100, top: 100),

      //设置旋转
      // transform:Matrix4.rotationZ(pi/2), //左上角作为中心点,沿着Z轴旋转
      // transform:Matrix4.rotationX(pi/3), //上顶边作为中心轴旋转
      // transform:Matrix4.rotationY(pi/4), //左边作为中心轴旋转
      // transform:Transform.rotate(angle: pi/4),

      decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.symmetric(
              vertical: BorderSide(
                  color: Colors.red, width: 2, style: BorderStyle.solid),
              horizontal: BorderSide(
                  color: Colors.red, width: 2.0, style: BorderStyle.solid)),
          image: DecorationImage(
            image: AssetImage(
              'assets/images/WechatIMG231.jpeg',
            ),
            fit: BoxFit.cover,
          ),
          // borderRadius:BorderRadius.circular(100),
        borderRadius:BorderRadius.circular(100),
        // boxShadow: //是一个阴影数组 
      ),

      child: Icon(
        Icons.pets,
        size: 30,
        color: Colors.purple,
      ),
    );

3.Padding

用来设置内边距的,就好像css语法中的设置paading的作用是差不多的

class PaddingDemo extends StatelessWidget {
  const PaddingDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Padding(
           // Padding就是通过这个属性来设置child的内边距的
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          child: Text(
            '你好啊,李银河!',
            style: TextStyle(backgroundColor: Colors.red,fontSize: 30),
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          child: Text(
            '你好啊,李银河!',
            style: TextStyle(backgroundColor: Colors.red,fontSize: 30),
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          child: Text(
            '你好啊,李银河!',
            style: TextStyle(backgroundColor: Colors.red,fontSize: 30),
          ),
        ),
      ]
    );
  }
}

image.png