Flutter 仿微信excel功能

前言

在项目开发中，报表是一个很常见的功能，有利于使用者一眼能看出数据的趋势与规律，非常适合数量大，且种类繁多的数据查看与对比。虽然Flutter提供了 Table，DataTable等相关的组件，但是在实际项目开发中，功能、扩展性、实用性、灵活性等十分有限，可以说几乎不可能不经调整修改能直接用于生产项目，笔者这次将详细讲解如何运用Flutter技术开发报表。

效果预览

需求实现

实现需求	是否实现
Android、iOS跨平台	✅
首列固定	✅
标题行固定	✅
首列跟随内容列上下滑动联动	✅
标题行跟随内容行左右滑动联动	✅

开发环境

所需环境	功能描述
Flutter 1.22.6.stable	跨平台的UI框架
flutter_screenutil: 4.0.4+1	Flutter屏幕适配插件

在 pubspec.yaml 文件中添加依赖

flutter_screenutil: 4.0.4+1

技术分析

将整个报表分为4个部分，左上的固定列标题，左下的固定列、右上的标题行、右下的内容。由此看出，Table、Datatable 是不适用于这种功能的开发，所以笔者决定用 ListView来实现这个需求。固定列、标题行、内容3个部分采用ListView，左边的固定列是垂直滑动的ListView，右上面的标题行是 水平滑动的ListVie，右下面的是 既可以垂直滑动，又可以水平滑动的ListView，而左上的固定列标题使用普通的组件。这样就可以实现仿Excel的报表。功能分解可以参考如下图所示

技术实现

初步定义组件

组件所需要的无非是 数据源、标题行，另外增加了一些样式参数，代码如下

class DataGrid extends StatefulWidget {final List<Map> datas; // 数据源final List<String> titleRow; // 标题行final Alignment cellAlignment; // 单元格对齐方式final EdgeInsets cellPadding; // 单元格 内边距final Color borderColor; // 边框颜色final String fixedKey;	// 固定列的keyfinal String fixedTitle;	 // 固定列的标题const DataGrid({Key key,this.datas,this.titleRow,this.fixedTitle,this.fixedKey,this.cellAlignment,this.cellPadding,this.borderColor,}) : super(key: key);@override_DataGridState createState() => _DataGridState();
}
......

单元格

单元格的渲染分为两种，被合并的单元格与普通的单元格。普通单元格需要有四面边框，而被合并的单元格则需要去除相对应的边框。

定义渲染边框的方法，控制单元格的边框渲染，代码如下所示

Border _buildBorderSide({bool hideLeft = false, bool hideRight = false, bool hideTop = false, bool hideBottom = false}) {final double borderWidth = 0.33;return Border(bottom: hideBottom ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? widget.LIGHT_GREY),top: hideTop ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? widget.LIGHT_GREY),right: hideRight ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? widget.LIGHT_GREY),left: hideLeft ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? widget.LIGHT_GREY));
}

构件单元格的方法如下所示

Widget _buildCell(String title, {bool hideLeft = false, bool hideRight = false, bool hideTop = false,bool hideBottom = false, bool hideTitle = false, Color bgColor}) {return IntrinsicHeight(child: Container(alignment: widget.cellAlignment ?? Alignment.center,padding: widget.cellPadding ?? EdgeInsets.fromLTRB(0, 15.0.h, 0, 15.h),decoration: BoxDecoration(border: _buildBorderSide(hideLeft: hideLeft,hideRight: hideRight,hideTop: hideTop,hideBottom: hideBottom),color: bgColor),child: Opacity(opacity: hideTitle ? 0 : 1,child: Text(title,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 14, color: widget.borderColor ?? ColorHelper.TEXT_BLACK),))));
}

温馨提示：上面代码的 IntrinsicHeight 组件可能用的很少，这是一个智能根据子组件的高度自动调整的组件，类似于 Android 的 wrap_content

