Flutter - 如何访问 ListView.builder 中的一个元素？
Flutter - How to access one element in ListView.builder?
我有一个列表视图，其中包含从对象（优惠）列表创建的元素。每个报价都有关于自身的详细信息。我想在点击它后更改图标 (_isFavIcon)。但是当我点击它时，它会改变列表中的每个元素（每个图标）。
同样在更改图标后，我想将它们添加到另一个列表中。不过那是后话了。
外观如下：ListView
也许我应该使用 ListView 而不是 ListView.builder？
这是我的代码：
class OfferList extends StatefulWidget {
final List<Offer> offers;
OfferList(this.offers);
@override
_OfferListState createState() => _OfferListState();
}
class _OfferListState extends State<OfferList> {
bool isPressed = true;
Icon _isFavIcon = new Icon(
Icons.favorite_border,
color: Colors.red,
);
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
_addToFavorites() {
_isFavIcon = new Icon(Icons.favorite, color: Colors.red);
}
return Container(
height: 700,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.white,
Colors.lightBlueAccent.withOpacity(0.2)
])),
width: mediaQuery.size.width,
child: Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
horizontal: 15,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1.2,
blurRadius: 7,
),
],
),
child: Image.asset(widget.offers[index].flag),
),
padding: EdgeInsets.all(5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
child: Text(
widget.offers[index].title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Text(
'From: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateFrom),
style: TextStyle(
color: Colors.grey,
),
),
Text(
'To: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateTo),
style: TextStyle(
color: Colors.grey,
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.lightBlueAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
child: Text('Open'),
onPressed: () {},
),
Container(
padding: EdgeInsets.only(left: 10),
child: InkWell(
onTap: () {
setState(() {
_addToFavorites();
});
},
child: _isFavIcon,
),
),
],
),
),
],
),
),
),
],
);
},
itemCount: widget.offers.length,
),
);
}
}
您实际上覆盖了所有项目的 _isFavIcon。
您需要向 Offer 模型添加一个名为 isFavorite 的属性，并在 onTap 方法中切换 isFavorite 属性
这是您案例的完整示例
报价型号
class Offer {
// other attributes
bool isFavorite = false;
}
优惠列表小部件
class OfferList extends StatefulWidget {
final List<Offer> offers;
OfferList(this.offers);
@override
_OfferListState createState() => _OfferListState();
}
class _OfferListState extends State<OfferList> {
bool isPressed = true;
Icon _isNotFavIcon = new Icon(
Icons.favorite_border,
color: Colors.red,
);
Icon _isFavIcon = new Icon(
Icons.favorite,
color: Colors.red,
);
List<Offer> _offers;
@override
void initState() {
_offers = widget.offers;
super.initState();
}
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
return Container(
height: 700,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.white,
Colors.lightBlueAccent.withOpacity(0.2)
])),
width: mediaQuery.size.width,
child: Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
horizontal: 15,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1.2,
blurRadius: 7,
),
],
),
child: Image.asset(_offers[index].flag),
),
padding: EdgeInsets.all(5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
child: Text(
_offers[index].title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Text(
'From: ' +
DateFormat.yMMMd()
.format(_offers[index].dateFrom),
style: TextStyle(
color: Colors.grey,
),
),
Text(
'To: ' +
DateFormat.yMMMd()
.format(_offers[index].dateTo),
style: TextStyle(
color: Colors.grey,
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.lightBlueAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
child: Text('Open'),
onPressed: () {},
),
Container(
padding: EdgeInsets.only(left: 10),
child: InkWell(
onTap: () {
setState(() {
_offers[index].isFavorite =
!_offers[index].isFavorite;
});
},
child: _offers[index].isFavorite
? _isFavIcon
: _isNotFavIcon,
),
),
],
),
),
],
),
),
),
],
);
},
itemCount: _offers.length,
),
);
}
}
您可以实现这两个要求（切换 favIcon 并拥有最喜欢的列表）添加列表并检查项目何时在该列表上以显示图标。
class OfferList extends StatefulWidget {
final List<Offer> offers;
OfferList(this.offers);
@override
_OfferListState createState() => _OfferListState();
}
class _OfferListState extends State<OfferList> {
bool isPressed = true;
List<Offer> _favOffers = [];
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
void _toggleFavorite(Offer offer) {
if (_favOffers.contains(offer)) {
_favOffers.remove(offer);
} else {
_favOffers.add(offer);
}
}
return Container(
height: 700,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.white,
Colors.lightBlueAccent.withOpacity(0.2)
])),
width: mediaQuery.size.width,
child: Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
horizontal: 15,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1.2,
blurRadius: 7,
),
],
),
child: Image.asset(widget.offers[index].flag),
),
padding: EdgeInsets.all(5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
child: Text(
widget.offers[index].title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Text(
'From: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateFrom),
style: TextStyle(
color: Colors.grey,
),
),
Text(
'To: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateTo),
style: TextStyle(
color: Colors.grey,
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.lightBlueAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
child: Text('Open'),
onPressed: () {},
),
Container(
padding: EdgeInsets.only(left: 10),
child: InkWell(
onTap: () {
setState(() {
_toggleFavorite(widget.offers[index]);
});
},
child:
(_favOffers.contains(widget.offers[index]))
? Icon(
Icons.favorite,
color: Colors.red,
)
: Icon(
Icons.favorite_border,
color: Colors.black,
),
),
),
],
),
),
],
),
),
),
],
);
},
itemCount: widget.offers.length,
),
);
}
}
我有一个列表视图，其中包含从对象（优惠）列表创建的元素。每个报价都有关于自身的详细信息。我想在点击它后更改图标 (_isFavIcon)。但是当我点击它时，它会改变列表中的每个元素（每个图标）。
同样在更改图标后，我想将它们添加到另一个列表中。不过那是后话了。
外观如下：ListView
也许我应该使用 ListView 而不是 ListView.builder？
这是我的代码：
class OfferList extends StatefulWidget {
final List<Offer> offers;
OfferList(this.offers);
@override
_OfferListState createState() => _OfferListState();
}
class _OfferListState extends State<OfferList> {
bool isPressed = true;
Icon _isFavIcon = new Icon(
Icons.favorite_border,
color: Colors.red,
);
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
_addToFavorites() {
_isFavIcon = new Icon(Icons.favorite, color: Colors.red);
}
return Container(
height: 700,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.white,
Colors.lightBlueAccent.withOpacity(0.2)
])),
width: mediaQuery.size.width,
child: Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
horizontal: 15,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1.2,
blurRadius: 7,
),
],
),
child: Image.asset(widget.offers[index].flag),
),
padding: EdgeInsets.all(5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
child: Text(
widget.offers[index].title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Text(
'From: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateFrom),
style: TextStyle(
color: Colors.grey,
),
),
Text(
'To: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateTo),
style: TextStyle(
color: Colors.grey,
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.lightBlueAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
child: Text('Open'),
onPressed: () {},
),
Container(
padding: EdgeInsets.only(left: 10),
child: InkWell(
onTap: () {
setState(() {
_addToFavorites();
});
},
child: _isFavIcon,
),
),
],
),
),
],
),
),
),
],
);
},
itemCount: widget.offers.length,
),
);
}
}
您实际上覆盖了所有项目的 _isFavIcon。
您需要向 Offer 模型添加一个名为 isFavorite 的属性，并在 onTap 方法中切换 isFavorite 属性
这是您案例的完整示例
报价型号
class Offer {
// other attributes
bool isFavorite = false;
}
优惠列表小部件
class OfferList extends StatefulWidget {
final List<Offer> offers;
OfferList(this.offers);
@override
_OfferListState createState() => _OfferListState();
}
class _OfferListState extends State<OfferList> {
bool isPressed = true;
Icon _isNotFavIcon = new Icon(
Icons.favorite_border,
color: Colors.red,
);
Icon _isFavIcon = new Icon(
Icons.favorite,
color: Colors.red,
);
List<Offer> _offers;
@override
void initState() {
_offers = widget.offers;
super.initState();
}
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
return Container(
height: 700,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.white,
Colors.lightBlueAccent.withOpacity(0.2)
])),
width: mediaQuery.size.width,
child: Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
horizontal: 15,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1.2,
blurRadius: 7,
),
],
),
child: Image.asset(_offers[index].flag),
),
padding: EdgeInsets.all(5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
child: Text(
_offers[index].title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Text(
'From: ' +
DateFormat.yMMMd()
.format(_offers[index].dateFrom),
style: TextStyle(
color: Colors.grey,
),
),
Text(
'To: ' +
DateFormat.yMMMd()
.format(_offers[index].dateTo),
style: TextStyle(
color: Colors.grey,
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.lightBlueAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
child: Text('Open'),
onPressed: () {},
),
Container(
padding: EdgeInsets.only(left: 10),
child: InkWell(
onTap: () {
setState(() {
_offers[index].isFavorite =
!_offers[index].isFavorite;
});
},
child: _offers[index].isFavorite
? _isFavIcon
: _isNotFavIcon,
),
),
],
),
),
],
),
),
),
],
);
},
itemCount: _offers.length,
),
);
}
}
您可以实现这两个要求（切换 favIcon 并拥有最喜欢的列表）添加列表并检查项目何时在该列表上以显示图标。
class OfferList extends StatefulWidget {
final List<Offer> offers;
OfferList(this.offers);
@override
_OfferListState createState() => _OfferListState();
}
class _OfferListState extends State<OfferList> {
bool isPressed = true;
List<Offer> _favOffers = [];
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
void _toggleFavorite(Offer offer) {
if (_favOffers.contains(offer)) {
_favOffers.remove(offer);
} else {
_favOffers.add(offer);
}
}
return Container(
height: 700,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.white,
Colors.lightBlueAccent.withOpacity(0.2)
])),
width: mediaQuery.size.width,
child: Card(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
horizontal: 15,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1.2,
blurRadius: 7,
),
],
),
child: Image.asset(widget.offers[index].flag),
),
padding: EdgeInsets.all(5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 150,
child: Text(
widget.offers[index].title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Text(
'From: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateFrom),
style: TextStyle(
color: Colors.grey,
),
),
Text(
'To: ' +
DateFormat.yMMMd()
.format(widget.offers[index].dateTo),
style: TextStyle(
color: Colors.grey,
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.lightBlueAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
child: Text('Open'),
onPressed: () {},
),
Container(
padding: EdgeInsets.only(left: 10),
child: InkWell(
onTap: () {
setState(() {
_toggleFavorite(widget.offers[index]);
});
},
child:
(_favOffers.contains(widget.offers[index]))
? Icon(
Icons.favorite,
color: Colors.red,
)
: Icon(
Icons.favorite_border,
color: Colors.black,
),
),
),
],
),
),
],
),
),
),
],
);
},
itemCount: widget.offers.length,
),
);
}
}