如何将容器添加到 Flutter 中的点击列

Question

我有一个容器列表视图的情况，当我双击每个容器时，我想在下面弹出另一个容器并显示信息。 目前我正在尝试做的是将每个容器包装在一个列中并执行类似的操作： onDoubleTap() {showBox = true} ，并且在列中有代码： children: [post(), showbox == true? infobox(): container()] children: [post(), showbox == true? infobox(): container()]但我不确定正确的实现。 任何帮助都会很棒！

Answer 1

您应该维护一个容器列表：

class ContainerAdder extends StatefulWidget {
  const ContainerAdder({Key? key}) : super(key: key);

  @override
  _ContainerAdderState createState() => _ContainerAdderState();
}

class _ContainerAdderState extends State<ContainerAdder> {
  List<Widget> containers = <Widget>[];
  Random random = Random();
  List<Color> colors = [
    Colors.blue,
    Colors.green,
    Colors.red,
    Colors.orange,
    Colors.purple,
    Colors.pink,
    Colors.teal,
    Colors.yellow,
  ];

  addContainer() {
    setState(() {
      int r = random.nextInt(colors.length);
      containers.add(
        InkWell(
          onDoubleTap: () => addContainer(),
          child: Container(
            margin: const EdgeInsets.only(bottom: 1.0),
            height: 50.0,
            color: colors[r],
          ),
        ),
      );
    });
  }

  @override
  void initState() {
    super.initState();
    addContainer();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [...containers],
      ),
    );
  }
}

如您所见，addContainer() 方法添加了一个容器，该容器包装在 InkWell 中以具有点击侦听器。 doubleTap 调用方法 addContainer()。

我只是在 ListView 小部件中传播容器列表。

在 addContainer() 方法中，我将代码包装在 setState() 中以刷新树。 如果您愿意，可以使用任何其他 state 管理架构。

我第一次在 initState() 中调用 addContainer()，以便用第一个元素填充列表。