构件空单元格

  Widget _buildEmptyCell() {return IntrinsicHeight(child: Container(alignment: widget.cellAlignment ?? Alignment.center,padding: widget.cellPadding ?? EdgeInsets.fromLTRB(0, 20.0.h, 0, 20.h),decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 0.33, color: widget.borderColor ?? ColorHelper.LIGHT_GREY),top: BorderSide(width: 0.33, color: widget.borderColor ?? ColorHelper.LIGHT_GREY),right: BorderSide(width: 0.33, color: widget.borderColor ?? ColorHelper.LIGHT_GREY),left: BorderSide(width: 0.33, color: widget.borderColor ?? ColorHelper.LIGHT_GREY),)),child: Text('',maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 14, color: widget.borderColor ?? ColorHelper.TEXT_BLACK),)));}

技术难点

1. 如何让垂直滑动内容的时候联动标题列移动
2. 如何让水平滑动内容的时候联动标题行移动
3. 如何让内容既可以水平滑动又可以垂直滑动

解决方案

针对问题 1， 2 ，每个可滚动的组件都可以用一个 ScrollController 来控制、监听、记录滚动的位置，所以我们可以利用ScrollController来实现联动 。定义4个 ScrollController 对象，一个负责固定列，一个负责标题行、一个负责内容的横向滚动，一个负责内容的纵向滚动，代码如下

//定义可控制滚动组件
ScrollController firstColumnController = ScrollController();
ScrollController secondColumnController = ScrollController();ScrollController firstRowController = ScrollController();
ScrollController secondedRowController = ScrollController();// 固定列的宽度final double columnWidth = 780.0.w;

