Flutter笔记- Flutter的布局Widget（一）

1. 单子布局组件

1.1. Align组件

1.1.1. Align介绍

• 源码：

const Align({
  Key key,
  this.alignment: Alignment.center, // 对齐方式，默认居中对齐
  this.widthFactor, // 宽度因子，不设置的情况，会尽可能大
  this.heightFactor, // 高度因子，不设置的情况，会尽可能大
  Widget child // 要布局的子Widget
})

1. alignment:

• 范围是（-1， 1），设置位置；

  
  WechatIMG44.jpeg

 @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.red,
      child: Align(
        child: Icon(Icons.people, size: 50,),
        alignment: Alignment(1, 1),
      ),
    );

2. widthFactor和heightFactor作用：

• 因为子组件在父组件中的对齐方式必须有一个前提，就是父组件得知道自己的范围（宽度和高度）；
• 如果widthFactor和heightFactor不设置，那么默认Align会尽可能的大（尽可能占据自己所在的父组件）；
• 如果widthFactor设置为3，那么相对于Align的宽度是子组件跨度的3倍；

---

1.2 Center组件

1.2.1. Center介绍

Center组件继承自Align，只是将alignment设置为Alignment.center。

• 源码：

class Center extends Align {
  const Center({
    Key key,
    double widthFactor,
    double heightFactor,
    Widget child
  }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

• 使用：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.people, size: 36, color: Colors.red),
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}

---

1.3. Padding组件

1.3.1. Padding 介绍

Padding通常用于设置子Widget到父Widget的边距（父组件的内边距或子Widget的外边距）。

• 源码：

const Padding({
  Key key,
  @required this.padding, // EdgeInsetsGeometry类型（抽象类），使用EdgeInsets
  Widget child,
})

1.3.2. 实例

class _YZHomeContentState extends State<YZHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
     //padding: const EdgeInsets.fromLTRB(10, 5, 8, 20),
      child: Text("Hello word", style: TextStyle(fontSize: 20, backgroundColor: Colors.red)),
    );
  }
}

---

1.4. Container组件

Container组件类似于其他Android中的View，iOS中的UIView。

1.4.1. Container介绍

Container在开发中被使用的频率是非常高的，特别是我们经常会将其作为容器组件。

• 源码：

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
})

1.4.2 实例

class _YZHomeContentState extends State<YZHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: 200,
      height: 200,
      alignment: Alignment(-1, -1),
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(20),
      child: Icon(Icons.favorite, size: 50, color: Colors.white,),
     // transform: Matrix4.rotationZ(100),//旋转
    );
  }
}

WechatIMG46.jpeg

1.4.3 BoxDecoration

Container有一个非常重要的属性：decoration;

• 在开发中，我们经常使用它的实现类BoxDecoration来进行实例化;
• 源码：

 const BoxDecoration({
    this.color, // 颜色，会和Container中的color属性冲突
    this.image, // 背景图片
    this.border, // 边框，对应类型是Border类型，里面每一个边框使用BorderSide
    this.borderRadius, // 圆角效果
    this.boxShadow, // 阴影效果
    this.gradient, // 渐变效果
    this.backgroundBlendMode, // 背景混合
    this.shape = BoxShape.rectangle, // 形变
  })

示例：
-添加边框，圆角，阴影；

• 注意：如果在decoration中添加颜色，需要把外部的颜色赋值去掉；

class _YZHomeContentState extends State<YZHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.red,
      width: 200,
      height: 200,
      alignment: Alignment(-1, -1),
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(20),
      child: Icon(Icons.favorite, size: 50, color: Colors.white,),
      // transform: Matrix4.rotationZ(100),//旋转
      decoration: BoxDecoration (
        color: Colors.red,
        border:  Border.all(
          width: 5,
          color: Colors.blue,
        ),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(color: Colors.black,offset: Offset(10,10), spreadRadius: 5, blurRadius: 100),
        ],
      ),
    );
  }
}

WechatIMG47.jpeg