Flutter移動電商實戰-會員中心_編寫ListTile的通用方法

本文轉載自查看原文 2020-03-24 19:56 617 flutter之listTitle

https://www.cnblogs.com/niceyoo/p/11095846.html

1、界面分析

通過下圖我們可以拆分成 4 部分，頭部、訂單標題區域、訂單列表區域、ListTitle同用部分。

2、UI編寫

2.1、頭部

主要用到了圓形頭像裁剪組件-ClipOval

頂部頭像區域
Widget _topHeader(){
  return Container(
    width: ScreenUtil().setWidth(750),
    padding: EdgeInsets.all(20),
    color: Colors.white,
    child: Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(top: 30),
          width: ScreenUtil().setWidth(155),
          child: ClipOval(
              child:Image.network('https://profile.csdnimg.cn/6/4/0/1_niceyoo')
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: 10),
          child: Text(
            'niceyoo',
            style: TextStyle(
              fontSize: ScreenUtil().setSp(36),
              color: Colors.white
            ),
          ),
        )
      ],
    ),
  );
}

2.2、訂單標題區域

使用 ListTile 編寫，如下是關於 ListTile 組件屬性說明：

const ListTile({
    Key key,
    this.leading,左側widget
    this.title,標題
    this.subtitle,副標題
    this.trailing,右側widget
    this.isThreeLine = false,是否默認3行高度，subtitle不為空時才能使用
    this.dense,設置為true后字體變小
    this.contentPadding,
    this.enabled = true,能否被點擊
    this.onTap,
    this.onLongPress,
    this.selected = false,展示是否默認顯示選中
})

我的訂單標題代碼部分：

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),
      ),
    );
}

2.3、訂單列表區域

同樣使用 ListTile 組件堆起來的：

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.party_mode,
                  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('待評價')
              ],
            ),
          )
        ],
      ),
    );
  }

2.4、ListTitle同用部分

由於這一塊內容格式基本一致，組裝一下 ListTile 的子項：

Widget _myListTile(Icon icon,String title){
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(width: 1,color: Colors.black12)
        )
      ),
      child: ListTile(
        leading: icon,
        title: Text(
            title,
            textAlign: TextAlign.left,
        ),
        trailing: Icon(Icons.arrow_right),
      ),
    );
}

組合 List 布局：

Widget _actionList(){
    return Container(
      margin: EdgeInsets.only(top: 10),
      child: Column(
        children: <Widget>[
          _myListTile(Icon(Icons.settings),'領取優惠卷'),
          _myListTile(Icon(Icons.blur_circular),'已領取優惠卷'),
          _myListTile(Icon(Icons.add_location),'地址管理'),
          _myListTile(Icon(Icons.phone_in_talk),'客服電話'),
          _myListTile(Icon(Icons.add_to_home_screen),'關於我們'),
        ],
      ),
    );
}

//導航組件
  Widget _gridViewItemUI(BuildContext context, item, index){
     return InkWell(
       onTap: (){},
       child: Column(
         children: <Widget>[
           Image.network('http://blogimages.jspang.com/blogtouxiang1.jpg',width:ScreenUtil().setWidth(50)),
        //item['image']
           Text(item)
         ],
       ),
     );
  }
　　背景
  Widget _mlistTileLRLine(Icon leftIcon,Icon rightIcon,String title){
    //Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(width: 1,color: Colors.black12)
          )
      ),
      child: ListTile(
        leading: leftIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
        trailing: rightIcon,
      ),
    );
  }

  Widget _mlistTileLeftLine(String title, Icon leftIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(width: 1,color: Colors.black12)
          )
      ),
      child: ListTile(
        leading: leftIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }
  Widget _mlistTileRightLine(String title, Icon rightIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(width: 1,color: Colors.black12)
          )
      ),
      child: ListTile(
        trailing: rightIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }

Widget _mlistTileLRnoLine(Icon leftIcon,Icon rightIcon,String title){
    //Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
      ),
      child: ListTile(
        leading: leftIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
        trailing: rightIcon,
      ),
    );
  }
  
  Widget _mlistTileLeftnoLine(String title, Icon leftIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
      ),
      child: ListTile(
        leading: leftIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }
  Widget _mlistTileRightnoLine(String title, Icon rightIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
      ),
      child: ListTile(
        trailing: rightIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }

Widget _mlistTileLRnoLine(Icon leftIcon,Icon rightIcon,String title){
    //Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
      ),
      child: ListTile(
        leading: leftIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
        trailing: rightIcon,
      ),
    );
  }

  Widget _mlistTileLeftnoLine(String title, Icon leftIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
      ),
      child: ListTile(
        leading: leftIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }
  Widget _mlistTileRightnoLine(String title, Icon rightIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
      ),
      child: ListTile(
        trailing: rightIcon,
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }





無背景






  Widget _mlistTileLRNoLine(Icon leftIcon,Icon rightIcon,String title){
    //Icons.arrow_right
    return ListTile(
      leading: leftIcon,
      title: Text(
        title,
        textAlign: TextAlign.left,
      ),
      trailing: rightIcon,
    );
  }
  Widget _mlistTileLeftNoLine(Icon leftIcon,String title){
    //Icons.arrow_right
    return ListTile(
      leading: leftIcon,
      title: Text(
        title,
        textAlign: TextAlign.left,
      ),
    );
  }

  Widget _mlistTileRightnoLine(String title, Icon rightIcon){
//    Icons.arrow_right
    return ListTile(
      title: Text(
        title,
        textAlign: TextAlign.left,
      ),
      trailing: rightIcon,
    );
  }

Widget _mlistTileLeftLine(String title, IconData leftIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(width: 1,color: Colors.black12)
          )
      ),
      child: ListTile(
        leading: Icon(leftIcon),
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }
  Widget _mlistTileRightLine(String title, IconData rightIcon){
//    Icons.arrow_right
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(width: 1,color: Colors.black12)
          )
      ),
      child: ListTile(
        trailing: Icon(rightIcon),
        title: Text(
          title,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }

  Widget _mlistTileLRNoLine(IconData leftIcon,IconData rightIcon,String title){
    //Icons.arrow_right
    return ListTile(
      leading: Icon(leftIcon),
      title: Text(
        title,
        textAlign: TextAlign.left,
      ),
      trailing: Icon(rightIcon),
    );
  }
  Widget _mlistTileLeftNoLine(IconData leftIcon,String title){
    //Icons.arrow_right
    return ListTile(
      leading: Icon(leftIcon),
      title: Text(
        title,
        textAlign: TextAlign.left,
      ),
    );
  }

  Widget _mlistTileRightnoLine(String title, IconData rightIcon){
//    Icons.arrow_right
    return ListTile(
      title: Text(
        title,
        textAlign: TextAlign.left,
      ),
      trailing: Icon(rightIcon),
    );
  }

分類: Flutter

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flutter移動電商實戰 Flutter移動電商實戰-建立項目和編寫入口文件 Flutter移動電商實戰-打通底部導航欄 Flutter移動電商實戰-項目學習記錄 Flutter實戰視頻-移動電商-47.詳細頁_Flutter_html插件的使用 Flutter移動電商實戰-切換后頁面狀態的保持AutomaticKeepAliveClientMixin Flutter實戰視頻-移動電商-28.列表頁_商品列表后台接口調試 Java生鮮電商平台-電商會員體系搭建多平台的網站實現單點登錄系統(SSO)的開發思路讓你的會員中心更加統一（參考資料）【0102】【項目實戰】-【Android通用框架設計與完整電商APP開發】-【1】