flutter - 选择时选择芯片颜色不变

Question

我需要帮助，因为我对此感到迷茫。Basically, I have 3 choice chips, and I have set their background color as well as their selected color differently in the sense that when not selected, they all of them should be grey and when selected, they should be the other color that I have指定...但在我的用户界面中，它不会自动更新...为什么？

这是我的代码

class FeedbackButton extends StatefulWidget {
  @override
  _FeedbackButtonState createState() => _FeedbackButtonState();
}

class _FeedbackButtonState extends State<FeedbackButton> {
  int selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 335.h,
      right: 37,
      child: Container(
          margin: EdgeInsets.symmetric(vertical: 5.h),
          height: 30.h,
          width: 106.w,
          decoration: BoxDecoration(
            color: Colors.yellow[700],
            boxShadow: [
              BoxShadow(
                offset: Offset(0, 5),
                blurRadius: 10,
                spreadRadius: -18,
              )
            ],
            borderRadius: BorderRadius.circular(10),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: FlatButton(
                onPressed: () {
                  _feedbackSheet2(context);
                },
                child: Row(
                  children: <Widget>[
                    Text(
                      "Update",
                      style: TextStyle(
                          fontFamily: 'Futura',
                          fontSize: 13.sp,
                          color: Colors.white),
                    ),
                    SizedBox(width: 6.w),
                    Icon(
                      Icons.arrow_circle_up_rounded,
                      color: Colors.white,
                      size: 20.sp,
                    )
                  ],
                )),
          )),
    );
  }

  _feedbackSheet2(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          Size size = MediaQuery.of(context).size;
          return Container(
            color: Color(0xFF737373),
            child: Container(
              height: 510.h,
              decoration: BoxDecoration(
                  color: Colors.amber[400],
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30))),
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  Positioned(
                      top: 20.h,
                      child: Row(
                        children: <Widget>[
                          Text("Update",
                              style: TextStyle(
                                  fontFamily: 'Futura',
                                  fontWeight: FontWeight.w600,
                                  fontSize: 17.sp,
                                  color: Colors.black87.withOpacity(0.4))),
                          SizedBox(width: 240.w),
                          Transform.rotate(
                            angle: -90 * math.pi / 180,
                            child: IconButton(
                              onPressed: () {
                                Navigator.pop(context);
                                print(
                                    "User choose to cancel experience update procedure");
                              },
                              icon: Icon(Icons.double_arrow_rounded,
                                  color: Colors.black87.withOpacity(0.4)),
                            ),
                          )
                        ],
                      )),
                  Positioned(
                      top: 70.h,
                      child: Container(
                          width: size.width * 0.8,
                          child: Text(
                            "Tell us how you feel regarding your last interaction with the account department:",
                            style: TextStyle(
                                fontFamily: 'Futura',
                                fontWeight: FontWeight.normal),
                            textAlign: TextAlign.center,
                          ))),
                  Positioned(
                      top: 130.h,
                      child: Container(
                          height: 50.h,
                          width: 350.w,
                          decoration: BoxDecoration(
                            color: Colors.black87.withOpacity(0.2),
                            borderRadius: BorderRadius.circular(10),
                          ),
                          alignment: Alignment.center,
                          child: Wrap(
                              spacing: 15.0,
                              children: chipdata.asMap().entries.map((entry) {
                                int idx = entry.key;
                                return createChoiceChip(
                                  index: idx,
                                  label: entry.value['label'],
                                  avatar: entry.value['avatarpic'],
                                );
                              }).toList()))),
                  Positioned(
                      top: 210.h,
                      child: Container(
                          width: size.width * 0.8,
                          child: Text(
                            "In relation to your emotion, please select the reason(s) that may be the cause:",
                            style: TextStyle(
                              fontFamily: 'Futura',
                              fontWeight: FontWeight.normal,
                            ),
                            textAlign: TextAlign.center,
                          ))),
                  Positioned(
                    top: 400.h,
                    child: Container(
                      height: 40.h,
                      width: 140.w,
                      decoration: BoxDecoration(
                        color: Colors.blue[400].withOpacity(0.5),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: FlatButton(
                          onPressed: () {
                            //sendMail();
                            print("email is sending");
                            //Navigator.pop(context);
                          },
                          child: Text(
                            "send update",
                            style: TextStyle(
                                fontFamily: 'Futura',
                                color: Colors.black87,
                                fontSize: 16.sp),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                      top: 450.h,
                      child: SizedBox(
                          width: 210.w,
                          child: Text(
                            "We'll send an anonymous feedback to the account department.",
                            style: TextStyle(
                                fontFamily: 'Futura',
                                fontSize: 12.sp,
                                color: Colors.grey[900]),
                            textAlign: TextAlign.center,
                          )))
                  // make the feeling "dissatisfied, neutral, satisfied"
                ],
              ),
            ),
          );
        });
  }

  Widget createChoiceChip({int index, IconData avatar, String label}) {
    return ChoiceChip(
      avatar: Icon(avatar),
      label: Text(label),
      labelStyle: TextStyle(
          color: Colors.black87, fontFamily: 'Futura', fontSize: 13.sp),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      backgroundColor: Colors.grey[600].withOpacity(0.7),
      disabledColor: Colors.black,
      selected: selectedIndex == index,
      onSelected: (bool selected) {
        setState(() {
          selectedIndex = selected ? index : null;
          
        });
      },
    );
  }
}

下面是我的芯片数据文件

final chipdata = [
  {   'avatarpic': Icons.sentiment_dissatisfied_rounded,
      'label': 'Dissatisfied',
  },
  {   'avatarpic': Icons.sentiment_neutral_rounded,
      'label': 'Neutral',
  },
  {   'avatarpic': Icons.sentiment_satisfied_rounded,
      'label': 'Satisfied',
  },
];

标签： flutterflutter-layout

Answer 1

您需要将底部工作表小部件转换为StatefulWidget.

目前，您的整个底部工作表小部件都在方法内，并且没有任何状态。

此外，打开底部工作表将在当前小部件树的顶部构建一个新小部件，因此您在FeedbackButton底部工作表构建器中所做的更改不会产生任何影响。

所以你需要设计一个像下面这样的小部件。

showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return YourBottomSheetWidget();
      },
    );

class YourBottomSheetWidget extends StatefulWidget {
  @override
  _YourBottomSheetWidgetState createState() => _YourBottomSheetWidgetState();
}

class _YourBottomSheetWidgetState extends State<YourBottomSheetWidget> {


  @override
  Widget build(BuildContext context) {
  }

  Widget createChoiceChip({int index, IconData avatar, String label}) {
    return ChoiceChip(
      avatar: Icon(avatar),
      label: Text(label),
      labelStyle:
          TextStyle(color: Colors.black87, fontFamily: 'Futura', fontSize: 13),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      backgroundColor: Colors.grey[600].withOpacity(0.7),
      disabledColor: Colors.black,
      selected: selectedIndex == index,
      onSelected: (bool selected) {
        setState(() {
          selectedIndex = selected ? index : null;
        });
      },
    );
  }
}

此外，请尝试创建Classes而不是构建小部件的方法。这里有一个解释。