在上一节中，我们开发了主界面框架，主体结构是底部为TabBar，分别对应5个页面：日程、患 者、消息、医院、我的。在这一节中，我们将以日程页面为例，介绍列表控件的使用。
功能需求
在日程页面中将显示医生的日程安排，包括：坐诊、执班、预约、随访、出诊、家访。下面分别来进行介绍：
- 坐诊
坐诊指医生在医院出诊情况，需记录如下信息：医院、科室、级别、开始时间、结束时间，与HIS系统打通后，可以看到就诊患者列表，以及患者的病历。 - 执班
执班是指医生在医院工作但是不出诊情况。 - 预约
预约是指患者主动向医生发起预约，由医生同意后，形成的预约，包括：就诊医院、就诊科室、就诊时间（以半小时为限），患者在预约时可以通过图文及声音形式描述自己的病情，医生可以根据患者自述决定是否接受预约。 - 随访
医生在医院通过电话、短信或图文信息形式，询问患者病情、康复情况和医嘱遵从情况。 - 出诊
医生主动到患者家中进行诊疗活动的计划安排，包括：时间、地点、患者，医生可以在出诊现场查看患者病历，提出建议，并开具处方药品，这部分功能需要与HIS打通。 - 家医
医护人员到患者家中进行医疗活动的服务，如输液、换药等。
这六种情况统一在列表中显示，医生可以选择只看其中的一种，还可以按照时间和类别进行查询，每个类别均有相应的详细信息页面，有些页面还可以查看患者的详细信息，进一步查看患者的病历。
基本功能介绍完之后，下面我们来看如何用Flutter实现这一功能。
列表功能实现
我们把项目中所有的界面中组件，放在components目录下，所以我们需要在项目的lib文件夹下，新建一个components文件夹。
我们第一期先显示出诊和预约两种日程条目，我们首先定义一个日程列表条目的基类ScheduleListItem，该类只相当于一个接口，所以定义为抽象类，如下所示：
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
abstract class ScheduleListItem {}
我们接着来定义出诊日程条目，该条目需要记录时间、地点和患者等信息，如下所示：
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:szys/components/ScheduleListItem.dart';
class OnsiteScheduleListItem implements ScheduleListItem {
final scheduleId;
final String planTime;
final String planAddr;
final int patientId;
final String patientName;
OnsiteScheduleListItem(this.scheduleId, this.planTime, this.planAddr,
this.patientId, this.patientName);
}
接下来我们定义预约条目，该条目需要记录出诊医院、科室、时间、预约状态、患者等信息，如下所示：
class AppointScheduleListItem implements ScheduleListItem {
final int scheduleId;
final int hospitalId;
final String hospitalName;
final int deptId;
final String deptName;
final int appointId;
final String appointTime;
final int appointStateId;
final String appointStateName;
final int patientId;
final String patientName;
AppointScheduleListItem(this.scheduleId, this.hospitalId,
this.hospitalName, this.deptId, this.deptName,
this.appointId, this.appointTime, this.appointStateId,
this.appointStateName, this.patientId, this.patientName);
}
我们定义日程的ListView类ScheduleListView，代码如下所示：
import 'package:flutter/material.dart';
import 'package:szys/components/ScheduleListItem.dart';
import 'package:szys/components/OnsiteScheduleListItem.dart';
import 'package:szys/components/AppointScheduleListItem.dart';
class ScheduleListView extends StatefulWidget {
@override
ScheduleListViewState createState() => new ScheduleListViewState();
}
class ScheduleListViewState extends State<ScheduleListView> {
@override
Widget build(BuildContext context) {
List<ScheduleListItem> items = getScheduleListItems(1001);
return new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
if (item is OnsiteScheduleListItem) {
return buildOnsiteListTile(item);
} else if (item is AppointScheduleListItem) {
return buildAppointListItem(item);
} else {
return new ListTile(
isThreeLine: true,//子item的是否为三行
dense: false,
leading: new CircleAvatar(child: new Text('未知'),),//左侧首字母图标显示，不显示则传null
title: new Text('未知标题'),//子item的标题
subtitle: new Text('未知内容'),//子item的内容
trailing: new Icon(Icons.arrow_right,color: Colors.lightBlue,),//显示右侧的箭头，不显示则传null
);
}
},
);
}
......
}
这里面最重要的就是build方法，由该方法产生界面中可显示的内容。在一开始，我们根据医生的编号获取医生的日程列表，getScheduleListItems函数是用程序写死的列表数据，还没有从服务器上取。
接着我们调用listView.builder方法，在其中的itemBuilder中，我们遍历列表条目，对于每个条目我们判断其类型，如果是出诊类型，则由buildOnsiteScheduleListItem来生成对应的列表条目，如果是预约类型，则由buildAppointScheduleListItem来生成对应的列表条目，如果都不是，则显示未知类型条目。
接下来我们来看生成测试条目的函数实现：
List<ScheduleListItem> getScheduleListItems(int doctorId) {
List<ScheduleListItem> items = new List<ScheduleListItem>();
ScheduleListItem item = new OnsiteScheduleListItem(1,
'2018-07-28 10:00:00', '中关村双榆树小区6#305',
101, '张新中');
items.add(item);
//
item = new OnsiteScheduleListItem(2,
'2018-07-28 10:30:00', '中关村双榆树小区8#205',
102, '王水');
items.add(item);
......
return items;
}
接下来我们看出诊日程列表条目的生成：
Widget buildOnsiteListTile(OnsiteScheduleListItem item) {
return new ListTile(
isThreeLine: true,//子item的是否为三行
dense: false,
leading: new CircleAvatar(child: new Text('出诊'),),//左侧首字母图标显示，不显示则传null
title: new Text('出诊患者：' + item.patientName),//子item的标题
subtitle: new Text('时间：' + item.planTime +
'\r\n地址：' + item.planAddr),//子item的内容
trailing: new Icon(Icons.arrow_right,color: Colors.lightBlue,),//显示右侧的箭头，不显示则传null
);
}
我们再来看预约列表条目生成：
Widget buildAppointListItem(AppointScheduleListItem item) {
return new ListTile(
isThreeLine: true,//子item的是否为三行
dense: false,
leading: new CircleAvatar(child: new Text('预约'),),//左侧首字母图标显示，不显示则传null
title: new Text('' + item.hospitalName + item.deptName),//子item的标题
subtitle: new Text('时间：' + item.appointTime +
'\r\n状态：' + item.appointStateName +
'\r\n患者：' + item.patientName),//子item的内容
trailing: new Icon(Icons.arrow_right,color: Colors.lightBlue,),//显示右侧的箭头，不显示则传null
);
}
我们把日程列表内容的生成和显示已经做好了，接下来我们将其加入我们的日程页面，打开SchedulePage类，将其中的center替换为ScheduleListView
import 'package:szys/components/ScheduleListView.dart';
......
class SchedulePageState extends State<SchedulePage> {
@override
Widget build(BuildContext context) {
//items.add(value);
return new Scaffold(
appBar: new AppBar(
title: new Text('日程管理')
),
body: new Center(
child: new ScheduleListView()
)
);
}
}
我们保存上述修改，直接到手机上来查看，我们将看到一个如下所示的列表页面：
a001.jpg
在这一节中，我们实现了一个最简单的列表页面，当然还没有加下拉刷新和上拉加载更多的功能，我们准备在下一个版本中再添加相应的功能。
在这里我们的列表内容还是静态的，在下一节中，我们将从网络获取数据并显示到界面中，静请期待。
