flutter 布局介绍

一、Container 布局

1.属性

2. 示例

代码如下（示例）：

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.bottomCenter,
      padding: EdgeInsets.all(50.0),
      // color: Colors.red,
      // foregroundDecoration: BoxDecoration(
      //   color: Colors.brown,
      //   border: Border.all(color: Colors.blue, width: 2.0),
      //   borderRadius: BorderRadius.all(Radius.circular(20)),
      // ),
      decoration: BoxDecoration(
        color: Colors.red,
        border: Border.all(color: Colors.blue, width: 2.0),
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: Text('Alignment 对齐方式'),
      width: double.infinity,
      height: double.infinity,
      constraints: BoxConstraints(maxHeight: 500, maxWidth: 300),
      margin: EdgeInsets.all(100),
      transform: Matrix4.rotationZ(-0.1),
    );
  }
}

二、线性布局

1.说明

对于线性布局而言，是由主轴和纵轴之分的；
如果布局是沿水平方向，那么主轴就是指水平方向，纵轴就是垂直方向；
如果布局是沿垂直方向，那么主轴就是指垂直方向，纵轴就是水平方向；
Row和Column都继承自Flex(弹性布局)

2. 属性

3. 示例

class Body extends StatelessWidget {@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow[100],
      alignment: Alignment(0, 0), // 定义中心点为中间位置
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center, // 垂直方向居中
        // crossAxisAlignment: CrossAxisAlignment.start, // 水平方向居中
        textDirection: TextDirection.rtl,
        textBaseline: TextBaseline.alphabetic,
        // verticalDirection: VerticalDirection.down,
        children: [
          Text('vue'),
          Text('react'),
          Text('flutter'),
        ],
      ),
    );
  }
}

三、弹性布局 Flex

1.属性

2. Expanded 的使用

说明： 在flex 中Expanded 占剩下的全部空间

3. 示例

代码如下（示例）：

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Flex(
        direction: Axis.vertical,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        verticalDirection: VerticalDirection.down,
        textDirection: TextDirection.rtl,
        children: [
          Text('vue'),
          Text('react'),
          Expanded(
            child: Container(
              color: Colors.yellow,
              child: Text('flutter'),
            )
          ),
          
        ],
      )
    );
  }
}

四、流式布局

1.说明

为了解决子Widgert的尺寸超出父Widget的时候会报错，可能我们需要的是自动排在下一行，才有了流式布局。

页面报错了

使用流式布局：

2. 属性

3. 示例

代码如下（示例）：

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        alignment: WrapAlignment.end,
        runAlignment: WrapAlignment.spaceAround,
        children: [
          Container(
            width: 100,
            height: 50,
            color: Colors.red,
          ),
          Container(
            width: 100,
            height: 50,
            color: Colors.blue
          ),
          Container(
            width: 100,
            height: 50,
            color: Colors.red,
          ),
          Container(
            width: 100,
            height: 50,
            color: Colors.blue
          ),
          Container(
            width: 100,
            height: 50,
            color: Colors.yellow,
          )
        ],
      )
    );
  }
}

五、层叠布局

1.说明

css 中定位、定位、定位 ， 在Flutter中我们使用Stack和Positioned两个部件组合使用来实现绝对定位。Stack来实现足部件堆叠起来，而Positioned用来根据Stack的四个角来确定子部件的具体位置；

2. 属性

Stack

• alignment：此参数表示如果我们没有定位子部件或者子部件只进行了部分定位时的对齐方式；

  • 没有定位：没有使用Positioned进行定位；

  • 部分定位：特指没有在某一个轴上定位：

      -  left，right为横轴；top，bottom为纵轴；只要包含某个轴上的一个定位属性，那么就算在该轴上有定位
    

• textDirection：和Row的textDirection功能一样，都用于确定alignment对齐时的参考系；

  • textDirection值为TextDirection.ltr，则alignment的start表示左边，end表示右边；也就是从左到右的顺序；
  • textDirection值为TextDirection.rtl，则alignment的start表示右边，end表示左边；也就是从右到左的顺序；

• fix：用来确定没有定位的子部件如何适应Stack的大小；

  • StackFit.loose：使用子部件的大小；
  • StackFit.expand：拉伸到Stack的大小；

• overflow：用来决定如何显示超出了Stack显示区域的子部件；

  • Overflow.clip：子部件超出Stack显示区域的那部分会被裁剪，或者说隐藏；
  • Overflow.visible：超出显示区域的那部分不会被裁剪；

Positioned

• left：距离Stack左边的距离；
• top：距离Stack上边的距离；
• right：距离Stack右边的距离；
• bottom：距离Stack下边的距离；
• width：指定当前需要定位的部件的宽度； height：指定当前需要定位的部件的高度

3. 示例

6. Card-卡片

1. Card属性

代码如下（示例）：

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          margin: EdgeInsets.all(20),
          color: Colors.blue[100],
          shadowColor: Colors.deepOrangeAccent,
          elevation: 20,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
            side: BorderSide(
              color: Colors.yellow,
              width: 3,
            ),
          ),
          child: Column(
            children: [
              ListTile(
                leading: Icon(
                  Icons.accessible_forward,
                  size: 50,
                ),
                title: Text(
                  "张三",
                  style: TextStyle(
                    fontSize: 30,
                  ),
                ),
                subtitle: Text(
                  "学习flutter 第一天",
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}

2.ListTile 属性