在 initState方法里面，绑定各个ScrollController对象的联动关系

  @overridevoid initState() {super.initState();//监听固定列滚动firstColumnController.addListener(() {if (firstColumnController.offset != secondColumnController.offset) {secondColumnController.jumpTo(firstColumnController.offset);}});//监听第内容行的纵向滚动secondColumnController.addListener(() {if (firstColumnController.offset != secondColumnController.offset) {firstColumnController.jumpTo(secondColumnController.offset);}});//监听标题行的滚动firstRowController.addListener(() {if (firstRowController.offset != secondedRowController.offset) {secondedRowController.jumpTo(firstRowController.offset);}});//监听第内容行的横向滚动secondedRowController.addListener(() {if (firstRowController.offset != secondedRowController.offset) {firstRowController.jumpTo(secondedRowController.offset);}});}

固定列与固定单元格 代码如下

                Container(width: 300.w,height: 1900.h,child: Column(children: [Table(children: [TableRow(children: [_buildCell('${widget.fixedTitle ?? ''}',hideBottom: true,hideTop: true,hideLeft: true,bgColor: ColorHelper.LIGHT_GREY),]),],),Expanded(child: ListView(controller: firstColumnController,children: [Table(children: _buildTableColumnOne()),],),),],),),

实现既可以纵向滚动又可以横向滚动的内容

针对问题3，可以采用 ListView内部嵌套 SingleChildScrollView组件来实现内容的既可以横向滚动又可以纵向滚动，SingleChildScrollView负责横向滚动，ListView负责纵向滚动，并且SingleChildScrollView必须有一个确定的宽度。具体代码可参考如下所示

ListView(controller: thirdColumnController,children: [SingleChildScrollView(controller: secondedRowController,scrollDirection: Axis.horizontal,child: IntrinsicWidth(child: Container(padding: EdgeInsets.only(bottom: 10.h),// 避免行数未填满时，下边框消失child: ...width: 1000.w)))],
)

完整代码如下

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_study/common/util/color_helper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';/// 数据表格
class DataGrid extends StatefulWidget {final List<Map> datas; // 数据源final List<String> titleRow; // 标题行final Alignment cellAlignment; // 单元格对齐方式final EdgeInsets cellPadding; // 单元格 内边距final Color borderColor; // 边框颜色final String fixedKey;	// 固定列的keyfinal String fixedTitle;	 // 固定列的标题const DataGrid({Key key,this.datas,this.titleRow,this.fixedTitle,this.fixedKey,this.cellAlignment,this.cellPadding,this.borderColor,}) : super(key: key);@override_DataGridState createState() => _DataGridState();
}class _DataGridState extends State<DataGrid> {final List<String> fixedColumn = [];final List<Map> datas = [];//定义可控制滚动组件final ScrollController firstColumnController = ScrollController();final ScrollController thirdColumnController = ScrollController();final ScrollController firstRowController = ScrollController();final ScrollController secondedRowController = ScrollController();// 非浮动的列宽final double columnWidth = 390;final Color LIGHT_GREY = Color.fromRGBO(244, 247, 252, 1);@overridevoid initState() {super.initState();//监听第一列变动firstColumnController.addListener(() {if (firstColumnController.offset != thirdColumnController.offset) {thirdColumnController.jumpTo(firstColumnController.offset);}});//监听第三列变动thirdColumnController.addListener(() {if (firstColumnController.offset != thirdColumnController.offset) {firstColumnController.jumpTo(thirdColumnController.offset);}});//监听第一行变动firstRowController.addListener(() {if (firstRowController.offset != secondedRowController.offset) {secondedRowController.jumpTo(firstRowController.offset);}});//监听第二行变动secondedRowController.addListener(() {if (firstRowController.offset != secondedRowController.offset) {firstRowController.jumpTo(secondedRowController.offset);}});widget.datas.forEach((e) {fixedColumn.add(e[widget.fixedKey].toString());e.remove(widget.fixedKey);datas.add(e);});}@overrideWidget build(BuildContext context) {return Container(color: Colors.white,child: NotificationListener(child: Scaffold(body: Container(height: 1900.h,width: 1080.w,color: ColorHelper.DAY_TEXT,child: Row(children: [Container(width: 300.w,height: 1900.h,child: Column(children: [Table(children: [TableRow(children: [_buildCell('${widget.fixedTitle ?? ''}',hideBottom: true,hideTop: true,hideLeft: true,bgColor: ColorHelper.LIGHT_GREY),]),],),Expanded(child: ListView(controller: firstColumnController,children: [Table(children: _buildTableColumnOne()),],),),],),),//其余列Expanded(child: Container(child: Column(children: [SingleChildScrollView(scrollDirection: Axis.horizontal, //horizontalcontroller: firstRowController,child: IntrinsicWidth(child: Container(child: Table(children: _buildTableFirstRow()),width: 1000.w,))),Expanded(child: ListView(controller: thirdColumnController,children: [SingleChildScrollView(controller: secondedRowController,scrollDirection: Axis.horizontal,child: IntrinsicWidth(child: Container(padding: EdgeInsets.only(bottom: 10.h),// 避免行数未填满时，下边框消失child: Table(children: _buildTableRow()),width: 1000.w)))],),),]),),),],),)),),);}/** 创建固定列* 比如时间列固定，只会响应垂直滑动* 当为非日报时，会多一行的单元行占位*/List<TableRow> _buildTableColumnOne() {List<TableRow> returnList = [];int i = 0;fixedColumn?.forEach((e) {returnList.add(_buildSingleColumnOne(e, bgColor: i % 2 == 0 ? LIGHT_GREY : ColorHelper.LIGHT_GREY));i++;});return returnList;}/** 创建数据行* 渲染数据行*/List<TableRow> _buildTableRow() {List<TableRow> returnList = [];int i = 0;this.datas.forEach((e) {Color bgColor = i % 2 == 0 ? LIGHT_GREY : ColorHelper.LIGHT_GREY;List<String> vals = [];e.values.forEach((v) {vals.add(v.toString());});returnList.add(_buildRow(vals, isTitle: false, bgColor: bgColor));i++;});return returnList;}/** 创建第一行表头* 该数据行只会左右滑动，上下滑动时在最上面浮动* 当为非日报时，多生成一个标题行*/List<TableRow> _buildTableFirstRow() {List<TableRow> returnList = [];returnList.add(_buildRow(widget.titleRow, isTitle: true));return returnList;}/** 创建一列* 左固定的列的第一行，这个单元格不会有任何的滑动*/TableRow _buildSingleColumnOne(String text,{bool isTitle = false, Color bgColor}) {return TableRow(children: [_buildCell(isTitle ? '${widget.fixedTitle ?? ''}' : '${text ?? ''}',bgColor: bgColor,hideLeft: true,hideTop: true,hideBottom: true,),]);}/** 构建每行数据的单元格* 当为月报与年报的时候，一个通道拥有3个单元格*/TableRow _buildRow(List<String> textList,{bool isTitle = false, Color bgColor = ColorHelper.LIGHT_GREY}) {List<Widget> wd = [];textList.forEach((e) {wd.add(_buildCell(e, hideRight: true,hideTop: true,hideBottom: true,hideLeft: true,bgColor: bgColor));});return TableRow(children: wd);}/** 构建月报与年报时的 第二行标题*/TableRow _buildSecondTitleRow() {List<Widget> wd = [];widget.titleRow.forEach((e) {wd.add(_buildCell('平均值', bgColor: ColorHelper.LIGHT_GREY,hideRight: true,hideTop: true,hideBottom: true));wd.add(_buildCell('最大值', bgColor: ColorHelper.LIGHT_GREY,hideRight: true,hideTop: true,hideBottom: true,hideLeft: true));wd.add(_buildCell('最小值', bgColor: ColorHelper.LIGHT_GREY,hideLeft: true,hideTop: true,hideBottom: true));});return TableRow(children: wd);}/** 构建空的单元格*/Widget _buildEmptyCell() {return IntrinsicHeight(child: Container(alignment: widget.cellAlignment ?? Alignment.center,padding: widget.cellPadding ??EdgeInsets.fromLTRB(0, 20.0.h, 0, 20.h),decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 0.33,color: widget.borderColor ?? ColorHelper.LIGHT_GREY),top: BorderSide(width: 0.33,color: widget.borderColor ?? ColorHelper.LIGHT_GREY),right: BorderSide(width: 0.33,color: widget.borderColor ?? ColorHelper.LIGHT_GREY),left: BorderSide(width: 0.33,color: widget.borderColor ?? ColorHelper.LIGHT_GREY),)),child: Text('',maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 14,color: widget.borderColor ?? ColorHelper.TEXT_BLACK),)));}// 构建被合并的单元格Widget _buildCell(String title, {bool hideLeft = false, bool hideRight = false, bool hideTop = false,bool hideBottom = false, bool hideTitle = false, Color bgColor}) {return IntrinsicHeight(child: Container(alignment: widget.cellAlignment ?? Alignment.center,padding: widget.cellPadding ??EdgeInsets.fromLTRB(0, 15.0.h, 0, 15.h),decoration: BoxDecoration(border: _buildBorderSide(hideLeft: hideLeft,hideRight: hideRight,hideTop: hideTop,hideBottom: hideBottom),color: bgColor),child: Opacity(opacity: hideTitle ? 0 : 1,child: Text(title,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 14,color: widget.borderColor ?? ColorHelper.TEXT_BLACK),))));}Border _buildBorderSide({bool hideLeft = false, bool hideRight = false, bool hideTop = false, bool hideBottom = false}) {final double borderWidth = 0.33;return Border(bottom: hideBottom ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? LIGHT_GREY),top: hideTop ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? LIGHT_GREY),right: hideRight ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? LIGHT_GREY),left: hideLeft ?BorderSide.none:BorderSide(width: borderWidth, color: widget.borderColor ?? LIGHT_GREY));}
}

使用该组件

代码如下

import 'package:flutter/material.dart';
import 'package:flutter_study/common/ui/datagrid.dart';class TestScrollView extends StatefulWidget {const TestScrollView({Key key}) : super(key: key);@override_TestScrollViewState createState() => _TestScrollViewState();
}class _TestScrollViewState extends State<TestScrollView> {List<Map> datas = [];@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {datas = _getData();return Scaffold(appBar: AppBar(title: Text('报表'),),body: _buildBody(),);}Widget _buildBody() {return Container(child: DataGrid(datas: datas,fixedKey: 'day',fixedTitle: '日期',titleRow: ['今日', '昨日', '前日', '本周', '本月', '本年'],),);}// 生成数据源List<Map> _getData() {List<Map> datas = [];for (int i = 0; i < 100; i++) {Map data = {};data['day'] = '2020-06-12';data['today'] = 49899;data['yesterday'] = 49899;data['beforeday'] = 49899;data['week'] = 49899;data['month'] = 49899;data['year'] = 49899;datas.add(data);}return datas;}
}

这样就能实现预览中的效果，读者可以根据实际业务场景调整代码。

注意事项

如果是既可以横向滑动又可以纵向滑动的组件必须确定 一个宽度或者高度。Flutter 允许直接设置组件高度或者宽度，也可以通过设置子组件的宽度或者高度来确定组件的宽度或者高度