如何选择、取消选择和禁用项目？

Question

我的应用程序中有卡片，每张卡片有 4 个灰色项目，如果选择该项目，则其颜色变为蓝色，其他卡片中的相同项目应该禁用，我无法使用地图集合执行此操作。所以我有 IT、DEV、TEST、HR 等项目，如果在任何一张卡中选择了 IT，那么其余卡中的其余 IT 项目应该禁用。 我将在下面附上应用程序的屏幕截图和代码。任何人都可以帮助我，请。提前致谢。

    import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardWithTextformfield(),
    );
  }
}

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

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

class _CardWithTextformfieldState extends State<CardWithTextformfield> with AutomaticKeepAliveClientMixin {
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  var name =<TextEditingController>[];
  var id =<TextEditingController>[];

  var addCard =1;

  void incrementcard(){
    setState(() {
      if(addCard >=4){
        return;
      }
      addCard++;
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Card with TextformField'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementcard,
        child: Icon(Icons.add),
      ),
      body: Container(
        child:ListView.builder(
          itemCount: addCard,
            itemBuilder: (context,index){
            return cardslist(index);
            }
        ),
      ),
    );
  }
  Widget cardslist(int index){
    if(name.length <= index){
      name.add(TextEditingController());
      id.add(TextEditingController());
    }
    return Card(
      margin: EdgeInsets.all(10),
      child: Container(
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                    margin: EdgeInsets.all(10),
                    child: Text('Team Name: ')),
                Expanded(child: TextFormField(
                  controller: name[index],
                    decoration: InputDecoration(hintText: 'Team Name'),
                ),),
                Container(
                  margin: EdgeInsets.all(10),
                  child: Text('Team Id: '),),
                Expanded(child: TextFormField(
                  controller: id[index],
                    decoration: InputDecoration(hintText: 'Team Id'),
                ),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('IT'),),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('DEV'),),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('TEST'),),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('HR'),),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

}

Answer 1

据我了解，您想比较 map

内部值的值

声明一个全局 -> bool 变量(final bool isSelected = false)

• 将值存储在您要比较的 variable 中

• 使用forLoop迭代map中的值

• 检查值是否存在，设置isSelected = true

• 使用isSelected设置颜色

           GestureDetector(
             child: Container(
               width: 50,height: 50,
               margin: EdgeInsets.all(10),
               decoration: BoxDecoration(
                 shape: BoxShape.rectangle,
                 color: isSelected == true ? Colors.blue : Colors.grey,
               ),
               child: Center(child: Text('HR'),),
             ),
           ),
  

请查看帖子一次以了解地图迭代 - Add/Update list of K,V pair to empty declared map = List<Map<dynamic, dynamic>>

希望它能解决问题?