增加发现页面

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<DiscoverListViewCellPage> {
+  //定义主题颜色
+  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: <Widget>[
+            Row(
+              children: <Widget>[
+                Image(width: 30, height: 30, image: AssetImage(widget.imageName)),
+                SizedBox(
+                  width: 30,
+                ),
+                Text(widget.title,
+                style: TextStyle(
+                  fontSize: 18
+                ),
+                ),
+              ],
+            ),
+            Row(
+              children: <Widget>[
+                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')),
+              ],
+            )
+          ],
+        ),
+
+      ),
+    );
+  }
+}

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<DiscoverPage> {
+  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: <Widget>[
+              //*******************************************************
+              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: <Widget>[
+                  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: <Widget>[
+                  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: <Widget>[
+                  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',
+              )
+            ],
+          ),
+        ));
   }
 }

lib/personal_page.dart

@@ -30,7 +30,10 @@ class _PersonalPageState extends State<PersonalPage> {
                   //添加图像
                   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<PersonalPage> {
                       mainAxisAlignment: MainAxisAlignment.center,
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[
-                        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)),)
                       ],
                     ),

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: