dart - 管理/处理多个小部件

Question

我提前为我的英语道歉。

我目前正在开发一款移动应用，这是一款简单的游戏。该游戏类似于 SimonSays。在我的应用程序中有 4 个彩色 Container。容器随机突出显示，玩家必须点击突出显示的容器。每个 Container 都与一个 GestureDetector 相关联。此集合的理想行为是一次只能点击一个(点击通过更改容器的颜色显示)。问题是我不知道如何管理容器。我目前的做法是:

利用 Notification 类并通知其他容器(或父小部件)容器被点击。

我研究了这个主题，但找不到如何使用 Notification 类的好例子。下面提供了当前状态的代码片段:

class _parentColorWidget extends State<colorWidget> {
  bool tapped = false;
  Color _initColor;
  Color color;
  _parentColorWidget(Color color) {
    this.color = color;
    this._initColor = color;
  }

  void onTap(bool tapped) {
    setState(() {
      if (tapped) {
        color = Colors.white70;
      } else {
        color = _initColor;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: _colorWidget(
        onChanged: onTap,
        context: context,
      ),
    );
  }
}

class colorWidget extends StatefulWidget {
  Color color;
  colorWidget(Color color) {
    this.color = color;
  }
  _parentColorWidget createState() => _parentColorWidget(color);
}

class _colorWidget extends StatelessWidget {

  _colorWidget({@required this.onChanged, this.color, this.context});
  final ValueChanged<bool> onChanged;
  BuildContext context;
  Color color;
  bool tapped = false;

  void _onTap() {
    CustomNotification(current_widget: this).dispatch(context);
    onChanged(!tapped);
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
        onTap: _onTap,
        child: new Container(
          color: color,
        ));
  }
}

我从这段代码生成了四个小部件。通过父小部件进行管理源 self 在官方 Flutter 文档中找到的示例。

如果点击了正确的 container，我如何使用通知来识别哪个 container widget 被点击或更准确地说？

提前感谢所有的回答。

Answer 1

如果使用 Notification，那么您将发送一些标识符，例如 color 值给父级。如果你向下传递回调，那么这个信息可以在回调中编码，例如像这样:

class _ParentState extends State<Parent> {
   String selectedColor;

   Widget build() {
      return Stack(children: ['Red', 'Green', 'Blue'].map((final color) =>
          Child(
            color: color,
            tapped: selectedColor == color,
            onTap: () { 
              setState(() {
                 selectedColor = color;
              })
            }
          )
      ]).toList());
   }
}

使用这种技术不可能同时选择 2 种颜色，因为所选颜色仅在 selectedColor 中跟踪，其他所有颜色都根据它的值重新计算。

而且我建议坚持使用一种方式将调用传递给父小部件，因此要么通过回调要么通过通知，而不是同时在单个回调中:

  void _onTap() {
    CustomNotification(current_widget: this).dispatch(context);
    onChanged(!tapped);
  }

对于你正在做的事情，我认为回调应该足以实现一切。

一些使代码更好的技巧:

1. 遵循命名规范，类名大写

2. 不要传递不必要的信息。在您的代码 onChanged(!tapped) 中，此处 !tapped 是不必要的，因为此值是从父级传递下来的。因此，当您在父小部件中向上传递此值时，您将有 2 个来源来获取相同的信息。避免从多个地方访问相同的信息 - 这只会更容易引入与状态相关的错误。

3. class colorWidget extends StatefulWidget { 我看不出有任何理由让这个小部件成为有状态的。避免拥有太多状态小部件 - 最好有一个具有集中游戏状态和逻辑的状态 Controller ，然后将信息传递给无状态小部件。尤其要避免有 2 个或更多需要在它们之间具有同步状态的状态小部件。单条信息应该只有 1 个有状态的小部件来跟踪和控制它。