【发布时间】：2021-10-21 02:12:33
【问题描述】：
我将 swipe_cards 包用于 tinder 之类的滑动，但我无法添加在左、右和顶部滑动期间出现的文本小部件（noop、like 和 super like）。
class DatingAppDesign extends StatefulWidget {
@override
_DatingAppDesignState createState() => _DatingAppDesignState();
}
class _DatingAppDesignState extends State<DatingAppDesign> {
List<SwipeItem> _swipeItems = [];
late MatchEngine _matchEngine;
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
List<String> _names = ["1", "2", "3", "4", "last"];
List<Color> _colors = [
Colors.red,
Colors.blue,
Colors.green,
Colors.yellow,
Colors.orange
];
@override
void initState() {
for (int i = 0; i < _names.length; i++) {
_swipeItems.add(SwipeItem(
content: Content(text: _names[i], color: _colors[i]),
likeAction: () {
},
nopeAction: () {
},
superlikeAction: () {
}));
}
_matchEngine = MatchEngine(swipeItems: _swipeItems,);
super.initState();
}
@override
Widget build(BuildContext context) {
double ha = MediaQuery.of(context).size.height -
138 -
MediaQuery.of(context).padding.top;
return Scaffold(
body: Container(
height: ha,
width: double.infinity,
color: Colors.white,
child: Column(
children: [
Container(
decoration: BoxDecoration(
// color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(35.0),
),
),
width: MediaQuery.of(context).size.width*0.8,
height: ha*0.7,
child: Center(
child: SwipeCards(
matchEngine: _matchEngine,
itemBuilder: (BuildContext context, int index) {
return Stack(children: [
Container(
alignment: Alignment.center,
color: _swipeItems[index].content.color,
child: Text(
_swipeItems[index].content.text,
style: TextStyle(fontSize: 100),
),
),
Center(child: Text("Hello World"),),
],
);
},
onStackFinished: () {
},
),
),
),
Container(
height: ha * 0.3,
child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: EdgeInsets.all(1),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey,
//offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 10.0,
),
],
color: Colors.white,
borderRadius: BorderRadius.circular(39),
),
constraints: BoxConstraints(maxHeight: 78, minWidth: 78),
child: Center(
child: SvgPicture.asset(
'assets/icons/cross.svg',
// color: Colors.white12,
),
),
),
Container(
padding: EdgeInsets.all(1),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey,
// offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 10.0,
),
],
color: Colors.red,
borderRadius: BorderRadius.circular(49.5),
),
constraints: BoxConstraints(maxHeight: 99, minWidth: 99),
child: Center(
child: SvgPicture.asset(
'assets/icons/heart.svg',
// color: Colors.white12,
),
),
),
Container(
padding: EdgeInsets.all(1),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey,
// offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 10.0,
),
],
color: Colors.white,
borderRadius: BorderRadius.circular(39),
),
constraints: BoxConstraints(maxHeight: 78, minWidth: 78),
child: Center(
child: SvgPicture.asset(
'assets/icons/star.svg',
// color: Colors.white12,
),
),
),
],
),
),
],
),
),
appBar: appbar,
bottomNavigationBar: BottomNevigationDesign(),
);
}
}
我使用了手势检测器，但它不起作用。我阅读了所有在 swipe_cards 下使用 pub.dev 上相同示例的事件。我完全被卡住了，请帮帮我，谢谢。
【问题讨论】：
-
你的意思是滑动后弹出的窗口吗？
-
在向右滑动时，您可能会看到“喜欢”文字出现在图像@NagulanS 的顶部
-
您是否尝试过使用堆栈与卡片项目？
-
是的，我使用过，但问题是我无法更改文本可见性，因为刷卡包提供的每个事件都是在刷卡完成后发生的，但我希望在刷卡期间。