我们看开始的图片知道,我们这是一个底部导航栏。由于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),
),
],
),
),
),
],
),
),
);
}
}
这就是我们部分的基本控件封装,后面我们在书写界面的时候会用到。