iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Mobile Development

Flutter App 開發實戰系列 第 27

客製功能 CustomPainter | 實作 [Day 27]

再暸解了 CustomPainter 如何使用後我們可以來嘗試做出網格


網格實作

先定義網格大小與寬高個數,在個別畫出直、橫線段

class SpacePainter extends CustomPainter {
  Paint _paint ;
  double gridSize = 0  ;
  int widthCount = 8 ;
  int heightCount = 14 ;
  SpacePainter(){
    _paint = Paint() ;
  }

  @override
  void paint(Canvas canvas, Size size) {
    //定義畫筆
    _paint.color = Colors.blueGrey;
    _paint.style = PaintingStyle.stroke  ;
    Path path = Path();
    //根據高度跟高度格數算出 gridSize 
    gridSize = size.height/heightCount ;
    //找出網格寬度與高度
    double width = gridSize*widthCount;
    double height = gridSize*heightCount ;
    //找出網格起始位置
    double startX = (size.width - width)/2 ;
    double startY = (size.height - height)/2  ;
    
    //直線
    for(int i = 0 ; i<=widthCount ; i++){
      double dx = (startX + gridSize*i)  ;
      double dy = startY ;
      path.moveTo(dx, dy) ;
      path.lineTo(dx, dy+height) ;
    }

    //橫線
    for(int i = 0 ;  i<=heightCount; i++){
      double dx = startX  ;
      double dy = startY+gridSize*i ;
      path.moveTo(dx, dy) ;
      path.lineTo(dx+width, dy) ;
    }
    canvas.drawPath(path, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return false ;
  }

}

範例圖示
https://ithelp.ithome.com.tw/upload/images/20200927/20130127RJuiVJfKqX.png

增加虛線

  @override
  void paint(Canvas canvas, Size size) {
    _paint.color = Colors.blueGrey;
    _paint.style = PaintingStyle.stroke  ;
    Path path = Path();
  + Path dotted = Path();
    gridSize = size.height/heightCount ;
    //直線
    double width = gridSize*widthCount;
    double height = gridSize*heightCount ;
    double startX = (size.width - width)/2 ;
    double startY = (size.height - height)/2  ;
    for(int i = 0 ; i<=widthCount ; i++){
      double dx = (startX + gridSize*i)  ;
      double dy = startY ;
      path.moveTo(dx, dy) ;
      path.lineTo(dx, dy+height) ;
      //虛線
  +    if(i != widthCount){//把起始位置移動到半格的位置
        dx = startX+ gridSize*0.5 + gridSize*i ;
        dy = startY ;
        dotted.moveTo(dx, dy);
        dotted.lineTo(dx, dy+height) ;
      }
    }

    //橫線
    for(int i = 0 ;  i<=heightCount; i++){
      double dx = startX  ;
      double dy = startY+gridSize*i ;
      path.moveTo(dx, dy) ;
      path.lineTo(dx+width, dy) ;
  +    if(i != heightCount){
        dx = startX ;
        dy = startY+gridSize*0.5+gridSize*i ;
        dotted.moveTo(dx, dy);
        dotted.lineTo(dx+width, dy) ;
      }
    }
    canvas.drawPath(path, _paint);
    canvas.drawPath(dashPath(dotted, dashArray: CircularIntervalList<double>(<double>[4, 4])), _paint) ;//CircularIntervalList [4,4] 4像素實線 ,4像素空格
  }

https://ithelp.ithome.com.tw/upload/images/20200927/201301273K8ZXhWEEI.png


上一篇
客製功能 CustomPainter | 範例 [Day 26]
下一篇
客製功能 | 按鈕對齊格線 [Day 28]
系列文
Flutter App 開發實戰30

尚未有邦友留言

立即登入留言