如何将 setState() 函数用作 Flutter 小部件的一部分？答案

【问题标题】：How do you use the setState() function as part of a Flutter widget?如何将 setState() 函数用作 Flutter 小部件的一部分？
【发布时间】：2021-06-29 18:03:07
【问题描述】：

这是一个我希望能够重复使用的 Dart 堆栈：

Stack(children: [
  Align(
    alignment: Alignment.centerLeft,
    child: IconButton(
        splashRadius: 20,
        icon: const Icon(Icons.keyboard_arrow_down_rounded),
        tooltip: 'decrease bonus by 1',
        onPressed: () => setState(() => value -= 1)),
  ),
  Container(
      width: 90,
      child: Center(child: Text(value.toString()))),
  Align(
    alignment: Alignment.centerRight,
    child: IconButton(
        splashRadius: 20,
        icon: const Icon(Icons.keyboard_arrow_up_rounded),
        tooltip: 'increase bonus by 1',
        onPressed: () => setState(() => value += 1)),
  ),
])

理想情况下，我想把这个堆栈变成一个小部件或函数，我可以用像 ArrowIncrement(value: value) 这样的小部件或像 ArrowIncrement(value) 这样的函数来调用它，但由于错误，我无法让它工作the function 'setState' isn't defined.

是否有针对此问题的解决方案或解决方法？

【问题讨论】：

把Stack变成一个函数是什么意思？您可以创建一个返回 Widget 的函数，或者将您的 onPressed 方法重构为一个单独的函数。类似_increaseValue(value) => setState(() => value += 1);
是的，理想情况下，我想创建一个函数，将上面的整个代码块作为小部件返回；不幸的是，由于 setState() 函数，它不起作用。
制作另一个“有状态”小部件，从它的构建方法中返回这个堆栈小部件！我猜你正在使用无状态小部件，在无状态小部件中你不能使用 setState 方法。

标签： flutter dart flutter-widget

【解决方案1】：

您可以将其包装到您自己的小部件中：

class MyWidget extends StatelessWidget {
  final ValueChanged<int> onValueChanged;
  final int value;
  
  MyWidget({required this.value, required this.onValueChanged});
  
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
  Align(
    alignment: Alignment.centerLeft,
    child: IconButton(
        splashRadius: 20,
        icon: const Icon(Icons.keyboard_arrow_down_rounded),
        tooltip: 'decrease bonus by 1',
        onPressed: () => onValueChanged(value-1)),
  ),
  Container(
      width: 90,
      child: Center(child: Text(value.toString()))),
  Align(
    alignment: Alignment.centerRight,
    child: IconButton(
        splashRadius: 20,
        icon: const Icon(Icons.keyboard_arrow_up_rounded),
        tooltip: 'increase bonus by 1',
        onPressed: () => onValueChanged(value+1)),
  ),
]);
  }
}

...然后在您的构建方法中像这样使用它（假设您的状态中有一个名为 currentBonusValue 的变量）：

MyWidget(
    value: currentBonusValue, 
    onValueChanged: (newValue) => setState(() => currentBonusValue = newValue),
)

【讨论】：

完美运行。谢谢！

【解决方案2】：

您可以像这样使用更改通知提供程序：

第一步修改通知类

class Change with Changenotifier{
int value = 0;

void inc(){
 value += 1;
 notifierliseners()
}
}
void dec(){
 value -= 1;
 notifierliseners()
}
}

然后在您的小部件中调用提供程序但在此之前，您必须使用 changenotifierprovider 小部件包装您的小部件我想你知道该怎么做

class Thewidget extend Statelesswidget{
 Widget build(buildcontext context){
 var provider = provider.of<change>(context);
return Stack(children: [
  Align(
    alignment: Alignment.centerLeft,
    child: IconButton(
        splashRadius: 20,
        icon: const Icon(Icons.keyboard_arrow_down_rounded),
        tooltip: 'decrease bonus by 1',
        onPressed: () => provider.dec())),
  ),
  Container(
      width: 90,
      child: Center(child: Text(provider.value.toString()))),
  Align(
    alignment: Alignment.centerRight,
    child: IconButton(
        splashRadius: 20,
        icon: const Icon(Icons.keyboard_arrow_up_rounded),
        tooltip: 'increase bonus by 1',
        onPressed: () => provider.inc())),
  ),
])
}
}

当您调用 dec 或 inc 方法时，由于这两种方法中的 notifierlisner，小部件将被重新加载

【讨论】：

【解决方案3】：

尝试将 => 替换为 {} ：

OnPressed : () {
 Setstate(() {
value +=1
};
}

【讨论】：

谢谢，感谢您的回复！不幸的是，这仍然不起作用；我相信这是因为 setState 函数被设计为仅在有状态小部件的上下文中工作。