【Flutter】- 画个表格

简介

之前公司项目需要，用Java自定义过一个值班信息类型的表格控件，Java版参考【Android自定义View】- 表格控件
。最近在学习flutter，所以打算用flutter来实现这个表格控件。

效果图

ggggg.gif

目前实现了，第一个单元个分类支持，在传入分类标题后，会绘制分类标题。内容数据是“0 - 7”的数据，通过“&”来判断是否绘制图片。当点击屏幕的时候可以更改数据，然后绘制发生改变。Java版的是可以点击单元格进行图片的绘制和隐藏的。

实现

• 自定义CustomPainter
  在paint(Canvas canvas, Size size)里面进行表格绘制，如果熟悉Android开发的，应该可以很快上手的，因为这里很多地方还是和Java的自定义View比较像的，只是很多API使用和Java有一些区别。可能觉得不像Java那样可以很快写出来。
• 画表格边框
  边框我使用Path来绘制的，然后就是计算路径。
• 画第一个单元格(表头)
  通过是否有表头数据，决定是否绘制表头，先画表头斜线，然后计算表头文字的内容。由于Flutter的Canvas没有像Java那样直接绘制文字的方法，所以可以自己封装一个绘制文字的方法。
• 绘制文字

  drawText(Canvas canvas, String text, Offset offset,
     {Color color = Colors.white,
     double maxWith = 100,
     double fontSize,
     String fontFamily,
     TextAlign textAlign = TextAlign.center,
     FontWeight fontWeight = FontWeight.bold}) {
   //  绘制文字
   var paragraphBuilder = ui.ParagraphBuilder(
     ui.ParagraphStyle(
       fontFamily: fontFamily,
       textAlign: textAlign,
       fontSize: fontSize,
       fontWeight: fontWeight,
     ),
   );
   paragraphBuilder.pushStyle(
       ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic));
   paragraphBuilder.addText(text);
   var paragraph = paragraphBuilder.build();
   paragraph.layout(ui.ParagraphConstraints(width: maxWith));
   double h = paragraph.height / 2;
  
   canvas.drawParagraph(paragraph, Offset(offset.dx, offset.dy - h));
  }
  

• 绘制图片
  计算图片的坐标，用flutter的Canvas的drawImage来绘制图片。绘制图片时，注意Image使用是painting.dart下的Image。获取方法。

  static Future<ui.Image> getImage(String asset) async {
    ByteData data = await rootBundle.load(asset);
    Uint8List lst = new Uint8List.view(data.buffer);
    Codec codec = await ui.instantiateImageCodec(lst);
    FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }