我有一個串列視圖，它從地圖中獲取屬性，如圖片和點擊次數。我想知道如何更改顏色以便在特定卡片上顯示綠色復選框圖示。就像現在一樣，我只能一次更改所有卡片上所有復選框的顏色。我想我希望能夠只選擇點擊的卡片，以便其復選框變為綠色。這是最相關的代碼：
主要的：
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: ListView.builder(
itemCount: widget._passoverCol.keys.length,
itemBuilder: (BuildContext context, int index)
return Container(
height: 100,
padding: const EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
myCard(
fileName: widget._passoverCol.keys.elementAt(index),
displayName: widget._passoverCol.values
.elementAt(index)
.displayName,
tapsCount: widget._passoverCol.values
.elementAt(index)
.tapsCount,
color: cardColor,
onTap: () {
setState(() {
cardColor = Colors.green;
});
},
),
],
));
}),
),
);
}
}
卡片：
class myCard extends StatefulWidget {
const myCard({
required this.tapsCount,
required this.fileName,
required this.displayName,
this.onTap,
this.color,
});
final int? tapsCount;
final String? fileName;
final String? displayName;
final Color? color;
final Function()? onTap;
@override
_myCardState createState() => _myCardState();
}
class _myCardState extends State<myCard> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: widget.onTap!,
child: Card(
child: Row(
children: <Widget>[
Expanded(
child: Image.asset(
//getImageFile()
widget.fileName!,
height: 100.0,
width: 100.0,
)),
Padding(
padding: const EdgeInsets.only(left: 32.0),
child: Text(widget.displayName!),
),
SizedBox(
width: 15.0,
),
Padding(
padding: const EdgeInsets.only(right: 12.0),
child: Text(
widget.tapsCount!.toString(),
),
),
Icon(FontAwesomeIcons.check, color: widget.color!),
SizedBox(
width: 200.0,
),
],
),
),
);
}
}
uj5u.com熱心網友回復：
您可以使用特定卡片的白色串列；否則_passoverCol 使用默認值白色設定顏色屬性。
List<Color> colors = [Colors.white,Colors.white,Colors.white,Colors.white,Colors.white];
color: colors[index],
setState(() {
colors[index] = Colors.green;
});
},
// set a color property in _passoverCol class and change it like this
setState(() {
widget._passoverCol.values
.elementAt(index)
.color = Colors.green;
});
},
uj5u.com熱心網友回復：
非常感謝你們！我決定去@BloodLoss 回答！不過我不得不稍微修改一下。我將地圖鍵轉換為串列。然后我在 onTap 中使用了該變數，正如您在我的代碼中看到的那樣，否則它就像解決方案一樣：
主要的：
var keys = widget._passoverCol.keys.toList();
return Container(
height: 100,
padding: const EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
foodCard(
fileName: widget._passoverCol.keys.elementAt(index),
displayName: widget._passoverCol.values
.elementAt(index)
.displayName,
tapsCount: widget._passoverCol.values
.elementAt(index)
.tapsCount,
color: selectColorKey!.contains(keys[index])
? Colors.green
: Colors.white,
onTap: () {
setState(() {
selectColorKey!.add(keys[index]);
});
},
uj5u.com熱心網友回復：
創建陣列來存盤您的點擊鍵。
List<String> selectColorKey = [];
將鍵添加到陣列
selectColorKey.add(widget._passoverCol.keys.elementAt(index));
如果您想在再次點擊時從陣列中移除或單擊移除按鈕
selectColorKey.removeWhere((e) => e == widget._passoverCol.keys.elementAt(index));
檢查邏輯
if(selectColorKey.contains(widget._passoverCol.keys.elementAt(index))) {
// set color to green
} else {
// set default color
}
你的完整代碼
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: ListView.builder(
itemCount: widget._passoverCol.keys.length,
itemBuilder: (BuildContext context, int index)
return Container(
height: 100,
padding: const EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
myCard(
fileName: widget._passoverCol.keys.elementAt(index),
displayName: widget._passoverCol.values
.elementAt(index)
.displayName,
tapsCount: widget._passoverCol.values
.elementAt(index)
.tapsCount,
color:selectColorKey.contains(widget._passoverCol.keys.elementAt(index))? Colors.green:Colors.white,
onTap: () {
setState(() {selectColorKey.add(widget._passoverCol.keys.elementAt(index));
});
},
),
],
));
}),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/334428.html