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

问题描述

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

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

sample gif example with current code

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())
                  ],)
              ],);
      }
    }

解决方法

这是最终结果：

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. 我所做的是添加了一个映射，该映射将文本字符串与其对应的颜色进行映射。 (stringColorMap)

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

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