Flutter入门 - 布局Widget

单布局

Align

center == Align - alignment.center

Align(
      // alignment: Alignment.topCenter,
      // alignment: Alignment.center,
      alignment: Alignment(0, 0),
      child: Icon(
        Icons.pets,
        size: 50,
      ),
    );
复制代码

Padding

实现间距问题有两种实现方式：

1. 使用 Padding，child 包裹对象
2. 使用 Container, child 包裹对象，而且设置 padding 或者 margin

Padding(
            // padding: EdgeInsets.only(bottom: 5),
            // padding: EdgeInsets.all(5),
            // padding: EdgeInsets.fromLTRB(5, 5, 10, 10),
            padding: EdgeInsets.all(5),
            child: Text(
              "江山代有才人出",
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  backgroundColor: Colors.black12),
            ),
          ),
复制代码

Container

注意点：

color 冲突

• color 会与 decoration 的 color 冲突，若是使用 decoration 就把 Container 的 color 注释

aligment 问题

• 若是 alignment 有的话才建立 align ，就变成 Container -> Align -> Text
• 若是没有设置 alignment，默认会把 child（Text） 拉满， 所以看起来 Text 并非中间对齐 Container -> Text
• alignment: Alignment.center, //child 对齐方式 （text 未对齐是由于未填充满, 默认是 center ）

padding

child 内边距

margin

外边距

DEMO

class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.red, //背景颜色
      padding: EdgeInsets.all(20), // child 内边距
      margin: EdgeInsets.all(5), //container 外边距
      width: 200,
      height: 200,
      // 若是 alignment 有的话才建立 align ，就变成 Container -> Align -> Text
      // 若是没有设置 alignment，默认会把 child（Text） 拉满， 所以看起来 Text 并非中间对齐 Container -> Text
      // alignment: Alignment.center, //child 对齐方式 （text 未对齐是由于未填充满, 默认是 center ）
      // 使用 装饰 会和 color 属性冲突，所以使用该对象就在该对象里设置背景颜色
      decoration: BoxDecoration(
          color: Colors.red, //背景颜色
          border: Border.all(color: Colors.blue, width: 5), //边框
          borderRadius: BorderRadius.circular(10), //圆角
          //阴影 是 list, 可添加多个阴影
          boxShadow: [
            BoxShadow(
              color: Colors.orange, //阴影颜色
              offset: Offset(10, 10), //阴影偏移
              spreadRadius: 5, //偏移增加（在offset基础上）
              blurRadius: 10, //模糊度
            )
          ]),

      // child: Text("我是Joho"),
      child: Icon(
        Icons.pets,
        // size: 50,
        color: Colors.white,
      ),
    );
  }
}
复制代码

多布局

Flex

子类有 Row、Column, 经过设置 direction 区分

Row == direction: Axis.horizontal 
Column == direction: Axis.vertical
复制代码

Row

相关属性设置

• mainAxisAlignment: 主轴
• • start 默认 左边
• • spaceBetween 默认是两边间距为0，其他间距评分
• • spaceAround 两边间距是中间间距的一半
• • spaceEvenly 均分间距
• mainAxisSize:
• • max 默认是 max 即占据一行的最大值 == container.width
• • min 去除全部间距
• crossAxisAlignment: 交叉轴
• • start 默认 顶部
• • center 交叉轴中点
• • strench 将交叉轴拉到最大 == container.height

DEMO

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //默认是start，即左边
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          color: Colors.red,
          width: 60,
          height: 50,
        ),
        Container(
          color: Colors.blue,
          width: 80,
          height: 100,
        ),
        Container(
          color: Colors.purple,
          width: 40,
          height: 90,
        ),
        Container(
          color: Colors.orange,
          width: 90,
          height: 120,
        ),
      ],
    );
  }
}

复制代码

Flexible

经常使用属性

• fit 都设置为 FlexFit.tight 时，宽度就失效了(所以使用 Expanded 宽度失效)
• 宽度为 flex 的比例

Flexible(
    flex: 1,
    fit: FlexFit.tight,
    child: Container(
	color: Colors.green,
	width: 10,
        height: 120,
    ),
),
复制代码

Expanded

• Expanded 继承自 Flexible
• Expanded == FlexFit.tight
• Expanded 用的比较多

Expanded(
    flex: 1,
    child: Container(
    color: Colors.black,
    width: 100,
    height: 150,
)),
复制代码

Stack Positioned 绝对定位

Demo

class StackWidget extends StatefulWidget {
  @override
  _StackWidgetState createState() => _StackWidgetState();
}

class _StackWidgetState extends State<StackWidget> {
  bool _isfavor = false;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            border: Border.all(color: Colors.blue, width: 5), //边框
          ),
          child: Image.asset(
            "images/baidu.png",
            width: double.infinity,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
            bottom: 0,
            right: 0,
            left: 0,
            child: Container(
              color: Colors.black26,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Joho",
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.favorite,
                        color: _isfavor ? Colors.red : Colors.white,
                      ),
                      onPressed: () {
                        setState(() {
                          _isfavor = !_isfavor;
                        });
                      })
                ],
              ),
            ))
      ],
    );
  }
}

复制代码