diff --git a/assets/images/ic_album.png b/assets/images/ic_album.png index 0f80105..20cd18d 100644 Binary files a/assets/images/ic_album.png and b/assets/images/ic_album.png differ diff --git a/assets/images/ic_applet.png b/assets/images/ic_applet.png new file mode 100644 index 0000000..5493172 Binary files /dev/null and b/assets/images/ic_applet.png differ diff --git a/assets/images/ic_cards_wallet.png b/assets/images/ic_cards_wallet.png index 751b3ab..4b901da 100644 Binary files a/assets/images/ic_cards_wallet.png and b/assets/images/ic_cards_wallet.png differ diff --git a/assets/images/ic_circle_of_friends.png b/assets/images/ic_circle_of_friends.png new file mode 100644 index 0000000..c2c30f7 Binary files /dev/null and b/assets/images/ic_circle_of_friends.png differ diff --git a/assets/images/ic_collections.png b/assets/images/ic_collections.png index 9227706..f6cd0d9 100644 Binary files a/assets/images/ic_collections.png and b/assets/images/ic_collections.png differ diff --git a/assets/images/ic_emotions.png b/assets/images/ic_emotions.png index 516f12b..e7e45f5 100644 Binary files a/assets/images/ic_emotions.png and b/assets/images/ic_emotions.png differ diff --git a/assets/images/ic_game.png b/assets/images/ic_game.png new file mode 100644 index 0000000..1f86719 Binary files /dev/null and b/assets/images/ic_game.png differ diff --git a/assets/images/ic_goods_cart.png b/assets/images/ic_goods_cart.png new file mode 100644 index 0000000..8070833 Binary files /dev/null and b/assets/images/ic_goods_cart.png differ diff --git a/assets/images/ic_look.png b/assets/images/ic_look.png new file mode 100644 index 0000000..ded5b56 Binary files /dev/null and b/assets/images/ic_look.png differ diff --git a/assets/images/ic_scan.png b/assets/images/ic_scan.png new file mode 100644 index 0000000..5706bf1 Binary files /dev/null and b/assets/images/ic_scan.png differ diff --git a/assets/images/ic_search.png b/assets/images/ic_search.png new file mode 100644 index 0000000..ac75614 Binary files /dev/null and b/assets/images/ic_search.png differ diff --git a/assets/images/ic_settings.png b/assets/images/ic_settings.png index 14c7886..789e6db 100644 Binary files a/assets/images/ic_settings.png and b/assets/images/ic_settings.png differ diff --git a/assets/images/ic_shark_it_off.png b/assets/images/ic_shark_it_off.png new file mode 100644 index 0000000..ff48fb2 Binary files /dev/null and b/assets/images/ic_shark_it_off.png differ diff --git a/assets/images/ic_wallet.png b/assets/images/ic_wallet.png index 5340357..1be02ab 100644 Binary files a/assets/images/ic_wallet.png and b/assets/images/ic_wallet.png differ diff --git a/assets/images/icon_right.png b/assets/images/icon_right.png new file mode 100644 index 0000000..6827bbe Binary files /dev/null and b/assets/images/icon_right.png differ diff --git a/lib/discover_listview_cell.dart b/lib/discover_listview_cell.dart new file mode 100644 index 0000000..84b39ba --- /dev/null +++ b/lib/discover_listview_cell.dart @@ -0,0 +1,106 @@ +import 'package:flutter/material.dart'; + +/* + * 仿微信--------------------------发现 + * + * 详细信息封装 + * + * 添加点击使用的是 GestureDetector 将Container或者Widget包装起来; + * + * (1)onTap: 点击时的回调,需要调用setState(() {}刷新; + * (2)onTap: 点击时的回调,需要调用setState(() {}刷新; + * (3)onTapCancel: 手势取消调用,比如点击后继续滑动到其他地方,这时候不需要跳转,但颜色需要改回白色,需要调用setState(() {}刷新; + * (4)使用Navigator进行界面的跳转,没有参数的话直接调用push()方法; + * (5)固定用法:使用MaterialPageRoute创建回调; + */ + +class DiscoverListViewCellPage extends StatefulWidget { + final String title; + final String subTitle; + final String imageName; + final String subImagename; + + const DiscoverListViewCellPage( + {Key key, this.title, this.subTitle, this.imageName, this.subImagename}) + : assert(title != null, 'title 不能为空'), + assert(imageName != null, 'imageName 不能为空'); + + @override + _DiscoverListViewCellPageState createState() => + _DiscoverListViewCellPageState(); +} + +class _DiscoverListViewCellPageState extends State { + //定义主题颜色 + Color _StateBackColor = Colors.white; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return null; + } + ), + ); + setState(() { + _StateBackColor = Colors.white; + }); + }, + + onTapDown: (TapDownDetails details){ + setState(() { + _StateBackColor = Colors.grey[100]; + }); + }, + + onTapCancel: (){ + print('onTapCance----'); + setState(() { + _StateBackColor = Colors.white; + }); + }, + + child: Container( + + padding: EdgeInsets.all(10), + color: _StateBackColor, + height: 54, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image(width: 30, height: 30, image: AssetImage(widget.imageName)), + SizedBox( + width: 30, + ), + Text(widget.title, + style: TextStyle( + fontSize: 18 + ), + ), + ], + ), + Row( + children: [ + Text(widget.subTitle != null ? widget.subTitle : ''), + SizedBox( + width: 15, + ), + widget.subImagename != null + ? Image(width: 15, image: AssetImage(widget.subImagename)) + : Container(), + SizedBox(width: 15), + Image(width: 20, image: AssetImage('assets/images/icon_right.png')), + ], + ) + ], + ), + + ), + ); + } +} diff --git a/lib/discover_page.dart b/lib/discover_page.dart index 4fe9182..ed82d98 100644 --- a/lib/discover_page.dart +++ b/lib/discover_page.dart @@ -1,4 +1,12 @@ +import 'package:chatting/app_page.dart'; import 'package:flutter/material.dart'; +import 'package:chatting/discover_listview_cell.dart'; +/** + * (1)修改整体的背景色为灰色; + * (2)去除导航栏阴影,将属性值 elevation 设置为0.0; + * (3)分组灰色使用Container; + * (4)分割线使用一个Row,放入两个Container,高度都为0.5,灰色的Container不需要给宽度; + */ class DiscoverPage extends StatefulWidget { @override @@ -6,11 +14,116 @@ class DiscoverPage extends StatefulWidget { } class _DiscoverPageState extends State { + Color themColor = Color.fromRGBO(220, 220, 220, 1); + @override Widget build(BuildContext context) { return Scaffold( + appBar: AppBar( + title: Text("发现"), + centerTitle: true, + elevation: 0.0, //导航栏阴影 + ), + body: Container( + color: themColor, + child: ListView( + children: [ + //******************************************************* + DiscoverListViewCellPage( + title: '朋友圈', + imageName: 'assets/images/ic_circle_of_friends.png', + ), + Container( + //color: Colors.grey, + height: 10, + ), + //******************************************************* + DiscoverListViewCellPage( + title: '扫一扫', + imageName: 'assets/images/ic_scan.png', + ), - body: Text("发现"), - ); + Row( + children: [ + Container( + height: 0.5, + width: 50, + color: Colors.white, + ), + Container( + height: 0.5, + color: Colors.grey, + ) + ], + ), // + DiscoverListViewCellPage( + title: '摇一摇', + imageName: 'assets/images/ic_shark_it_off.png', + ), + + Container( + height: 10, + ), + + DiscoverListViewCellPage( + title: '看一看', + imageName: 'assets/images/ic_look.png', + ), + + Row( + children: [ + Container( + height: 0.5, + width: 50, + color: Colors.white, + ), + Container( + height: 0.5, + color: Colors.grey, + ) + ], + ), + + DiscoverListViewCellPage( + title: '搜一搜', + imageName: 'assets/images/ic_search.png', + ), + Container( + height: 10, + ), //灰色分组 + + DiscoverListViewCellPage( + title: '购物', + imageName: 'assets/images/ic_goods_cart.png', + subTitle: '618限时特惠', + subImagename: 'assets/images/ic_goods_cart.png', + ), + Row( + children: [ + Container( + height: 0.5, + width: 50, + color: Colors.white, + ), + Container( + height: 0.5, + color: Colors.grey, + ) + ], + ), + DiscoverListViewCellPage( + title: '游戏', + imageName: 'assets/images/ic_game.png', + ), + Container( + height: 10, + ), + DiscoverListViewCellPage( + title: '小程序', + imageName: 'assets/images/ic_applet.png', + ) + ], + ), + )); } } diff --git a/lib/personal_page.dart b/lib/personal_page.dart index a1ed5cd..ce89ef1 100644 --- a/lib/personal_page.dart +++ b/lib/personal_page.dart @@ -30,7 +30,10 @@ class _PersonalPageState extends State { //添加图像 Container( margin: const EdgeInsets.only(left: 12.0, right: 15.0), - child: Image.network("http://blogimages.jspang.com/blogtouxiang1.jpg",width: 70.0,height:70.0 ,) + child: Image.network("http://blogimages.jspang.com/blogtouxiang1.jpg",width: 70.0,height:70.0 ) + ), + SizedBox( + width: 30, ), //用户及账号显示 Expanded( @@ -38,7 +41,10 @@ class _PersonalPageState extends State { mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('一秀',style: TextStyle(fontSize: 18.0,color: Color(0xff353535)),), + Text('一秀',style: TextStyle(fontSize: 20.0,color: Color(0xff353535)),), + Container( + height: 10, + ), Text('账号 yixiu',style: TextStyle(fontSize: 14.0,color: Color(0xFFa9a9a9)),) ], ), diff --git a/pubspec.yaml b/pubspec.yaml index c0c417f..ce99a72 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -54,6 +54,16 @@ flutter: - assets/images/ic_cards_wallet.png - assets/images/ic_emotions.png - assets/images/ic_settings.png + - assets/images/ic_circle_of_friends.png + - assets/images/ic_shark_it_off.png + - assets/images/ic_scan.png + - assets/images/ic_look.png + - assets/images/ic_goods_cart.png + - assets/images/ic_search.png + - assets/images/ic_game.png + - assets/images/ic_applet.png + - assets/images/icon_right.png + fonts: - family: appIconFonts fonts: