Flutter实战小项目（3）----UI界面控件的封装 上

我们看开始的图片知道，我们这是一个底部导航栏。由于Flutter代码的嵌套性比较繁乱，冗杂。所以我们就把每个界面的ListView显示的每个item数据都进行封装。

首页控件的封装：

import 'package:flutter/material.dart';
import 'package:flutter_app_pneumonia/api/news_model.dart';
import 'package:flutter_app_pneumonia/commom/check.dart';
import 'package:flutter_app_pneumonia/commom/date.dart';
import 'package:flutter_app_pneumonia/commom/win_media.dart';
import 'package:flutter_app_pneumonia/widget/view/web_view_page.dart';
import 'package:nav_router/nav_router.dart';


class NewsCard extends StatelessWidget {
  final TimeNewsModel model;
  final EdgeInsetsGeometry padding;
  final bool isNew;

  NewsCard(
    this.model, {
    @required this.padding,
    this.isNew = false,
  });

  @override
  Widget build(BuildContext context) {
    double createTimeDouble =
        strNoEmpty('${model?.createTime}') ? model.createTime / 1000 : 0;
    int createTime = int.parse('${stringDisposeWithDouble(createTimeDouble)}');

    bool isTimeStr =
        DateTime.now().millisecondsSinceEpoch - model?.createTime < 43200000;
    return Container(
      padding: padding,
      alignment: Alignment.centerLeft,
      width: winWidth(context),
      child: new FlatButton(
        onPressed: () => routePush(
          new WebViewPage(model?.sourceUrl ?? 'http://book.flutterj.com/',
              '${model?.title ?? '未知'}'),
        ),
        color: Colors.white,
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
        ),
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Row(
              children: <Widget>[
                new Visibility(
                  visible: isNew,
                  child: new Container(
                    decoration: BoxDecoration(
                        color: Colors.redAccent,
                        borderRadius: BorderRadius.all(Radius.circular(5.0))),
                    alignment: Alignment.center,
                    padding: EdgeInsets.symmetric(horizontal: 3.0, vertical: 2),
                    margin: EdgeInsets.only(right: 5.0),
                    child: new Text(
                      '最新',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                new SizedBox(
                  width:
                      isNew ? winWidth(context) - 120 : winWidth(context) - 70,
                  child: new Text(
                    '${model?.title ?? '未知'}',
                    style:
                        TextStyle(fontSize: 16.0, fontWeight: FontWeight.w600),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                )
              ],
            ),
            new Padding(
              padding: EdgeInsets.symmetric(vertical: 10.0),
              child: new Text(
                '${model?.summary ?? '未知'}',
                maxLines: 5,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Color(0xff999999), fontSize: 12.0),
              ),
            ),
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Text(
                  '时间：${isTimeStr ? model?.pubDateStr ?? '未知' : formatTimeStampToString(createTime) ?? '未知'}',
                  style: TextStyle(color: Color(0xff999999), fontSize: 13.0),
                ),
                new Text(
                  '来源：${model?.infoSource ?? '未知'}',
                  style: TextStyle(color: Color(0xff999999), fontSize: 13.0),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

辟谣控件的封装：

import 'package:flutter/material.dart';
import 'package:flutter_app_pneumonia/api/rumor_model.dart';
import 'package:flutter_app_pneumonia/commom/ui.dart';


class RumorCard extends StatelessWidget {
  final RumorListModel model;
  final EdgeInsetsGeometry margin;
  final GestureTapCallback onTap;

  RumorCard(this.model, {@required this.margin, this.onTap});

  static TextStyle defStyle = TextStyle(
      color: Color(0xff999999), fontSize: 16.0, fontWeight: FontWeight.w600);

  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: margin,
      padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5.0)),
        gradient: LinearGradient(
          colors: [Color(0xff68869e), Color(0xff292f4b)],
        ),
      ),
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Text(
            '${model?.title ?? '未知'}',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w600,
              color: Colors.white,
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          new Container(
            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
            ),
            margin: EdgeInsets.symmetric(vertical: 10.0),
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text('${model?.mainSummary ?? '未知'}', style: defStyle),
                new Text('${model?.summary ?? '未知'}', style: defStyle),
                new Space(),
                new Visibility(
                  visible: model.isOpen,
                  child: new Text(
                    '${model?.body ?? '未知'}',
                    style: TextStyle(color: Color(0xff999999), fontSize: 16.0),
                  ),
                ),
                new GestureDetector(
                  child: new Padding(
                    padding: EdgeInsets.all(3.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        new Text(
                          '${model.isOpen ? '收起' : '展开'}详情',
                          style: TextStyle(
                            color: Color(0xff999999),
                            fontSize: 12.0,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        new Icon(
                          model.isOpen
                              ? Icons.keyboard_arrow_up
                              : Icons.keyboard_arrow_down,
                          color: Color(0xff999999),
                        )
                      ],
                    ),
                  ),
                  onTap: () {
                    if (onTap != null) {
                      onTap();
                    }
                  },
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

防护控件的封装：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_pneumonia/api/protect_model.dart';
import 'package:flutter_app_pneumonia/commom/check.dart';
import 'package:flutter_app_pneumonia/commom/date.dart';
import 'package:flutter_app_pneumonia/commom/ui.dart';
import 'package:flutter_app_pneumonia/config/const.dart';
import 'package:flutter_app_pneumonia/widget/view/web_view_page.dart';
import 'package:nav_router/nav_router.dart';


class ProtectCard extends StatelessWidget {
  final ProtectModel model;
  final EdgeInsetsGeometry margin;

  ProtectCard(this.model, {@required this.margin});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: lineColor, width: 0.2)),
      ),
      margin: margin,
      child: new FlatButton(
        onPressed: () => routePush(
          new WebViewPage(model?.linkUrl ?? 'http://book.flutterj.com/',
              '${model?.title ?? '未知'}'),
        ),
        child: new Row(
          children: <Widget>[
            new Expanded(
              child: new Container(
                padding: EdgeInsets.symmetric(vertical: 25.0),
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Text(
                      '${model?.title ?? '未知'}',
                      style: TextStyle(
                          fontSize: 16.0, fontWeight: FontWeight.w600),
                    ),
                    new Space(height: 15.0),
                    new Text(
                      '${timeHandle(model?.createTime ?? 0)}',
                      style: TextStyle(color: mainTextColor),
                    ),
                  ],
                ),
              ),
            ),
            new ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              child: new CachedNetworkImage(
                imageUrl:
                    '${strNoEmpty(model?.imgUrl) ? model.imgUrl : defImg}',
                height: 68.0,
                width: 91.0,
                fit: BoxFit.cover,
              ),
            )
          ],
        ),
      ),
    );
  }
}

知识控件的封装：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_pneumonia/api/lore_model.dart';
import 'package:flutter_app_pneumonia/commom/check.dart';
import 'package:flutter_app_pneumonia/commom/ui.dart';
import 'package:flutter_app_pneumonia/config/const.dart';
import 'package:flutter_app_pneumonia/widget/view/web_view_page.dart';
import 'package:nav_router/nav_router.dart';


class LoreCard extends StatelessWidget {
  final LoreModel model;
  final EdgeInsetsGeometry margin;

  LoreCard(this.model, {@required this.margin});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: lineColor, width: 0.2)),
      ),
      margin: margin,
      child: new FlatButton(
        onPressed: () => routePush(
          new WebViewPage(model?.linkUrl ?? 'http://book.flutterj.com/',
              '${model?.title ?? '未知'}'),
        ),
        child: new Row(
          children: <Widget>[
            new Visibility(
              visible: strNoEmpty(model?.imgUrl),
              child: new ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                child: new CachedNetworkImage(
                  imageUrl: '${model.imgUrl}',
                  height: 102.0,
                  width: 102.0,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            new Space(),
            new Expanded(
              child: new Container(
                padding: EdgeInsets.symmetric(vertical: 25.0),
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Text(
                      '${model?.title ?? '未知'}',
                      style: TextStyle(
                          fontSize: 16.0, fontWeight: FontWeight.w600),
                    ),
                    new Space(height: 15.0),
                    new Text(
                      '${model?.description ?? '未知'}',
                      style: TextStyle(color: mainTextColor),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这就是我们部分的基本控件封装，后面我们在书写界面的时候会用到。