第五章：Flutter之wechatDemo（发现页面）

上一节为大家介绍了主框架的搭建，这节课将为大家搭建"发现"页面的效果

1.创建listview,同时为了方便调试，我们将homePage中的currentIndex 改为 2

import 'package:flutter/material.dart';

class DiscoverPage extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<DiscoverPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('发现'),
      ),
      body: ListView(
        children: [
          Text("1"),
          Text("2"),
          Text("3"),
          Text("4"),
          Text("5"),
        ],
      )
    );
  }
}

run

12.png

2.我来创建具体的cell吧

image.png

首先我们先写死一个静态页面，数据的填充，我们之后再改进

import 'package:flutter/material.dart';

class DiscoverCell extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        height: 55,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //left
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Image.asset('images/朋友圈.png',width: 20,),
                  SizedBox(width: 10,),
                  Text('朋友圈')
                ],
              ),

            ),
            //right
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Text('我是副标题'),
                  SizedBox(width: 10,),
                  Image.asset('images/badge.png',width: 10,),
                  SizedBox(width: 10,),
                  Image.asset('images/icon_right.png',width: 15,),
                ],
              ),
            ),

          ],
        ),


    );
  }
}

run

14.png

3.cell属性关联

import 'package:flutter/material.dart';

class DiscoverCell extends StatelessWidget {

  final String title;//标题
  final String iconUrl;//图标
  final String subTitle;//副标题
  final String notiIcomUrl;//消息红点


  //构造函数
  DiscoverCell({
    this.title,
    this.iconUrl,
    this.subTitle,
    this.notiIcomUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        height: 55,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //left
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Image.asset(iconUrl,width: 20,),
                  SizedBox(width: 10,),
                  Text(title)
                ],
              ),
            ),
            //right
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  (subTitle != null)? Text(subTitle) : Text(''),//判断是否存在副标题
                  (notiIcomUrl != null)?  Image.asset(notiIcomUrl,width: 10,) : Container(),//判断是否存在消息红点
                  Image.asset('images/icon_right.png',width: 15,),
                ],
              ),
            ),
          ],),);
  }
}

接着修改discoverPage

body: ListView(
        children: [
          DiscoverCell(title: '朋友圈',iconUrl: 'images/朋友圈.png',notiIcomUrl: 'images/badge.png'),
          SizedBox(height: 5,),//间隔盒子
          DiscoverCell(title: '扫一扫',iconUrl: 'images/扫一扫.png',),
          //分割线
          Container(height: 1,color: Color.fromARGB(222, 222, 222, 222),child: Row(children: [SizedBox(width: 40,height: 1,child: Container(width: 50,color: Colors.white,),)],),),
          DiscoverCell(title: '搜一搜',iconUrl: 'images/搜一搜.png',),
          SizedBox(height: 5,),//间隔盒子
          DiscoverCell(title: '摇一摇',iconUrl: 'images/摇一摇.png',),
          //分割线
          Container(height: 1,color: Color.fromARGB(222, 222, 222, 222),child: Row(children: [SizedBox(width: 40,height: 1,child: Container(width: 50,color: Colors.white,),)],),),
          DiscoverCell(title: '游戏',iconUrl: 'images/游戏.png',notiIcomUrl: 'images/badge.png'),
          SizedBox(height: 5,),//间隔盒子
          DiscoverCell(title: '附近的人',iconUrl: 'images/附近的人icon.png',subTitle: '查找有缘人',),
          SizedBox(height: 5,),//间隔盒子
          DiscoverCell(title: '购物',iconUrl: 'images/购物.png',),
          //分割线
          Container(height: 1,color: Color.fromARGB(222, 222, 222, 222),child: Row(children: [SizedBox(width: 40,height: 1,child: Container(width: 50,color: Colors.white,),)],),),
          DiscoverCell(title: '看一看',iconUrl: 'images/看一看icon.png',),
          //DiscoverCell(),
        ],
      )

分隔线

 Container(height: 1,color: Color.fromARGB(222, 222, 222, 222),child: Row(children: [SizedBox(width: 40,height: 1,child: Container(width: 50,color: Colors.white,),)],),),

run

15.png

4.点击cell进行页面跳转，创建发现页面的子页面discover_child_page

import 'package:flutter/material.dart';

class DiscoverChildPage extends StatelessWidget {
  //标题
  final String headTitle;

  DiscoverChildPage({
    this.headTitle,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(headTitle),
      ),
    );
  }
}

5.为cell添加点击事件

image.png

run 点击每个cell，查看打印效果

image.png

5.点击事件变更为页面跳转

onTap: (){
        Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => DiscoverChildPage(headTitle: title,)),
        );
//等价
//        Navigator.of(context).push(
//          MaterialPageRoute(builder: (context) {
//            return DiscoverChildPage(headTitle: title,);
//          }),
//        );
//等价
//        Navigator.push(context,
//          MaterialPageRoute(builder: (context){
//            return DiscoverChildPage(headTitle: title,);
//          }),
//        );
      },

总结：至此我们已经完成了发现页面的初步搭建，完结

✿✿ヽ(°▽°)ノ✿