Как самостоятельно переключать логическое значение в элементе списка? - PullRequest
Новая
       26

Как самостоятельно переключать логическое значение в элементе списка?

0 голосов
/ 09 июля 2020

Я пытаюсь изменить цвет контейнера нажатием кнопки. Он смотрит на логическое значение и определяет цвет. Как я могу изменить логическое значение для каждого отдельного элемента списка независимо?

Я также использую провайдера для управления состоянием. Это всего лишь пример того, что я пытаюсь сделать. 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    bool colorToggle = false;

    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, i) {
            return Container(
              width: 100,
              height: 100,
              color: colorToggle ? Colors.blue : Colors.green,
              child: GestureDetector(
                onTap: () {
                  //how to change the colorToggle independendently with each listview item?
                  print('tapped');
                },
                child: Text('change color'),
              ),
            );
          },
        ),
      ),
    );
  }
}

1 Ответ

0 голосов
/ 09 июля 2020

Вы не можете добиться этого с помощью одного логического значения.

Вместо этого вы можете использовать List. Добавьте индекс элемента в List после нажатия на элемент. Затем проверьте List для индекса элемента, чтобы установить цвет 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List toggled = List();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, i) {
            return Container(
              width: 100,
              height: 100,
              color: toggled.contains(i) ? Colors.blue : Colors.green,
              child: GestureDetector(
                onTap: () {
                  toggled.add(i);
                  setState(() {});
                },
                child: Text('change color'),
              ),
            );
          },
        ),
      ),
    );
  }
}
...