Question

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

我调用 RPMSlider() 中的 Editor Widget，如下图所示，

image

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

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

<块引用>

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

这里是 Gif Show

这是一个编辑器

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;
             });
            
           },
         ),
       ],
     ),
   );
}


}

Answer 1

您说得对，滑块无法更改其他小部件。它只能改变它自己。它还可以在改变时提供回调。其他小部件已经这样做了，例如您使用的 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 方法在正确的状态类中被调用，它实际上可以改变两个小部件、滑块和另一个。

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

1 个答案: