40个flutter入门实例详解(五)

21.流式布局

Wrap(
        spacing: 8.0, // 主轴(水平)方向间距
        runSpacing: 4.0, // 纵轴（垂直）方向间距
        alignment: WrapAlignment.center, //沿主轴方向居中
        children: <Widget>[
          new Chip(
            //avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
            label: new Text('Hamilton'),
          ),
          new Chip(
            avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
            //超出范围会折叠
            label: new Text('Lafayette'*100),
          ),
          new Chip(
            avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
            label: new Text('Mulligan'),
          ),
          new Chip(
            avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
            label: new Text('Laurens'),
          ),
        ],
      )

效果：

22.层叠布局的定位

 

Stack(
        alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
        children: <Widget>[
          //水平方向和垂直方向都没有定位，所以用Alignment.center的水平和垂直居中
          Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
            color: Colors.red,
          ),
          //定位了水平方向，垂直方向未定位，所以用Alignment.cente的垂直居中
          Positioned(
            left: 18.0,
            child: Text("I am Jack"),
          ),
          //定位了垂直方向，水平方向未定位，所以用Alignment.cente的水平居中
          Positioned(
            top: 18.0,
            child: Text("Your friend"),
          )        
        ],
      ),

效果：

23.层叠布局的堆叠效果

Stack(
        alignment:Alignment.center ,
        fit: StackFit.expand, //未定位widget占满Stack整个空间
        children: <Widget>[
          //已定位，只要定位了一个方向就是已定位
          Positioned(
            left: 18.0,
            child: Text("I am Jack"),
          ),
          //未定位，所以fit属性会对它起作用，就会占满Stack，第一个文本看不到了
          Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
            color: Colors.red,
          ),
          //Stack子元素是堆叠的，第三个文本已定位，会堆叠在第二个文本上
          Positioned(
            top: 18.0,
            child: Text("Your friend"),
          )
        ],
      ),

效果：

24.上下左右对齐

Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: Align(
          //将FlutterLogo定位在Container的右上角
          alignment: Alignment.topRight,
          child: FlutterLogo(
            size: 60,
          ),
        ),
      )

效果：

25.通过座标定位

Container(
        color: Colors.blue[50],
        child: Align(
          //宽度因子为2，总宽度为2*60
          widthFactor: 2,
          //高度因子为3，总高度为3*60
          heightFactor: 3,
          //(0,0)就是矩形的中心点，居于这个点，一个单位就移动一格
          alignment: Alignment(0,1.0),
          child: FlutterLogo(
            size: 60,
          ),
        )
      )

效果：

26.通过座标定位

Container(
        color: Colors.blue[50],
        child: Align(
          //宽度因子为2，总宽度为2*60
          widthFactor: 2,
          //高度因子为3，总高度为3*60
          heightFactor: 3,
          //(0,0)就是矩形的左上角的顶点，居于这个点，一个单位就移动一格
          alignment: FractionalOffset(0,0),
          child: FlutterLogo(
            size: 60,
          ),
        )
      )

效果：

27.边框外的空白填充

class PaddingTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      //上下左右各添加16像素补白
      padding: EdgeInsets.all(16.0),
      child: Column(
        //显式指定对齐方式为左对齐，排除对齐干扰
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            //左边添加8像素补白
            padding: const EdgeInsets.only(left: 8.0),
            child: Text("Hello world"),
          ),
          Padding(
            //上下各添加8像素补白
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text("I am Jack"),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
            child: Text("Your friend"),
          )
        ],
      ),
    );
  }
}

效果：

28.平移

//装饰容器
DecoratedBox(
        decoration:BoxDecoration(color: Colors.red),
        //默认原点为左上角，Text文本左移20像素，向上平移5像素  
        child: Transform.translate(
          offset: Offset(-20.0, -5.0),
          child: Text("Hello world"),
        ),
      )

效果：