Flutter 数量增减显示计数器字段

新的颤振和尝试了几个解决方案，我不能得到简单的项目计数器工作 第行上的图标示例。当我按下图标+1或-1时，0应增加或减少 甜甜圈+10-1

当我按下一个图标按钮+1时，它会更新打印终端，使我知道按钮正在工作。如果我热刷新手机模拟器，手机上的计数器和显示图标将更新为正确的计数

当计数器在IconBoxState中按OnPress增加时，如何告诉TextBox更新状态（在屏幕上显示更新的计数）

'''

class\u IconBoxState扩展状态{
小部件构建（构建上下文）{
返回列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
材料(
颜色：颜色，白色，
儿童：中心(
孩子：墨水(
装饰：const ShapeDecoration(
颜色：颜色。浅蓝色，
形状：CircleBorder（），
),
孩子：我的钮扣(
图标：图标（图标加上一个），
颜色：颜色，白色，
iconSize:25，
已按下：（）{
设置状态（）{
_计数器+=10；
打印（“这是计数器+$\u计数器”）；
//新建文本框（）；不工作。。。。
});
},
),
),
),
),
],
);
}
}
类TextBox扩展StatefulWidget{
@凌驾
_TextBoxState createState（）=>\u TextBoxState（）；
}
类TextBoxState扩展了状态{
//int_计数器=6；
@凌驾
小部件构建（构建上下文）{
返回容器(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
正文(
“$”计数器“，
风格：Theme.of（context）.textTheme.headline4，
),
],
),
宽度：50，
身高：50，
装饰：盒子装饰(
颜色：颜色，白色，
border:border.all（），
),
);
}
}

---

“”“

当您使用

设置状态时，它只会重建小部件所在的位置以及容器
小部件
包含的其他小部件，因此在您的情况下，
文本框
位于
IconBox
之外，因此，只有
IconBox
被重建，而
TextBox
无法检测到状态变化，所以它保持不变，您有很多方法来解决它。1.以某种方式将这两个小部件存储在容器
小部件
中，并重建容器
小部件
的状态，您可以这样做，2。使用
提供程序
，3。使用
InheritedWidget
4。使用
BloC

这是第一版的完整代码，因此您可以随意使用，您需要将
ContainerWidget
包含在希望显示的页面内或
MaterialApp
的
Scaffold
中：

class ContainerWidget extends StatefulWidget {
  @override
  _ContainerWidgetState createState() => _ContainerWidgetState();
}

class _ContainerWidgetState extends State<ContainerWidget> {
  int counter = 0;

  void increase() {
    counter += 1;
  }

  void decrease() {
    counter -= 1;
  }

  @override
  void setState(fn) {
    super.setState(fn);
  }

  stateSetter(String event) {
    if (event == "increase") {
      increase();
      setState(() {});
    } else if (event == "decrease") {
      decrease();
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          TextBox(
            counter: counter,
          ),
          IconBox(
            containerSetState: stateSetter,
          ),
        ],
      ),
    );
  }
}

class IconBox extends StatefulWidget {
  final Function containerSetState;

  IconBox({this.containerSetState});

  @override
  _IconBoxState createState() => _IconBoxState();
}

class _IconBoxState extends State<IconBox> {
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Material(
          color: Colors.white,
          child: Center(
            child: Ink(
              decoration: const ShapeDecoration(
                color: Colors.lightBlue,
                shape: CircleBorder(),
              ),
              child: IconButton(
                icon: Icon(Icons.plus_one),
                color: Colors.white,
                iconSize: 25,
                onPressed: () {
                  setState(() {
                    widget.containerSetState("increase");
                    //new TextBox(); not working....
                  });
                },
              ),
            ),
          ),
        ),
        Material(
          color: Colors.white,
          child: Center(
            child: Ink(
              decoration: const ShapeDecoration(
                color: Colors.lightBlue,
                shape: CircleBorder(),
              ),
              child: IconButton(
                icon: Icon(Icons.exposure_minus_1),
                color: Colors.white,
                iconSize: 25,
                onPressed: () {
                  setState(() {
                    widget.containerSetState("decrease");
                    //new TextBox(); not working....
                  });
                },
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class TextBox extends StatefulWidget {
  final int counter;

  TextBox({this.counter});

  @override
  _TextBoxState createState() => _TextBoxState();
}

class ContainerWidget扩展StatefulWidget{
@凌驾
_ContainerWidgetState createState（）=>\u ContainerWidgetState（）；
}
类_ContainerWidgetState扩展状态{
int计数器=0；
空隙增加（）{
计数器+=1；
}
空隙减少（）{
计数器-=1；
}
@凌驾
无效设置状态（fn）{
超级设定状态（fn）；
}
stateSetter（字符串事件）{
如果（事件=“增加”）{
增加（）；
setState（（）{}）；
}否则如果（事件=“减少”）{
减少（）；
setState（（）{}）；
}
}
@凌驾
小部件构建（构建上下文）{
返回容器(
子：列(
儿童：[
文本框(
柜台:柜台,，
),
IconBox(
containerSetState:stateSetter，
),
],
),
);
}
}
类IconBox扩展了StatefulWidget{
最终函数containerSetState；
IconBox（{this.containerSetState}）；
@凌驾
_IconBoxState createState（）=>\u IconBoxState（）；
}
类_IconBoxState扩展状态{
小部件构建（构建上下文）{
返回列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
材料(
颜色：颜色，白色，
儿童：中心(
孩子：墨水(
装饰：const ShapeDecoration(
颜色：颜色。浅蓝色，
形状：CircleBorder（），
),
孩子：我的钮扣(
图标：图标（图标加上一个），
颜色：颜色，白色，
iconSize:25，
已按下：（）{
设置状态（）{
widget.containerSetState（“增加”）；
//新建文本框（）；不工作。。。。
});
},
),
),
),
),
材料(
颜色：颜色，白色，
儿童：中心(
孩子：墨水(
装饰：const ShapeDecoration(
颜色：颜色。浅蓝色，
形状：CircleBorder（），
),
孩子：我的钮扣(
图标：图标（图标曝光量减去1），
颜色：颜色，白色，
iconSize:25，
已按下：（）{
设置状态（）{
widget.containerSetState（“减少”）；
//新建文本框（）；不工作。。。。
});
},
),
),
),
),
],
);
}
}
类TextBox扩展StatefulWidget{
最终整数计数器；
文本框（{this.counter}）；
@凌驾
_TextBoxState createState（）=>\u TextBoxState（）；
}
当您使用
setState
设置状态时，它只会重建小部件及其所在位置以及容器小部件包含的其他小部件，因此在您的情况下，
TextBox
位于
IconBox
之外，因此只重建
IconBox
，而TextBox无法检测到
状态的更改
class ContainerWidget extends StatefulWidget {
  @override
  _ContainerWidgetState createState() => _ContainerWidgetState();
}

class _ContainerWidgetState extends State<ContainerWidget> {
  int counter = 0;

  void increase() {
    counter += 1;
  }

  void decrease() {
    counter -= 1;
  }

  @override
  void setState(fn) {
    super.setState(fn);
  }

  stateSetter(String event) {
    if (event == "increase") {
      increase();
      setState(() {});
    } else if (event == "decrease") {
      decrease();
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          TextBox(
            counter: counter,
          ),
          IconBox(
            containerSetState: stateSetter,
          ),
        ],
      ),
    );
  }
}

class IconBox extends StatefulWidget {
  final Function containerSetState;

  IconBox({this.containerSetState});

  @override
  _IconBoxState createState() => _IconBoxState();
}

class _IconBoxState extends State<IconBox> {
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Material(
          color: Colors.white,
          child: Center(
            child: Ink(
              decoration: const ShapeDecoration(
                color: Colors.lightBlue,
                shape: CircleBorder(),
              ),
              child: IconButton(
                icon: Icon(Icons.plus_one),
                color: Colors.white,
                iconSize: 25,
                onPressed: () {
                  setState(() {
                    widget.containerSetState("increase");
                    //new TextBox(); not working....
                  });
                },
              ),
            ),
          ),
        ),
        Material(
          color: Colors.white,
          child: Center(
            child: Ink(
              decoration: const ShapeDecoration(
                color: Colors.lightBlue,
                shape: CircleBorder(),
              ),
              child: IconButton(
                icon: Icon(Icons.exposure_minus_1),
                color: Colors.white,
                iconSize: 25,
                onPressed: () {
                  setState(() {
                    widget.containerSetState("decrease");
                    //new TextBox(); not working....
                  });
                },
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class TextBox extends StatefulWidget {
  final int counter;

  TextBox({this.counter});

  @override
  _TextBoxState createState() => _TextBoxState();
}