Question

我有一个创建多个容器的ListView.builder。它用于在电子商务应用程序中按颜色过滤产品。我想在用户点击颜色时给容器加上边框。它看起来像这样： https://dribbble.com/shots/5569127 这是我现在尝试过的方法，但是每次单击都不会给容器加上边框：

Color tileColor = Colors.lime;
  List<String> availableColors = ["red", "blue", "black", "brown", "violet"];

Container(
      height: 50,
      width: double.infinity,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: availableColors.length,
        itemBuilder: (BuildContext context, int index) {
          bool showBorder = false;
          if (availableColors[index] == "red") {
            tileColor = Colors.red;
          }
          if (availableColors[index] == "blue") {
            tileColor = Colors.blue;
          }
          if (availableColors[index] == "black") {
            tileColor = Colors.black;
          }
          if (availableColors[index] == "brown") {
            tileColor = Colors.brown;
          }
          return Padding(
            padding: const EdgeInsets.only(left: 10),
            child: GestureDetector(
              onTap: () {
                setState(() {
                  print("object");
                  showBorder = !showBorder;
                  print(showBorder);
                });
              },
              child: Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                    color: tileColor,
                    border: showBorder ? Border.all(color: Colors.green , width: 5) : Border(),
                    shape: BoxShape.circle),
              ),
            ),
          );
        },
      ),
    )

Answer 1

@pskink评论：使用-[1, 2, 4]代替int showBorder

代码：

bool showBorder

用于多个选择。您必须将分接索引保存在列表中。

代码：

  int showBorder = 999999999;
  List<String> availableColors = ["red", "blue", "black", "brown", "violet"];

              @override
              Widget build(BuildContext context) {
            return Container(
              height: 50,
              width: double.infinity,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: availableColors.length,
                itemBuilder: (BuildContext context, int index) {
                  if (availableColors[index] == "red") {
                    tileColor = Colors.red;
                  }
                  if (availableColors[index] == "blue") {
                    tileColor = Colors.blue;
                  }
                  if (availableColors[index] == "black") {
                    tileColor = Colors.black;
                  }
                  if (availableColors[index] == "brown") {
                    tileColor = Colors.brown;
                  }
                  return Padding(
            padding: const EdgeInsets.only(left: 10),
            child: GestureDetector(
              onTap: () {
                setState(() {
                  print(index);
                  showBorder = index;
                });
              },
              child: Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                    color: tileColor,
                    border: showBorder == index
                        ? Border.all(color: Colors.green, width: 5)
                        : Border(),
                    shape: BoxShape.circle),
              ),
            ),
          );
        },
      ),
    );

如何通过单击它们中的任何一个给ListView中的多个容器提供边框？

1 个答案: