随诊医生社区医生版极速开发直播1.3

在上一节中，我们开发了主界面框架，主体结构是底部为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

在这一节中，我们实现了一个最简单的列表页面，当然还没有加下拉刷新和上拉加载更多的功能，我们准备在下一个版本中再添加相应的功能。
在这里我们的列表内容还是静态的，在下一节中，我们将从网络获取数据并显示到界面中，静请期待。