[英]Flutter Using ListView.Builder: how can i change background color of only one item on all items with i selected it
[![This is image that before select a one time slot][1]][1][![And this when i try to select one item all items are selected and then the reservation details appear when i preesed the time slot][1]][1]
[![And this when i try to select one item all items are selected and then the reservation details appear when i preesed the time slot][1]][1]
class _ReservationSlotsWidgetState extends State<ReservationSlotsWidget> {
var _isExpanded = false;
var slots = [
'09:00AM',
'10:00AM',
'11:00AM',
'12:00PM',
'01:00PM',
'02:00PM',
'03:00PM',
'04:00PM',
];
@override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
return Scaffold(
extendBodyBehindAppBar: true,
....
Expanded(
child: ListView.builder(
itemCount: slots.length,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, index) {
var slot = slots[index];
return GestureDetector(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
child: Container(
padding: EdgeInsets.all(4),
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
color: _isExpanded
? Theme.of(context).primaryColor
: parseColor('#2A2E43'),
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: SlotsWidget())
);
}
)),
],
),
),
SizedBox(
height: deviceSize.height * 0.00025,
),
if (_isExpanded)
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.all(16),
height: deviceSize.height * 0.2,
decoration: BoxDecoration(
color: Theme.of(context).primaryColorDark,
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.person_add,
color: Colors.white,
),
SizedBox(
width: 5,
),
Text('Number of persons',
style: TextStyle(
color: Colors.white,
)),
SizedBox(
height: 5,
),
],
),
Row(
children: <Widget>[
Icon(
Icons.person_add,
color: Colors.transparent,
),
SizedBox(
width: 5,
),
Text('(max 7 persons)',
style: TextStyle(
color: Colors.white,
)),
....
所以你的問題的關鍵是你的ListView Builder的索引。 您目前的做法是將單個布爾值設置為 true 或 false,這適用於列表中的每個元素。 您需要做的是保存擴展小部件的索引。
改變
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
到
int _expandedIndex;
...
onTap: () {
setState(() {
_expandedIndex = index
});
},
並改變
color: _isExpanded
? Theme.of(context).primaryColor
: parseColor('#2A2E43'),
到
color: _expandedIndex == index
? Theme.of(context).primaryColor
: parseColor('#2A2E43'),
創建單獨的類
class Slot {
String time;
bool isSelected;
Slot(this.time, this.isSelected);
}
創建上述類的插槽列表
var slots = [
Slot('09:00AM', false),
Slot('10:00AM', false),
Slot('11:00AM', false),
Slot('12:00PM', false),
//... Rest of the items
];
從列表中獲取插槽對象(這應該在Listview.Builder
)
var slot = slots[index];
var time = slot.time; // Get the time from slot object
單擊列表項時將isSelected
標記為true
slot.isSelected = true;
或者
slot.isSelected = !slot.isSelected; // Vice versa
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.