时间戳

首页 > 解决方案 > 为什么当我在其小部件中调用 Flutter 有状态小部件时，它没有改变另一个有状态小部件的状态

flutter - 为什么当我在其小部件中调用 Flutter 有状态小部件时，它没有改变另一个有状态小部件的状态

问题描述

我创建了两个Stateful Widget类名称Editor{}，其中包含员工卡 UI 和RPMSlider()控制卡中项目半径的名称。

我在下图RPMSlider()中将 Editor Widget其称为如下图所示，

图片

我的问题是当我调整滑块时它完美地工作并显示它上面的值。

但它不能同时在卡片 UI 中进行更改。直到我点击一个button或gesturedetector有SetState();

滑块功能在内部创建时可以正常工作，Editor()但在单独的有状态小部件中它不能在 Card 中进行更改

这是 Gif 秀

这是一个编辑器

class Editor extends StatefulWidget {
  @override
  _EditorState createState() => _EditorState();
}
class _EditorState extends State<Editor> {
  double size = 1;
  var width, height;
  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    // print(width* 0.5733);
    return SafeArea(
      child: Container(
        width: MediaQuery.of(context).size.width,
        child: Row(
          children: [
            //TODO: Left Side
            Container(
              width: width * 0.300,
              color: Color(0xffdbe5e7),
              child: Column(
                children: [
                  //Permanent Area
                ],
              ),
            ),

            Container(
              height: height,
              padding: EdgeInsets.only(top: 10),
              width: width * 0.400,
              decoration: BoxDecoration(
                color: Color(0xffdbe5e7),
              ),
              //TODO: Card Area

              child: FlipCard(
                key: cardKey,
                flipOnTouch: false,
                ///EDITABLE CARD FRONT
                front: Container(),
                ///EDITABLE CARD Back
                back: Container(),
              ),
            ),
            Container(
              width: width * 0.300,
              color: Color(0xffdbe5e7),
              child: Column(
                children: [
                  //TODO: Radius , Padding , Margins
                  RPMSlider(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是 RPMSlider

 class RPMSlider extends StatefulWidget {


  @override
  _RPMSliderState createState() => _RPMSliderState();

}

class _RPMSliderState extends State<RPMSlider> {

  @override
  Widget build(BuildContext context) {

    return radius(caseId: widgetIdCarrier,);

  }

 radius({required String caseId,label='label',position='topLeft'}) {
   return Padding(
     padding: const EdgeInsets.all(4.0),
     child: Column(
       children: [
         Row(
           children: [
             Text(
               label.toUpperCase(),
               style: TextStyle(fontSize: 10, color: Colors.black54),
             ),
             Spacer(),
             Text(
               radiusValue.round().toString(),
               style: TextStyle(fontSize: 10, color: Colors.black54),
             ),
           ],
         ),
         SizedBox(
           height: 4,
         ),
         NeumorphicSlider(
           min: 0.0,
           max: 30,
           sliderHeight: 30,
           thumb: NeumorphicIcon(
             Icons.circle,
             size: 20,
           ),
           height: 1,
           style: SliderStyle(
               borderRadius: BorderRadius.circular(3),
               lightSource: LightSource.bottomRight),
           value:radiusValue

           onChanged: (sts) {
             setState(() {
               radiusValue=sts;
             });
            
           },
         ),
       ],
     ),
   );
}


}

标签： flutterdartflutter-layoutflutter-web

解决方案

你是对的，滑块不能改变另一个小部件。它只能自己改变。它还可以在更改时提供回调。其他小部件已经这样做了，例如NeumorphicSlider您使用的 有一个onChanged回调，当某些事情发生变化时它会调用它，以便您可以在小部件之外进行调整。

所以onChanged也给你的小部件一个回调：

class RPMSlider extends StatefulWidget {
  final ValueChanged<int>? onChanged;

  RPMSlider({this.onChanged});

现在在您的状态类中，每当您收到值已更改的通知时，您都会通知其他已更改的人：

  onChanged: (sts) {
     setState(() {
       radiusValue = sts;
     });
     // the new part:
     final callBack = widget.onChanged
     if(callBack != null) {
        callBack(sts);
     }

现在在您的 EditorState 中，您可以像这样使用它：

RPMSlider(onChanged: (value) {
     setState(() {
       your_state_variable = value; 
       // don't know what your_state_variable is,
       // you need to pick the one you need for this
     });
})

所以现在，该setState方法在正确的状态类中被调用，它实际上可以改变两个小部件，滑块和另一个。

推荐阅读