选择一张卡就是在水平列表中选择其他卡
我正在为应用程序使用simple coverflow插件。每个容器都可以水平滚动，并具有一个标题，其中有3个选项，Card。
问题是当我选择任何一个卡片选择时，它也在列表中的其他卡片上选择了相同的选项，如下所示：
从上面可以看到，当我从第一个容器中选择卡片＃1时，最左边和最右边的卡片以绿色显示所选的卡片选项。
我需要怎么做才能使我能够从中心卡中选择一个不会突出显示/在其他卡上选择相同选项的选项？
以下代码：
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new CoverFlow(
dismissedCallback: disposeDismissed,
currentItemChangedCallback: (int index) {
print(index);
},
height: 600,
itemCount: d.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 25.0),
child: Text(
"Test",
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _c
? Colors.lightGreen
: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
child: Center(
child: Text("1",
style: TextStyle(
fontSize: 18.0),
textAlign: TextAlign.center))
),
onTap: () {
setState(() {
_s = true;
_c = true;
_w = false;
_wr = false;
});
},)),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color:
_w ? Colors.redAccent : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
child: Center(
child: Text(
"2",
style: TextStyle(
fontSize: 18.0),
textAlign: TextAlign.center,
))),
onTap: () {
setState(() {
_s = false;
_c = false;
_w = true;
_wr = false;
});
},
)),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _wr
? Colors.redAccent
: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
child: Center(
child: Text(
"3",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0),
),)),
onTap: () {
setState(() {
_s = false;
_c = false;
_w = false;
_wr = true;
});
},
)),
Padding(
padding: EdgeInsets.only(top: 25.0),
)
]
),
),
);
},
));}
Widget widgetBuilder(int i) {
if (d.length == 0) {
return Container();
} else {
print([i % d.length]);
return d[i % d.length];
}}
disposeDismissed(int dismissedItem, DismissDirection direction) {
d.removeAt(dismissedItem % d.length);
}
}
3 个答案:
答案 0 :(得分：2)
我认为您的3张卡使用相同的状态，因此_c var对于所有3张卡都是相同的。
您可以创建一个新的StatefulWidget来构建卡（并在其中包含自己的_c变量），也可以使用数组（List或Map ）由您的实际小部件中的index中的CoverFlow索引。
选项1：
class CustomCard extends StatefulWidget {
@override
_CustomCardState createState() => _CustomCardState();
}
class _CustomCardState extends State<CustomCard> {
// Initialise here or in `initState()` method.
bool _s = false;
bool _c = false;
bool _w = false;
bool _wr = false;
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 25.0),
child: Text(
"Test",
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _c ? Colors.lightGreen : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Center(
child: Text("1",
style: TextStyle(fontSize: 18.0),
textAlign: TextAlign.center))),
onTap: () {
setState(() {
_s = true;
_c = true;
_w = false;
_wr = false;
});
},
)),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _w ? Colors.redAccent : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Center(
child: Text(
"2",
style: TextStyle(fontSize: 18.0),
textAlign: TextAlign.center,
))),
onTap: () {
setState(() {
_s = false;
_c = false;
_w = true;
_wr = false;
});
},
)),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _wr ? Colors.redAccent : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Center(
child: Text(
"3",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
),
)),
onTap: () {
setState(() {
_s = false;
_c = false;
_w = false;
_wr = true;
});
},
)),
Padding(
padding: EdgeInsets.only(top: 25.0),
)
]));
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new CoverFlow(
dismissedCallback: disposeDismissed,
currentItemChangedCallback: (int index) {
print(index);
},
height: 600,
itemCount: d.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: CustomCard()
);
},
));}
Widget widgetBuilder(int i) {
if (d.length == 0) {
return Container();
} else {
print([i % d.length]);
return d[i % d.length];
}}
disposeDismissed(int dismissedItem, DismissDirection direction) {
d.removeAt(dismissedItem % d.length);
}
您可以在CustomCard小部件中添加选项。
选项2：
为您的数据创建一个类：
class MyData {
bool s = false;
bool c = false;
bool w = false;
bool wr = false;
}
创建一个列表来存储您的数据（在您所在的州）：
List<MyData> _cardsData;
@override
initState() {
super.initState();
_cardsData = List.generate(d.length, (index) => MyData());
}
使用列表：
// ...
onTap: () {
setState(() {
_cardsData[index].c = true;
})
}
// ...
答案 1 :(得分：1)
您只需要指定索引和currentIndex，此代码即可：
import 'package:flutter/material.dart';
import 'package:simple_coverflow/simple_coverflow.dart';
void main() => runApp(MaterialApp(
home: MyApp(),
));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int curerntIndex = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new CoverFlow(
dismissedCallback: disposeDismissed,
currentItemChangedCallback: (int index) {
print(index);
setState(() {
curerntIndex = index;
});
},
height: 600,
itemCount: d.length,
itemBuilder: (BuildContext context, int index) {
return Item(index, curerntIndex);
},
));
}
}
class Item extends StatefulWidget {
final int index;
final int curerntIndex;
Item(this.index, this.curerntIndex);
@override
_ItemState createState() => _ItemState(index, curerntIndex);
}
class _ItemState extends State<Item> {
final int index;
final int curerntIndex;
bool _s = true;
bool _c = true;
bool _w = false;
bool _wr = false;
_ItemState(this.index, this.curerntIndex);
@override
Widget build(BuildContext context) {
return Container(
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 25.0),
child: Text(
"Test",
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _c ? Colors.lightGreen : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Center(
child: Text("1",
style: TextStyle(fontSize: 18.0),
textAlign: TextAlign.center))),
onTap: () {
if (index == curerntIndex) {
setState(() {
_s = true;
_c = true;
_w = false;
_wr = false;
});
}
},
)),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _w ? Colors.redAccent : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Center(
child: Text(
"2",
style: TextStyle(fontSize: 18.0),
textAlign: TextAlign.center,
))),
onTap: () {
if (index == curerntIndex) {
setState(() {
_s = false;
_c = false;
_w = true;
_wr = false;
});
}
},
)),
Container(
height: 50.0,
child: GestureDetector(
child: Card(
color: _wr ? Colors.redAccent : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Center(
child: Text(
"3",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
),
)),
onTap: () {
if (index == curerntIndex) {
setState(() {
_s = false;
_c = false;
_w = false;
_wr = true;
});
}
},
)),
Padding(
padding: EdgeInsets.only(top: 25.0),
)
]),
),
);
}
}
答案 2 :(得分：0)
不是，您不是使用_c将颜色更改为绿色的颜色的人，所以它在所有颜色中都发生了变化，但实际上您只选择了一个。例如在flutter中，您不必键入new即可创建新的手势检测器因此，如果您只想更改已点击的单元格的颜色，请按照从currentItemChangedCallback：（int索引）获得的索引进行更改，或者仅更改已点击的窗口小部件的颜色。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？