前言

半个月前，有一位B站的小兄弟加我微信，咨询我这种地图在Flutter里如何实现…

类似的东西，我以前用flash做过，在小程序里也实现过。虽然我对Flutter不算是特别熟悉，但没觉得有多难，便答应了帮这位小兄弟做个Demo，他也挺客气的答应帮我充个舰长。

为避免贴大段代码，文中代码部分仅作为参考，并非全部代码，请理解后自行补全或者下载源码进行学习。

绘制方案选型

用什么来画呢？我给小兄弟的例子是用custompainter绘制的，但本文里我会用Widget来实现，原因是地块不多的话，用Widget也感受不到什么性能差距。自己用custompainter实现的话，会麻烦一些

比如显示一张图片…

用Widget

Image.asset("图片路径");
复制代码

在Custompainter里

ImageStream stream = AssetImage("图片路径", bundle: rootBundle).resolve(ImageConfiguration.empty);

void listener(ImageInfo frame, bool synchronousCall) {
    final UI.Image image = frame.image;
    
    //将Image绘制到画布上
    canvas.drawImage(image, UI.Offset(60.0, 60.0), Paint());
    
    stream.removeListener(ImageStreamListener(listener));
}
 
stream.addListener(ImageStreamListener(listener));
复制代码

导入图片素材

我准备了两个地块款式，两款树的图片，全放在Flutter项目目录里的assets目录下

这样我们在pubspec.yaml（flutter项目的package.json）里配置一下就可以用以下代码来显示图片了

Image.asset("assets/floor1.png");
复制代码

配置布局

其实这个地块，我们只需要一个数组就可以配置。不过是20块地嘛？我们建立一个长度为20的数组来管理地块

0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
复制代码

现在我们加几个换行符，让这个数组对地块的表述是不是更直观了？

0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0
复制代码

这样是不是更清晰了？地块的等级，有没有浇水，有没有树都可以用数字来表示，比如你的地块和树的款式都不超过10个的话，那么地块款式用个位1-9表示，树的种类用十位0-9表示。

1,1,1,1,1,
1,11,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1
复制代码

这就代表所有地块用1号图片，并且在第2行的第2个地块上种了一棵1号款式的树

当然这个数组里放Map也是可以的，不是非要纯数字。这样可以存放更多信息，但在本例里数字已经足够了。

想明白了配置，我们只需要用Widget构建出来就行了

构建布局

这里我用Stack+Positioned来构建布局

Stack和Positioned的结合就像是css里的position:absolute

List<int> map = [
    1,1,1,1,1,
    1,1,1,1,1,
    1,1,1,1,1,
    1,1,1,1,1,
    1,1,1,1,1
  ];
  
for(int i = 0;i<map.length;i++){
  all.add(Positioned(
    left: (i%rowCount).floor()*floorSize.width,
    top:(i/rowCount).floor()*floorSize.height,
    child: Text("$i")
  ));
}
复制代码

这是按序号横排

如果需要按序号纵向排列，只需要将%和/对调一下

left: (i/rowCount).floor()*floorSize.width,
top:(i%rowCount).floor()*floorSize.height,
复制代码

现在我们把地块的图片显示出来

left: (i/rowCount).floor()*floorSize.width,
top:(i%rowCount).floor()*floorSize.height,
child: Image.asset("assets/floor1.png",width: floorSize.width,height: floorSize.height)
复制代码

由于地块是菱形，所以我们还需要计算一下偏移

按横排序号上移50%
按竖排序号右移50%
宽高减半计算

int xIndex = (i/rowCount).floor();
int yIndex = (i%rowCount).floor();
Positioned(
    left: xIndex*floorSize.width/2+yIndex*floorSize.width/2,
    top:yIndex*floorSize.height/2-xIndex*floorSize.height/2
)
复制代码

TADA！ 我们成功拼出了地块对不对！

现在让地块按照数组来显示地块图片

List<int> map = [
    1,1,1,1,1,
    1,1,1,1,1,
    1,1,2,1,1,
    1,1,1,1,1,
    1,1,1,1,1
  ];
  
Image.asset("assets/floor${map[i]}.png")
复制代码

把树加进来

前面我们制定的配置格式为个位数表示地块，十位数表示树种类，那么代码如下

int floorType = map[i]%10;//数字取个位
int treeType = ((map[i]%100)/10).floor();//数字取十位
复制代码

剩下就是把树的图片显示出来了

List<int> map = [
    1,1,1,1,1,
    1,1,51,1,1,
    1,1,42,1,1,
    1,1,51,1,1,
    1,1,1,1,1
];
  
int treeType = ((map[i]%100)/10).floor();
      
if(treeType>0){
    all.add(Positioned(
      left: xIndex*floorSize.width/2+yIndex*floorSize.width/2-treeSize.width*.3,
      top:yIndex*floorSize.height/2-xIndex*floorSize.height/2+135-treeSize.height,
      child: Image.asset("assets/youzi$treeType.png",width: treeSize.width,height: treeSize.height)
    ));
}
复制代码

TADA！ 我们成功种上树了！

缩放移动怎么解决？

在Flutter里非常简单，用InteractiveViewer！！

InteractiveViewer(
    boundaryMargin: const EdgeInsets.all(double.infinity),
    minScale: 0.2,
    maxScale: 2,
    child: getMapWidget() //这个函数返回的就是前面构建的地块Stack
)
复制代码

2021-08-17 11_42_57.gif