flutter - 当它们是数组的一部分时，如何更改单个容器的颜色？

Question

我试图在轻按时突出显示 GestureDetector 的颜色，我只想更改轻按的容器颜色，但是我的 GestureDetector 是从数组创建的，所以当我更改一个时，一切都会改变。

我如何达到我的目标？数组中的文本不是固定的，会增长或缩小。

带有当前代码的示例 gif 示例

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyFloat(),
        );
      }
    }
    
    class MyFloat extends StatefulWidget {
      @override
      _MyFloatState createState() => _MyFloatState();
    }
    
    class _MyFloatState extends State<MyFloat> {
      List<BoxShadow> shadow = customShadow;
      Color color = Colors.green;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: primaryColor,
          body: SafeArea(
            child: Column(
              children: [
                Wrap(
                  children: [
                    ...(["hello", "hi", "hey"]
                        .map(
                          (val) => GestureDetector(
                            onTap: () {
                              setState(() {
                                this.color == Colors.green
                                    ? this.color = Colors.cyan
                                    : this.color = Colors.green;
                              });
                            },
                            child: AnimatedContainer(
                              duration: Duration(milliseconds: 250),
                              height: 100,
                              width: 100,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(20),
                                color: this.color == Colors.green
                                    ? Colors.cyan
                                    : Colors.green,
                              ),
                              child: Center(
                                child: Text(val),
                              ),
                            ),
                          ),
                        )
                        .toList())
                  ],
                )
              ],
            ),
          ),
        );
      }
    }

Answer 1

这是最终结果：

Map<String,Color> stringColorMap = {           /// Map which maps the text string to its corresponding color
  "hello" : Colors.green,
  "hi" : Colors.green,
  "hey" : Colors.green,
};


class MyFloat extends StatefulWidget {
  @override
  _MyFloatState createState() => _MyFloatState();
}

class _MyFloatState extends State<MyFloat> {

  Color color = Colors.green;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            Wrap(
              children: [
                ...(["hello", "hi", "hey"]
                    .map(
                      (val){print("Val : $val"); return GestureDetector(
                    onTap: () {
                      setState(() {
                       /* this.color == Colors.green
                            ? this.color = Colors.cyan
                            : this.color = Colors.green; */

                        if(stringColorMap[val] == Colors.green)
                          stringColorMap[val] = Colors.cyan;
                        else
                          stringColorMap[val] = Colors.green;

                      });
                    },
                    child: AnimatedContainer(
                      duration: Duration(milliseconds: 250),
                      height: 100,
                      width: 100,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        color: stringColorMap[val],
                      ),
                      child: Center(
                        child: Text(val),
                      ),
                    ),
                  );}
                )
                    .toList())
              ],
            )
          ],
        ),
      ),
    );
  }
}

所做的更改：

1. 我所做的是添加了一个映射，该映射将文本字符串与其相应的颜色进行映射。（字符串颜色映射）

2. 然后继续小部件的 onTap 功能，正如您所见，当用户点击按钮时，它将检查文本的当前颜色并相应地更改颜色。

3. 然后我用对应文本的颜色作为我们小部件的颜色。