更改所选容器的颜色并取消选择？ [扑]

Question

它们是装满举报用户理由的容器。如何更改代码以便每个单独的容器在选项卡 on/off 上改变颜色？并在将原因打印到 chosenReportReasons 列表时将所选原因限制为 3 个？

附上截取的代码：


final List<String> reportReasons = [
  'blah',
'blah blah',
'blah blah blah'
];

List<String> chosenReasonsToReport = [];
bool isSelected = false;

  Container(
                child: Wrap(
                    children: reportReasons
                        .map((reportReason) => GestureDetector(
                              onTap: () {
                                if (isSelected = false) {
                                  isSelected = true;
                                } else {
                                  isSelected = false;
                                }
                                setState(() {});
if (reportReason.isSelected && chosenReasonsToReport.length < 3) {
      chosenReasonsToReport.add('${reportReason}');

      print(chosenReasonsToReport);
    } else {
      chosenReasonsToReport.remove('${reportReason}');
     
      print(chosenReasonsToReport);
    }
                              },
                              child: Container(
                                margin: EdgeInsets.only(
                                  right:
                                      MediaQuery.of(context).size.width * 0.021,
                                  bottom: MediaQuery.of(context).size.height *
                                      0.009,
                                ),
                                decoration: BoxDecoration(
                                    color: isSelected
                                        ? Color(0xff4aa3f8)
                                        : Color(0xff3a327f),
                                    borderRadius: BorderRadius.circular(12),
                                    border: Border.all(
                                        color:
                                            Colors.grey[50].withOpacity(0.60))),
                                padding: EdgeInsets.symmetric(
                                    horizontal:
                                        MediaQuery.of(context).size.width *
                                            0.027,
                                    vertical:
                                        MediaQuery.of(context).size.height *
                                            0.0045),
                                child: Text(
                                  reportReason,
                                  style: TextStyle(
                                      fontSize: 13.5,
                                      color: isSelected
                                          ? Color(0xff231b6a)
                                          : null),
                                ),
                              ),
                            ))
                        .toList()),

代码更新错误

进一步更新：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReportPage(),
    );
  }
}


class RemarksModel {
  bool isSelected;
  String reason;

  RemarksModel({this.isSelected, this.reason});
}

class ReportPage extends StatefulWidget {

  List<RemarksModel> reportReasons;

  @override
  void initState() {
    super.initState();
    reportReasons = [
      RemarksModel(isSelected: false, reason: 'Sexually Harassing'),
      RemarksModel(isSelected: false, reason: 'Racially Discriminative'),
      RemarksModel(isSelected: false, reason: 'Shouting'),
      RemarksModel(isSelected: false, reason: 'Prank Calling'),
      RemarksModel(isSelected: false, reason: 'Scam Bots'),
      RemarksModel(isSelected: false, reason: 'Vulgarities Abusing'),
      RemarksModel(isSelected: false, reason: 'No Sound')
    ];
  }

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

class _ReportPageState extends State<ReportPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
...

Answer 1

尝试将这些行包装在 setState:

中

if (isSelected = false) {
                                  isSelected = true;
                                } else {
                                  isSelected = false;
                                }

并删除下面的 setState。

Answer 2

为轻松创建模型 class 原因

class RemarksModel {
  bool isSelected;
  String reason;

  RemarksModel({this.isSelected, this.reason});
}

并且可以初始化为

  List<RemarksModel> reportReasons;

  @override
  void initState() {
    super.initState();
    reportReasons = [
      RemarksModel(isSelected: false, reason: 'blah'),
      RemarksModel(isSelected: false, reason: 'blah blah'),
      RemarksModel(isSelected: false, reason: 'blah blah blah')
    ];
  }

然后你可以很容易地知道这个项目是否被selected，你可以在tap回调

上制作一个项目select和deselect

                onTap: () {
                  setState(() {
                    reportReason.isSelected = !reportReason.isSelected;
                  });
                },

完整代码

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
          children: reportReasons
              .map((reportReason) => GestureDetector(
                    onTap: () {
                      setState(() {
                        reportReason.isSelected = !reportReason.isSelected;
                      });
                    },
                    child: Container(
                      margin: EdgeInsets.only(
                        right: MediaQuery.of(context).size.width * 0.021,
                        bottom: MediaQuery.of(context).size.height * 0.009,
                      ),
                      decoration: BoxDecoration(
                          color: reportReason.isSelected
                              ? Color(0xff4aa3f8)
                              : Color(0xff3a327f),
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(
                              color: Colors.grey[50].withOpacity(0.60))),
                      padding: EdgeInsets.symmetric(
                          horizontal: MediaQuery.of(context).size.width * 0.027,
                          vertical:
                              MediaQuery.of(context).size.height * 0.0045),
                      child: Text(
                        reportReason.reason,
                        style: TextStyle(
                            fontSize: 13.5,
                            color: reportReason.isSelected
                                ? Color(0xff231b6a)
                                : null),
                      ),
                    ),
                  ))
              .toList()),
    );
  }

如果您只需要 selected 原因列表，

  List<RemarksModel> getSelectedReasons() {
    return reportReasons.where((reason) => reason.isSelected).toList();
  }

更改所选容器的颜色并取消选择？ [扑]

Change Colors of Selected Containers and Unselect? [Flutter]

containers

boolean

list

conditional-operator

flutter