我的文本小部件ui即使在使用setstate后也不会更新

Question

我正试图根据我的选择器中选择的项目显示价格，但在触发onSelectedItemChanged picker函数后，即使在使用setState后，我的Text ui也不会改变。这些变化只反映在我使用颤振热重新加载之后。

//价格可变是改变的变量

int price = 0;

// This is the widget displaying the price variable based on selected item
Text(price,
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 15.0));

//这是选择器小部件

Widget buildPicker() {
return SizedBox(
height: 350,
child: StatefulBuilder(builder: (context, setState) {
return CupertinoPicker(
scrollController: scrollController,
itemExtent: 64,
selectionOverlay: CupertinoPickerDefaultSelectionOverlay(
background: CupertinoColors.activeBlue.withOpacity(0.2),
),
children: List.generate(productController.data.length, (index) {
final isSelected = this.index == index;
final item = productController.data[index];
final color =
isSelected ? CupertinoColors.activeBlue : CupertinoColors.black;
return Center(
child: Text(
item.size!,
style: TextStyle(color: color, fontSize: 32),
),
);
}),
onSelectedItemChanged: (index) {
setState(() {
this.index = index;
final item = productController.data[index];
price= item.price!;
print(price);
});
},
);
}),
);
}

//显示价格的文本小部件不会更改，除非我在更改反映之前使用flutter热重新加载。请问我在这里做错了什么？

Answer 1

如果您检查此行

StatefulBuilder(builder: (context, setState)这里的setState指的是StatefulBuilder的状态，而不是类级别的状态，这就是为什么你的页面屏幕没有更新的原因，我建议重命名它，这样它就不会让我们混淆，并且能够使用类级别的setState。

这个片段将为您提供一个想法，检查我正在重命名为使用状态级setState方法。

builder: (context) => StatefulBuilder(
builder: (context, setStateSB) {
//<- this will update ui inside dilaog
onSelectedItemChanged: (v) {
print(v);
setStateSB(() {
// for inner changes
price = v;
});
setState(() {
// using class level state
price = v;
});
},

Answer 2

StatefulBuilder重建您的buildPicker，它无法构建整个上下文，这就是为什么值不会改变的原因。使用热重新加载时，请更改该值。

您可以通过使用Bloc、getx、provider等状态管理来解决这个问题，否则您可以使用继承的小部件。

更多关于-

状态管理https://docs.flutter.dev/development/data-and-backend/state-mgmt/options

继承的小工具Flutter：如何正确使用继承的小工具？