0

我希望在按下时突出显示网格中的按钮。不幸的是，当我这样做时，整个专栏都会亮起。由于我是 Flutter/Dart 和一般编码的新手，我不确定我的问题是我缺乏逻辑还是我不了解该编码语言？

主页：

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

应用程序的屏幕截图

4

2 回答 2

1

相当大的代码，但我认为问题在于，每当您添加一个新频道时，您都会给它一个现有的按钮列表。添加新频道时尝试创建新的按钮列表

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,
    ),
);
于 2020-02-25T17:36:48.683 回答
1

我将首先介绍一些编程逻辑改进，然后解释为什么你会得到意想不到的结果。

1) Button 类中的颜色实际颜色从不使用，将其删除。

2) 除非每个按钮都有不同的 onColor 和 offColor，否则我建议将这两个移出 Button 类或至少将它们声明为静态。当我猜你只需要一次时，你不必要地一遍又一遍地实例化它们，这是一个非常小的内存改进（特别是因为你不会有数千个按钮）但更重要的是从 Button 类中删除它们或制作它们静态将使您的代码更易于阅读和理解，并减少传递给构造函数所需的参数数量（再次更简洁的代码）。

3）你的循环计数器“i”和“y”，在需要的地方声明它们。缩小变量的范围，使其仅在使用它的范围内可见。这样做有很多...很多原因，简而言之，当使用比必要更大的范围时，代码变得更不可读，更难维护，并且更有可能引用意外变量。

现在解决您的实际问题。问题不在于 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 项目。

假设您创建了具有 4 个项目的 btnList。假设您创建了具有 2 个项目的 channelList。那么 channelList[ 0 ].buttonList[ 0 ].state 将始终与 channelList[ 1 ].buttonList[ 0 ].state 相同，因为它们都指向同一个 Button。

要得到这个：

ExampleOfWorkingCode

快速简便的解决方法是执行以下操作：

              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我也不会像你所做的那样手动计算列表项，只需使用提供的.length。

于 2020-02-25T18:06:29.563 回答