Флаттер - Как получить доступ к одному элементу в ListView.builder? - PullRequest
Новая
       4

Флаттер - Как получить доступ к одному элементу в ListView.builder?

0 голосов
/ 27 января 2020

У меня есть представление списка с элементами, созданными из списка объектов (предложений). Каждое предложение получило подробную информацию о себе. Я хочу изменить значок после нажатия на него (_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,
      ),
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 27 января 2020

Вы можете выполнить оба требования (переключить 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,
      ),
    );
  }
}
0 голосов
/ 27 января 2020

Вы фактически переопределяете _isFavIcon для всех элементов.

Вам необходимо добавить в модель Offer атрибут с именем isFavorite, и в методе onTap вы переключите isFavorite атрибут

вот полный рабочий пример для вашего дела

Модель предложения 

class Offer {

  // other attributes
  bool isFavorite = false;

}

Виджет OfferList 

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,
      ),
    );
  }
}
...