Flutter實戰視頻-移動電商-65.會員中心_訂單區域UI佈局

65.會員中心_訂單區域UI佈局

個人訂單區域

member.dart寫個人標題的方法

佈局使用瓦片佈局

先作修飾，decoration顏色的背景，下邊線的樣式

 //個人訂單標題
  Widget _orderTitle(){
    return Container(
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(width: 1,color: Colors.black12)
        )
      ),
      child: ListTile(
        leading: Icon(Icons.list),
        title: Text('個人訂單'),
        trailing: Icon(Icons.arrow_right),
      ),
    );
  }

 

 

繼續下面

這裏是個Row橫向的佈局

設置邊距 寬度和高度和顏色。

而後裏面用Row佈局，佈局裏面每個用Container

作好一個Container佈局，而後其餘的三個就能夠直接複製

 

Widget _orderType(){
    return Container(
      margin: EdgeInsets.only(top:5),
      width: ScreenUtil().setWidth(750),
      height: ScreenUtil().setHeight(150),
      padding: EdgeInsets.only(top: 20),
      color:Colors.white,
      child: Row(
        children: <Widget>[
          Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(
                  Icons.query_builder,
                  size: 30,
                ),
                Text(
                  '待付款'
                )
              ],
            ),
          ),
           Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(
                  Icons.query_builder,
                  size: 30,
                ),
                Text(
                  '待發貨'
                )
              ],
            ),
          ),
           Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(
                  Icons.directions_car,
                  size: 30,
                ),
                Text(
                  '待收貨'
                )
              ],
            ),
          ),
           Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(
                  Icons.content_paste,
                  size: 30,
                ),
                Text(
                  '待評價'
                )
              ],
            ),
          )
        ],
      ),
    );
  }

 

效果展現