flutter 用一个属性(例如颜色)的不同值同时更改几个项的属性是什么方法

fnx2tebb  于 2023-06-24  发布在  Flutter
关注(0)|答案(2)|浏览(102)

我是一个初学者在过滤器和我打这些话与谷歌翻译,我的英语不好,请帮助,非常感谢你。问题描述我有四个可点击的容器。我希望当用户点击它们时,只有当前容器的背景颜色将变为红色,其余三个容器的背景颜色将变为蓝色。
我试了几次,不幸的是,整整五天我什么都做不了。这里我使用了一个变量,把col的初始值设为白色,这是问题所在

GestureDetector(
   onTap: () {
     setState(() {
      (col == Colors. white) ?col = Colors. red:col = Colors. blue;
          });
   },
   child: Container(
     alignment: Alignment. topLeft,
     decoration: BoxDecoration(
       color: color,
     ),
     child: Text(
       'S',
     ),
   ),
),`

我只是想当点击容器时,它会改变颜色,具有与其他容器不同的特性

ie3xauqp

ie3xauqp1#

我的解决方案通过使用列表视图我有5个容器,当点击容器小部件时,会更新当前的索引并改变颜色

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;  // to save user click index 
  bool firstClick = false; // checking flag when first build and keep item color white 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView.builder(
            itemCount: 5,
            itemBuilder: (context, index) {
              return InkWell(
                  onTap: () {
                    setState(() {
                      this.currentIndex = index;
                      this.firstClick = true;
                    });
                  },
                  child: firstClick
                      ? currentIndex == index
                          ? Container(
                              // A fixed-height child.
                              color: const Color(0xffeeee00), // Yellow
                              height: 100.0,
                              alignment: Alignment.center,
                              child: Text("Content ${index}"),
                            )
                          : Container(
                              // A fixed-height child.
                              color: Colors.lightBlue, // Yellow
                              height: 100.0,
                              alignment: Alignment.center,
                              child: Text('Content ${index}'),
                            )
                      : Container(
                          // A fixed-height child.
                          color: Colors.white, // Yellow
                          height: 100.0,
                          alignment: Alignment.center,
                          child: Text("Content ${index}"),
                        ));
            }),
      ),
    );
  }
}

Have Nice Day:)

zlhcx6iw

zlhcx6iw2#

您需要使用三元运算符(如

(col == Colors.white) ? col = Colors.red:col : col = Colors.blue;

或者

col =  col == Colors.white? Colors.red:col : Colors.blue;

但如果你对所有三个容器都使用单一变量,它将改变它们。尝试使用List代替。

class CContainerChanged extends StatefulWidget {
  const CContainerChanged({super.key});

  @override
  State<CContainerChanged> createState() => _CContainerChangedState();
}

class _CContainerChangedState extends State<CContainerChanged> {
  List<Color> containerColors = [
    Colors.cyanAccent,
    Colors.deepPurpleAccent,
    Colors.deepOrangeAccent,
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        children: [
          for (int i = 0; i < containerColors.length; i++)
            Container(
              width: 100,
              height: 100,
              color: containerColors[i],
              child: TextButton(
                onPressed: () {
                  setState(() {
                    containerColors[i] = Colors.red;
                  });
                },
                child: Text('Change color'),
              ),
            ),
        ],
      ),
    ));
  }
}

如果是关于选择单个容器,则会

class CContainerChanged extends StatefulWidget {
  const CContainerChanged({super.key});

  @override
  State<CContainerChanged> createState() => _CContainerChangedState();
}

class _CContainerChangedState extends State<CContainerChanged> {
  List<Color> containerColors = [
    Colors.cyanAccent,
    Colors.deepPurpleAccent,
    Colors.deepOrangeAccent,
  ];

  int? selectedIndex;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        children: [
          for (int i = 0; i < containerColors.length; i++)
            Container(
              width: 100,
              height: 100,
              color:  selectedIndex == i ? Colors.red : containerColors[i],
              child: TextButton(
                onPressed: () {
                  setState(() {
                    selectedIndex = i;
                  });
                },
                child: Text('Change color'),
              ),
            ),
        ],
      ),
    ));
  }
}

相关问题