Flutter 实现合成小游戏
github源码地址:https://github.com/CZXBigBrother/animals-merge-demo
init.gif
实现功能我们需要先了解两个flutter控件Draggable 和 DragTarget
从字面意思大概能看出,Draggable是可以拖动的,DragTarget是拖动的目标,就是接收Draggable的控件
ddd.png
只能接收不能拖动的控件我们就可以使用DragTarget,根据上面代码onAccept方法时接收到数据,然后刷新到界面
DragTarget(
onWillAccept: (data) {
// print("data = $data onWillAccept --- 0");
return data != null;
},
onAccept: (data) {
HomeCoreModel.moveItem(widget.data, data);
},
onLeave: (data) {
// print("data = $data onLeave --- 0");
},
builder: (context, candidateData, rejectedData) {
return ItemView(data: widget.data);
},
)
bool onWillAccept(data) 当Draggable被滑动到DragTarget上方时会调用,data为Draggable携带的数据源，根据条件判断是否需要接受此数据，如果要接收，则返回true；
onAccept(data) 当Draggable被滑动到DragTarget上方后松手，且onWillAccept函数返回true时会被调用，可以在此处处理Widget的状态变化；
onLeave(data) 当Draggable从DragTarget上方离开时会调用该方法。
作者：平静的阿卿达
链接：https://www.jianshu.com/p/267e030b265a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
又能拖动又能接收,我们可以对Draggable 和 DragTarget进行嵌套
return Draggable(
data: widget.data,
child: Container(
width: sizeW,
height: sizeW,
child: DragTarget(
onWillAccept: (data) {
return data != null;
},
onAccept: (data) {
HomeCoreModel.moveItem(widget.data, data);
},
onLeave: (data) {
// print("data = $data onLeave ----- 1");
},
builder: (context, candidateData, rejectedData) {
return ItemView(data: widget.data);
},
),
),
feedback: ItemView(
data: widget.data,
isDrag: true,
),
childWhenDragging: ItemView(
data: HomeItem(),
),
);
childWhenDragging是在拖动时留在原地的控件,因为我们拖动时只显示动物,在原地方留下一个空白位子,所以拖动时传递了一个空数据的对象HomeItem
feedback是拖动时运动中的控件
child就是在不动的时间显示的内容
下面就是拖动控件创建的方式
class ItemDraggableTarget<HomeItem> extends StatefulWidget {
HomeItem data;
ItemDraggableTarget({@required this.data, Key key}) : super(key: key);
@override
State<StatefulWidget> createState() => _ItemDraggableTargetState(text: data);
}
class _ItemDraggableTargetState extends State<ItemDraggableTarget> {
var text;
_ItemDraggableTargetState({@required this.text});
@override
Widget build(BuildContext context) {
if (0 == widget.data.level) {
return DragTarget(
onWillAccept: (data) {
// print("data = $data onWillAccept --- 0");
return data != null;
},
onAccept: (data) {
HomeCoreModel.moveItem(widget.data, data);
},
onLeave: (data) {
// print("data = $data onLeave --- 0");
},
builder: (context, candidateData, rejectedData) {
return ItemView(data: widget.data);
},
);
} else {
return Draggable(
data: widget.data,
child: Container(
width: sizeW,
height: sizeW,
child: DragTarget(
onWillAccept: (data) {
return data != null;
},
onAccept: (data) {
HomeCoreModel.moveItem(widget.data, data);
},
onLeave: (data) {
// print("data = $data onLeave ----- 1");
},
builder: (context, candidateData, rejectedData) {
return ItemView(data: widget.data);
},
),
),
feedback: ItemView(
data: widget.data,
isDrag: true,
),
childWhenDragging: ItemView(
data: HomeItem(),
),
);
}
}
}
下面是拖动控件内部显示动物的控件
class ItemView extends StatelessWidget {
ItemView({Key key, this.data, this.isDrag = false}) : super(key: key);
// static double sizeW = (ScreenService.width - 15 * 2 - 3 * 10) / 4;
bool isDrag;
HomeItem data;
@override
Widget build(BuildContext context) {
return Container(
width: sizeW,
height: sizeW,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: data.level == 0
? Text("")
: Image.asset(
'assets/dogs/ic_dog_level${data.level}.png',
// color: Colors.red,
width: sizeW,
height: sizeW,
),
),
Align(
alignment: Alignment.bottomRight,
child: Offstage(
offstage: isDrag || data.level == 0,
child: Container(
alignment: Alignment.center,
width: 16,
height: 20,
decoration: BoxDecoration(
color: Colors.green,
borderRadius:
BorderRadius.all(const Radius.circular(15))),
child: Text(
'${data.level}',
style: TextStyle(color: Colors.white, fontSize: 12),
)),
))
],
),
decoration: BoxDecoration(
color: Color.fromRGBO(238, 239, 240, isDrag == false ? 1 : 0),
borderRadius: BorderRadius.all(const Radius.circular(15))),
);
}
}
数据我们可以创建一个3x4的二维数组来存储,x y大家可以忽略,本来是给服务端返回使用的
List<List<HomeItem>> cores = [
[
HomeItem(x: 0, y: 0, level: 1),
HomeItem(x: 1, y: 0, level: 1),
HomeItem(x: 2, y: 0, level: 1),
HomeItem(x: 3, y: 0, level: 1)
],
[
HomeItem(x: 0, y: 1),
HomeItem(x: 1, y: 1),
HomeItem(x: 2, y: 1),
HomeItem(x: 3, y: 1)
],
[
HomeItem(x: 0, y: 2),
HomeItem(x: 1, y: 2),
HomeItem(x: 2, y: 2),
HomeItem(x: 3, y: 2)
]
];
移动的时候,会出现3中情况
第一种:移到一个空的位置上 revicer.level == 0
第二种:移到一个等级相同的位置上,两个动物就会合并成一个更高级的revicer.level == sender.level 将接受+1revicer.level += 1 发送设置为0 sender.level = 0;
第三中:移到一个等级不同的位置上,两个动物就是交换位置revicer.level != sender.level
int level = sender.level;
sender.level = revicer.level;
revicer.level = level;
static void moveItem(HomeItem revicer, HomeItem sender) {
if (revicer.level == 0) {
revicer.level += sender.level;
sender.level = 0;
} else if (revicer.level == sender.level) {
revicer.level += 1;
sender.level = 0;
} else if (revicer.level != sender.level) {
int level = sender.level;
sender.level = revicer.level;
revicer.level = level;
}
HomeCoreModel.instance.streamController.sink.add(1);
}
删除直接设置等级为0
///删除一个
static void removeItem(HomeItem revicer) {
revicer.level = 0;
HomeCoreModel.instance.streamController.sink.add(1);
}
添加循环查找还是空的位置
///添加一个
static void addItem(int core) {
bool isFinish = false;
for (List ones in HomeCoreModel.instance.cores) {
for (HomeItem one in ones) {
if (one.level == 0) {
one.level = core;
isFinish = true;
break;
}
}
if (isFinish == true) {
break;
}
}
HomeCoreModel.instance.streamController.sink.add(1);
}
github源码地址:https://github.com/CZXBigBrother/animals-merge-demo
