需求是：在一张平明图上按照服务器端返回的坐标点进行绘图。
由于移动设备屏幕大小不一，展示的地图大小是自适应的，这就需要想办法获取实际的长度和高度。随后，通过比例计算出该绘图的坐标点。
1. 获取父Widget高度
我让图片的高度填满整父Widget，但比例不变。
final Image image = Image.asset('assets/123.jpeg', fit: BoxFit.fitHeight)
随后用LayoutBuilder来获取父Widget的高度信息。参考下面代码，其中constrains.maxHeight获取到Container实际的高度。
@override
Widget build(BuildContext context) {
return Container(
child: LayoutBuilder(
builder: (context, constrains){
if(constraints.maxWidth > 200.0) {
return new Text('BIG');
}
}
)
);
}
- 坐标绘图
首先是一个图片Widget，坐标用到了Positioned Widget，再用一个Stack Widget将它们组合起来。
Stack(
children: <Widget>[
image,
Positioned(
left: 18.0,
top: 20,0,
child: Text("I am Jack"),
),
],
)
3. 组合起来
结合前面两步组合一下，示例如下。
@override
Widget build(BuildContext context) {
return Container(
child: LayoutBuilder(
builder: (context, constrains){
return Stack(children: _list(constrains));
}
)
);
}
//图片的像素大小
final imgLength = 1154.0;
final imgWidth = 720.0
List<Widget> _list(constrains) {
final height = constrains.maxHeight;
final width = constrains.maxHeight/imgWidth * imgLength;
List<Widget> list = new List<Widget>();
stack.add(image);
for(var i = 0; i< posts.length; i++){
final item = posts[i];
final ssid = item.ssid;
final top = item.y * height;
final left = item.x * width;
stack.add(Positioned(
top: top,
left: left,
child: Text(ssid),
));
}
return list;
}
效果大致如下图。
image.png
