Flutter实战-搭建微信项目（二）

「这是我参与11月更文应战的第2天，活动概况查看：2021最后一次更文应战」

页面简单剖析

首要咱们观察下，发现页面的是一个ListView, 但是在写的时分尽量运用Container来包装一层，这样能够增加拓展性，类比iOS中的TabView.

接着上篇，那咱们直接在发现页面修正：首要在AppBar新增一个centerTitle这个特点专门为安卓规划的，其次默许的AppBar是底部边缘是有一条线的，咱们运用elevation = 0能够躲藏这条线。

  appBar: AppBar(
    centerTitle: true, // 这个特点专为安卓规划
    elevation: 0,
    title: Text('发现'),
  )

修正body为Container包装的ListView, 现在的代码成了这样

class _DiscoverPageState extends State<DiscoverPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        title: Text('发现'),
      ),
      body: Container(
        child: ListView(),
      ),
    );
  }
}

定制Cell

好了，接着来自定义cell。首要默许先写一个无状况的Widget,后边如果涉及到状况会变更的话再修正。剖析：

• 露出四个参数title titleImageName subTitle subImageName，咱们能够运用下面四个来作为参数创立一个结构函数
• 全体是个Row分红左右两块，在主轴左右两边分开MainAxisAlignment.spaceBetween
• 左右两块也是一个子Row.
• sub特点是可选的所以语法能够运用三目运算符
• 左面的图片和文字之间的间距能够运用SizedBox(width: 15)

所以此刻的代码是这样的：

import 'package:flutter/material.dart';
class DiscoverCell extends StatelessWidget {
  final String title;
  final String titleImageName;
  final String? subTitle;
  final String? subImageName;
  DiscoverCell({
    required this.title,
    required this.titleImageName,
    this.subTitle,
    this.subImageName,
  })  : assert(title != null, 'title不能为空'),
        assert(titleImageName != null, 'titleImageName不能为空');
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Image(
                    image: AssetImage(titleImageName),
                    width: 20,
                  ),
                  SizedBox(width: 15),
                  Text(title)
                ],
              )),
          Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  subTitle != null ? Text(subTitle!) : Text(''),
                  subImageName != null  ? Image.asset(subImageName!) : Container(),
                  Image(
                    image: AssetImage('images/icon_right.png'),
                    width: 15,
                  )
                ],
              ))
        ],
      ),
    );
  }
}

回到DiscoverPage页面，LIstView的Chidren设置上面定制的Widget,运行： ​

分割线

分割线能够运用下面的这个代码，Row布局分红两块针对性的设置色彩即可。

Row(children: [
         Container(width: 50, height: 0.5, color: Colors.white),
         Container(
           height: 0.5,
           color: Colors.grey,
         )
       ])

push跳转

点击cell的时分咱们期望跳转到一个新的子页面，此刻修正下cell的Build的方法.。引出了GestureDetector这个新的Widget,里面有一个onTap方法，咱们在这儿处理点击事件。

• onTap
• onTapDown:点下来
• onTapCancel：离开了

这儿的Navigator._of_(context).push的是一个Route<T>的子类MaterialPageRoute。而这个函数的结构需求一个bulider

持续点击发现是这个声明的类型：

final WidgetBuilder builder;
typedef WidgetBuilder = Widget Function(BuildContext context);

所以也就是一个含有BuildContext context参数的一个函数。

 Navigator.of(context).push(MaterialPageRoute(
            builder: (BuildContext context) => DiscoverChildPage(title: title)));

此刻的DiscoverChildPage是一个新的子页面，需求一个参数title来作为appBar的title展现。

import 'package:flutter/material.dart';
class DiscoverChildPage extends StatelessWidget {
  final String title;
  DiscoverChildPage({required this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

无状况修正成有状况

把这儿的cell从无状况修正成有状况的： class _DiscoverCellState extends State<DiscoverCell>{} 在这儿无法访问DiscoverCell里面的成员，此刻能够运用widget.title。