Если еще проблема условия в свойстве onPressed () в Dart / Flutter

Question

Я хочу выделить кнопку из сетки, когда она нажата. К сожалению, когда я это делаю, загорается вся колонка. Поскольку я новичок в изучении флаттера / дартса и кодирования в целом, я не уверен, является ли моя проблема моей нехваткой логики c или чего-то такого, чего я не знал бы об этом языке кодирования?

Домашняя страница:

import 'package:flutter/material.dart';
import 'package:sequencer_n_lignes/utilities/sequence_class.dart';

class Home extends StatefulWidget {
  @override
  _Home createState() => _Home();
}

class _Home extends State<Home> {
  int i = 0, y = 0, indexTempo = 0;
  int countChanel = 0, countBtn = 0;
  bool isPlaying = false;
  List<Button> btnList = List();
  List<Chanel> chanelList = List();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey[800],
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(20, 10, 20, 10),
              decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black,
                      blurRadius: 5,
                      spreadRadius: 1,
                    )
                  ],
                  color: Colors.grey[900],
                  border: Border.all(
                    color: Colors.white,
                    width: 0.5,
                  )),
              child: Row(
                children: <Widget>[
/*__________________________________________ADD/REMOVE BUTTONS___________________*/
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: () {
                          for (i = 0; i < 4; i++) {
                            btnList.removeLast();
                            countBtn--;
                          }
                          setState(() {});
                        },
                      ),
                      Text('BUTTONS: $countBtn'),
                      IconButton(
                        icon: Icon(
                          Icons.add,
                        ),
                        onPressed: () {
                          for (i = 0; i < 4; i++) {
                            btnList.add(Button(
                                id: countBtn,
                                onColor: Colors.blue,
                                offColor: Colors.grey[900],
                                state: false));
                            countBtn++;
                          }
                          setState(() {});
                        },
                      ),
                    ],
                  ), //
/*_________________________________________ADD/REMOVE CHANEL___________________*/
                  Row(
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: () {
                          chanelList.removeLast();
                          countChanel--;
                          setState(() {});
                        },
                      ),
                      Text('CHANEL: $countChanel'),
                      IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () {
                          chanelList.add(
                              Chanel(id: countChanel, buttonList: btnList));
                          countChanel++;
                          setState(() {});
                        },
                      ),
                    ],
                  ),
                  SizedBox(
                    width: 30,
                  ),
/*_____________________________________________CONTROLS___________________*/
                  Row(
                    children: <Widget>[
                      IconButton(
                        icon: Icon(
                          Icons.play_arrow,
                          color: (isPlaying) ? Colors.green : Colors.white,
                        ),
                        onPressed: () {
                          if (isPlaying)
                            isPlaying = false;
                          else
                            isPlaying = true;
                          setState(() {});
                        },
                      ),
                      IconButton(
                        icon: Icon(
                          Icons.stop,
                          color: (isPlaying) ? Colors.white : Colors.red[900],
                        ),
                        onPressed: () {
                          if (isPlaying)
                            isPlaying = false;
                          else
                            isPlaying = true;
                          setState(() {});
                        },
                      ),
                      IconButton(
                        icon: Icon(
                          Icons.refresh,
                          color: Colors.white,
                        ),
                        onPressed: () {
                          for (i = 0; i < chanelList.length; i++) {
                            for (y = 0; y < btnList.length; y++) {
                              chanelList[i].buttonList[y].state = false;
                            }
                          }
                          setState(() {});
                        },
                      ),
                      RaisedButton.icon(
                        icon: Icon(
                          Icons.details,
                          color: Colors.white,
                        ),
                        label: Text('OK'),
                        color: Colors.red[900],
                        onPressed: () {
                          setState(() {});
                        },
                      )
                    ],
                  ),
                ],
              ),
            ),
/*__________________________________________ GRID ___________________*/

            Column(
              children: List.generate(countChanel, (indexChanel) {
                return Padding(
                  padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List.generate(countBtn, (indexBtn) {
                      return Padding(
                        padding: EdgeInsets.fromLTRB(3, 0, 3, 0),
                        child: Container(
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black,
                                blurRadius: 0.1,
                                spreadRadius: 0.1,
                              ),
                            ],
                            border: Border.all(
                              color: Colors.white,
                              width: 0.5,
                            ),
                          ),
                          width: 80,
                          height: 80,
//THATS WHERE THE PROBLEM IS///////////////////////////
                              child: FlatButton(
    //                            child: Text(
    //                                '${chanelList[indexChanel].id.toString()} \n${chanelList[indexChanel].buttonList[indexBtn].id.toString()}\n$indexChanel-$indexBtn\n${chanelList[indexChanel].buttonList[indexBtn].state}'),
                                color: (chanelList[indexChanel]
                                        .buttonList[indexBtn]
                                        .state)
                                    ? chanelList[indexChanel]
                                        .buttonList[indexBtn]
                                        .onColor
                                    : chanelList[indexChanel]
                                        .buttonList[indexBtn]
                                        .offColor,
                                onPressed: () {
                                  if (chanelList[indexChanel]
                                      .buttonList[indexBtn]
                                      .state) {
                                    chanelList[indexChanel]
                                        .buttonList[indexBtn]
                                        .state = false;
                                  } else {
                                    chanelList[indexChanel]
                                        .buttonList[indexBtn]
                                        .state = true;
                                  }
                                  setState(() {});
                                },
                              ),
                            ),
                          );
                        }),
                      ),
                    );
                  }),
                ),
              ],
            ),
          ),
        );
      }
    }

Класс

class Button {
  int id;
  Color onColor = Colors.red[900], offColor = Colors.grey[900];
  Color actualColor;
  bool state = false;

  Button({this.id, this.onColor, this.offColor, this.state});
}

class Chanel {
  int id;
  List<Button> buttonList;
  Chanel({this.id, this.buttonList});
}

Снимок экрана приложения

Answer 1

Я go расскажу о некоторых улучшениях в логике программирования c 1-го числа, а затем объясню, почему вы получаете неожиданные результаты.

1) Цвет actualColor внутри класса Button никогда не используется, удалите его.

2) Если каждая кнопка не будет иметь разные onColor и offColor, я предлагаю переместить эти две из класса Button или по крайней мере объявить их как stati c. Вы напрасно создаете их экземпляры снова и снова, когда я предполагаю, что они нужны вам только один раз, это очень маленькое улучшение памяти (особенно если у вас не будет тысяч кнопок), но что более важно, удаление их из класса Button или создание Эти данные c сделают ваш код более легким для чтения и понимания, а также сократят количество аргументов, необходимых для передачи конструктору (снова более чистый код).

3) Ваши счетчики l oop «я» и «у», объявите их, где они необходимы. Уменьшите область действия переменной, чтобы она была видна только в той области, где она используется. Есть много ... много причин для этого, в двух словах, когда используется больший объем, чем необходимо, код становится менее читаемым, труднее в обслуживании и с большей вероятностью ссылается на непреднамеренные переменные.

---

Теперь для вашей актуальной проблемы. Проблема не в операторах if / else, это связано со списками и тем, как они обрабатываются в памяти. Возвращаясь к моему третьему пункту выше, всегда используйте наименьшую возможную область. Вы объявляете свой btnList здесь

class _Home extends State<Home> {
  int i = 0, y = 0, indexTempo = 0;
  int countChanel = 0, countBtn = 0;
  bool isPlaying = false;
  List<Button> btnList = List();
  List<Chanel> chanelList = List();

Позже вы добавляете тот же самый btnList к различным каналам здесь:

              Text('CHANEL: $countChanel'),
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  chanelList.add(
                      Chanel(id: countChanel, buttonList: btnList));
                  countChanel++;
                  setState(() {});
                },

Я предлагаю вернуться к основам и узнать в целом о массивах, списки и указатели . Вы должны также искать глубокое и мелкое копирование. В приведенном выше блоке кода вы установили один и тот же btnList для всех элементов chanelList.

Допустим, вы создали btnList, в котором есть 4 элемента. Допустим, вы создаете channelList, который имеет 2 элемента. Тогда channelList [0] .buttonList [0] .state всегда будет таким же, как channelList [1] .buttonList [0] .state, потому что они оба указывают на одну и ту же кнопку.

Чтобы получить это:

Быстро и легко можно было бы сделать что-то вроде этого:

              IconButton(
                icon: Icon(Icons.add),
                  onPressed: () {
                  List<Button> tmpBtnList = new List<Button>();  
                  for(int i=0; i<btnList.length; i++){
                    tmpBtnList.add(new Button(id: i,state: false));
                  }
                  chanelList.add(
                      Chanel(id: countChanel, buttonList: tmpBtnList));
                  countChanel++;
                  setState(() {});
                },
              ),

Полный код на DartPad.

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

Answer 2

Довольно большой код, но я думаю, что проблема в том, что когда вы добавляете новый канал, вы предоставляете ему существующий список кнопок. Попробуйте создать новый список кнопок при добавлении нового канала

chanelList.add(
    Chanel(
        id: countChanel,
        // Here is your problem, the reference to the buttons is the same
        // in all channels. Try creating new buttons for every channel
        buttonList: btnList,
    ),
);