Первый индекс не показывает выделенный цвет

Я пытаюсь выбрать несколько компонентов в этом Wrap.toList(), но каждый первый выбранный мной индекс не меняет свой цвет, указывая на то, что он выбран. Он выбран в списке, но не отображается. См. 4 компонента, которые я выбрал.

 Expanded(
              child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: GridView.count(
                    crossAxisCount: 2,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    shrinkWrap: true,
                    children: cC.allCommodityList.map((order) {
                      return InkWell(
                        onTap: () {
                          setState(() {
                            selectedItems.contains(order)
                                ? selectedItems.remove(order)
                                : selectedItems.add(order);
                            commodityName = order.commodityName;
                            commodityid = order.commodityID;
                            // }
                          });
                        },
                        child: Card(
                            child: Column(
                          children: [
                            Expanded(
                                child: selectedItems.contains(order)
                                    ? SvgPicture.asset(
                                        'assets/toiletpaper.svg',
                                        color: Color.fromRGBO(0, 76, 32, 1),
                                      )
                                    : SvgPicture.asset(
                                        'assets/toiletpaper.svg',
                                      )),
                            selectedItems.contains(order)
                                ? TopBorderNoTap(
                                    listColor: [
                                        Color.fromRGBO(229, 229, 229, 1),
                                        Color.fromRGBO(0, 76, 32, 1),
                                      ],
                                    text: order.commodityName.toString(),
                                    color: Colors.white,
                                    textColor: Colors.white)
                                : TopBorderNoTap(
                                    listColor: [
                                      Color.fromRGBO(229, 229, 229, 1),
                                      Colors.white
                                    ],
                                    text: order.commodityName.toString(),
                                    textColor: Colors.black,
                                  )
                          ],
                        )),
                      );
                    }).toList(),
                  ))),

Это мой модельный класс, а не полный код, он просто возвращается из json в json.

  CommodityModel({
    this.commodityID,
    this.commodityName,
    this.commodityImage,
  });

  CommodityModel.fromJson(Map<String, dynamic> json) {
    commodityID = json['commodityID'];
    commodityName = json['commodityName'];
    commodityImage = json['commodityImage'];
  }
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['commodityID'] = commodityID;
    data['commodityName'] = commodityName;
    data['commodityImage'] = commodityImage;

Предоставьте ключ каждой чернильнице. Что-то вроде ValueKey(order.id).

Rahul 20.02.2023 04:31

В случае, если вышеуказанное не работает, имеет ли ваш класс модели переопределение == и хэш-код (либо каким-либо плагином, либо вашим кодом)?

Rahul 20.02.2023 04:32

каким-то образом `selectedItems.contains(order)` эта строка не перенастраивается верно для первого элемента, если вы можете понять, что это решит вашу проблему

Ruchit 20.02.2023 05:39

@Rahul, ValueKey не работает. Я не думаю, что у меня есть что-то из этого, у меня нет плагина для моего класса модели. Вы можете иметь в моем обновленном посте.

wuuyungwuu 20.02.2023 05:52

@Ruchit да, я разбираюсь в этой части. Я все еще не мог это исправить.

wuuyungwuu 20.02.2023 05:53

Попробуйте переопределить == и hashCode в своем модальном классе. Или вы можете использовать пакет equatable для того же самого. contains лучше всего работает, когда свойства равенства реализованы в классе.

Rahul 20.02.2023 05:55

@Rahul, как мне реализовать == и хэш-код в моем классе модели?

wuuyungwuu 20.02.2023 06:01

Каким-то образом выбирается первый индекс, когда я перезапускаю симулятор. После этого вообще не выбирает.

wuuyungwuu 20.02.2023 06:05

вот хороший ресурс: stackoverflow.com/a/22999113/16569443

Rahul 20.02.2023 06:44

@Рахул Это работает. Можете ли вы добавить свой ответ, чтобы я мог отметить его как решенный?

wuuyungwuu 21.02.2023 04:48
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
10
62
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете попробовать этот подход, чтобы выбрать элемент списка модели d-select.

class MyNewWidget extends StatefulWidget {
  const MyNewWidget({super.key});

  @override
  State<MyNewWidget> createState() => _MyNewWidgetState();
}

class _MyNewWidgetState extends State<MyNewWidget> {
  final List<CommodityModel> allCommodityList = [
    CommodityModel(
        commodityID: 1,
        commodityName: "Toilet Paper",
        commodityImage: "commodityImage"),
    CommodityModel(
        commodityID: 2,
        commodityName: "Paper Towels",
        commodityImage: "commodityImage"),
    CommodityModel(
        commodityID: 3,
        commodityName: "Hand shop",
        commodityImage: "commodityImage"),
    CommodityModel(
        commodityID: 4,
        commodityName: "Air freshner",
        commodityImage: "commodityImage")
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200,
              childAspectRatio: 3 / 2,
              crossAxisSpacing: 20,
              mainAxisSpacing: 20,
            ),
            itemCount: allCommodityList.length,
            itemBuilder: (BuildContext ctx, index) {
              final order = allCommodityList[index];
              return Container(
                alignment: Alignment.center,
                child: InkWell(
                  onTap: () {
                    setState(() {
                      order.isSelected = !order.isSelected;
                    });
                  },
                  child: Card(
                      child: Column(
                    children: [
                      Expanded(
                          child: SvgPicture.asset(
                        'assets/toiletpaper.svg',
                        color: order.isSelected
                            ? const Color.fromRGBO(0, 76, 32, 1)
                            : null,
                      )),
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              color: order.isSelected
                                  ? const Color.fromRGBO(0, 76, 32, 1)
                                  : null,
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Center(
                                    child: Text(
                                  order.commodityName ?? "",
                                  style: TextStyle(
                                      color: order.isSelected
                                          ? Colors.white
                                          : Colors.black),
                                )),
                              ),
                            ),
                          ),
                        ],
                      )
                    ],
                  )),
                ),
              );
            }),
      ),
    );
  }
}

class CommodityModel {
  int? commodityID;
  String? commodityName;
  String? commodityImage;
  bool isSelected =
      false; // Add key for selection handle. You can also handle with single orderID Array

  CommodityModel({this.commodityID, this.commodityName, this.commodityImage});

  CommodityModel.fromJson(Map<String, dynamic> json) {
    commodityID = json['commodityID'];
    commodityName = json['commodityName'];
    commodityImage = json['commodityImage'];
    isSelected = json['isSelected'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['commodityID'] = commodityID;
    data['commodityName'] = commodityName;
    data['commodityImage'] = commodityImage;
    data['isSelected'] = isSelected;
    return data;
  }
}

Я получаю allCommodityList из API сервера, поэтому isSelected нет.

wuuyungwuu 21.02.2023 00:43

это локальный ключ, добавленный для обработки select и d-select для нас. его легко обрабатывать вместо использования новой переменной массива.

Vishal Zaveri 21.02.2023 04:53
Ответ принят как подходящий

Попробуйте переопределить == и hashCode в своем модальном классе. Или вы можете использовать пакет equatable для того же самого. contains работает лучше всего, когда свойства равенства реализованы в классе.

вот хороший ресурс: stackoverflow.com/a/22999113/16569443

Другие вопросы по теме