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"),
        ),
      )

效果：