小部件没有改变，尽管调用了新状态

Question

我想要一个文本，每当其中一个过滤卡为 selected/deselected 时，该文本就会发生变化。我制作了一个全局变量（我不知道最好的方法是什么，但对我来说它似乎应该有效）并在每次点击其中一张过滤卡时更改它的值。问题是应该显示值的文本小部件没有改变，尽管输出显示设置状态函数有效。有关详细信息，请参阅下面的图片和代码。

    class FilterSelectCard extends StatefulWidget {
  FilterSelectCard({
    Key? key,
    required this.filterCategory,
    required this.filterSvg,
    required this.filterIndex,
    required this.appliedFilters,
  }) : super(key: key);
  List<String> filterCategory;
  List<String> filterSvg;
  int filterIndex;
  ValueNotifier<int> appliedFilters;
  @override
  FilterSelectCardState createState() => FilterSelectCardState();
}

class FilterSelectCardState extends State<FilterSelectCard> {
  Color filterColor = primaryColor;
  Color borderColor = secondaryTextColor;
  Color svgColor = secondaryTextColor;
  bool filterStat = false;
  TextStyle textStyle = unTextStyle;
  ValueNotifier<int> appliedFilters = widget.appliedFilters; 

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        right: 12,
      ),
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (filterStat == false) {
              filterColor = secondaryTextColor;
              textStyle = selTextStyle;
              borderColor = backgroundColor;
              svgColor = mainTextColor;
              appliedFilters.value += 1;
              print(appliedFilters);
            }
            if (filterStat == true) {
              filterColor = primaryColor;
              textStyle = unTextStyle;
              borderColor = secondaryTextColor;
              svgColor = secondaryTextColor;
              appliedFilters.value -= 1;
              print(appliedFilters);
            }
            if (filterColor == primaryColor) {
              filterStat = false;
            }
            if (filterColor == secondaryTextColor) {
              filterStat = true;
            }
          });
        },

和

Future<dynamic> filterMealsAndWines(BuildContext context) {
    ValueNotifier<int> appliedFilters = ValueNotifier(0);
    return showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(35),
      ),
      builder: (BuildContext context) {
        return Stack(
           children:[Positioned(
                    left: 110,
                    top: 15,
                    child: Container(
                      height: 9,
                      width: 20,
                      decoration: BoxDecoration(
                        color: primaryColor,
                        borderRadius: BorderRadius.circular(
                          20,
                        ),
                      ),
                      child: ValueListenableBuilder(
                        valueListenable: appliedFilters,
                        builder: (context, appliedFilters, _) {
                          return Center(
                            child: Text(
                              appliedFilters.toString(),
                              style: GoogleFonts.poppins(
                                textStyle: const TextStyle(
                                  color: mainTextColor,
                                  fontSize: 6,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ),],

Answer 1

解决方案是您必须使用 StatefulBuilder 小部件将堆栈小部件包装在模态底部 sheet 示例：

 StatefulBuilder: (context, setState) {
 return Stack(....) ;
  }

https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html

如有帮助请点赞

Answer 2

如果此小部件是您在调用 setState() 时尝试更新的小部件，则它不起作用，因为它与 setState() 函数不在同一个 StatefulWidget 中，结果小部件不会重建.

child: Center(
  child: Text(
    appliedFilters.toString(),
    style: GoogleFonts.poppins(
      textStyle: const TextStyle(
        color: mainTextColor,
        fontSize: 6,
        fontWeight: FontWeight.w600,
      ),
    ),
  ),
),

要解决这个问题，您应该阅读更多关于 Flutter 中的状态管理的信息，但临时解决方案可能是使用 ValueListenableBuilder

因此，您应该将 Text 小部件包装在 ValueListenableBuilder 中，并且您的值 appliedFilters 将在构建器发生更改时更新它

Future<dynamic> filterMealsAndWines(BuildContext context){
  ValueNotifier<int> appliedFilters = ValueNotifier(0); 

  //Your all previuos code 

  ValueListenableBuilder<int>(
    valueListenable: appliedFilters,
    builder: (context, value, _) {
      return Center(
        child: Text(
          appliedFilters.toString(),
          style: GoogleFonts.poppins(
            textStyle: const TextStyle(
              color: mainTextColor,
              fontSize: 6,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      );
    }
  ),
}

class FilterSelectCardState extends State<FilterSelectCard> {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        right: 12,
      ),
      child: GestureDetector(
        onTap: () {
          setState(() {
            //HERE YOU UPDATE THE VALUE
            widget.appliedFilters.value += 1;
          });
        },
      ),

      //all your other code

    );
  }
}

小部件没有改变，尽管调用了新状态

Widget doesn't change, although new state is called

layout

widget

stateful

dart

flutter