绘制方案选型
用什么来画呢？我给小兄弟的例子是用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");
配置布局
其实这个地块，我们只需要一个数组就可以配置。不过是25块地嘛？我们建立一个长度为25的数组来管理地块
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 )
后记
这仅仅只完成了最简单的农场游戏布局，不过相信大家已经通过这篇文章理解了实现方式，用任意框架都可以轻易完成了吧！
