Множественный выбор в одном списке трепещет при касании

Я определяю bool, selected, чтобы проверить, выбран ли какой-либо index, и int, selectedIndex, чтобы сохранить значение выбранного индекса:

bool selected = false;
int selectedIndex = 1;

Затем в методе сборки я использую переменные, как показано ниже:

  return Container(
    height: 50,
    width: 117,
    child: GestureDetector(
      onTap: () {
        if (selectedIndex == index) {
          setState(() {
            selectedIndex = 1;
            selected = false;
          });
        } else {
          setState(() {
            selectedIndex = index;
            selected = true;
          });
        }
      },
      child: new Card(
        color:
            (selected && selectedIndex == index) ? Colors.purple : Colors.white,
        elevation: 10,
        child: Center(
          child: Text(
            ReservationTime.hours[index],
            style: (selected && selectedIndex == index)
                ? TextStyle(fontSize: 12, color: Colors.white)
                : TextStyle(fontSize: 12, color: Colors.black87),
          ),
        ),
      ),
    ),
  );

Таким образом, я могу выбрать один элемент и придать ему другой цвет. Я хочу добавить множественный выбор, потому что на данный момент я могу выбрать только один элемент.

flutter

11.12.2020 17:19

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

580

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать List<int> вместо одного int:

List<int> selectedIndexes = [1];
// instead of: int selectedIndex = 1;

И функция добавления/удаления выбранных индексов:

void toggleIndex(int i) {
 if (selectedIndexes.contains(i))
   setState(() => selectedIndexes.remove(i));
 else
   setState(() => selectedIndexes.add(i));
 if (selectedIndexes.length > 0)
   setState(() => selected = true);
 else
   setState(() => selected = false);
}

Тогда ваш Container будет:

  Container(
    height: 50,
    width: 117,
    child: GestureDetector(
      onTap: () => toggleIndex(index),
      child: new Card(
        color:
            (selected && selectedIndexes.contains(index)) ? Colors.purple : Colors.white,
        elevation: 10,
        child: Center(
          child: Text(
            ReservationTime.hours[index],
            style: (selected && selectedIndexes.contains(index))
                ? TextStyle(fontSize: 12, color: Colors.white)
                : TextStyle(fontSize: 12, color: Colors.black87),
          ),
        ),
      ),
    ),
  )

Вы также можете избавиться от переменной selected:

List<int> selectedIndexes = [1];

void toggleIndex(int i) {
 if (selectedIndexes.contains(i))
   setState(() => selectedIndexes.remove(i));
 else
   setState(() => selectedIndexes.add(i));
}

@override
Widget build(BuildContext context) {
 return
  Container(
    height: 50,
    width: 117,
    child: GestureDetector(
      onTap: () => toggleIndex(index),
      child: new Card(
        color:
            selectedIndexes.contains(index) ? Colors.purple : Colors.white,
        elevation: 10,
        child: Center(
          child: Text(
            ReservationTime.hours[index],
            style: selectedIndexes.contains(index)
                ? TextStyle(fontSize: 12, color: Colors.white)
                : TextStyle(fontSize: 12, color: Colors.black87),
          ),
        ),
      ),
    ),
  );
}

в последнем варианте, чтобы избавиться от выбранной переменной, мне нужно изменить List<int> selectedIndexes = [1]; на List<int> selectedIndexes = [-1]```, иначе, когда я перезагружаю приложение, всегда выбирается первый элемент. с -1 я могу получить то, что хочу, спасибо!

— 12.12.2020 09:18

11.12.2020 18:11