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

Question

这是我希望能够重复使用的 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.

无法工作

这个问题有解决方案或解决方法吗？

Answer 1

尝试将 => 替换为 {} :

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

Answer 2

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

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),
)

Answer 3

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

第一步制作更改通知程序class

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 方法时，由于这两种方法中的 notifierlisners，小部件将被重新加载

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

How do you use the setState() function as part of a Flutter widget?

dart

flutter

flutter-widget