如何根据从外部传递的变化值动态更改自定义小部件中成员的值

Question

我是 Flutter 新手。我试图制作一个自定义小部件，它使用 Bézier 曲线绘制一个粘糊糊的圆圈，它会根据滑块的值更改其位置。

我做了一个 gif 来展示我在做什么。GooeyCircle

问题是，我需要根据 _sliderValue 更改 gooey circle 的位置（进度），但似乎 GooeyCircleWidget 中的 progress 保持初始值并且无论滑块何时移动都不会更改。我希望它动态地传递到小部件中，任何人都可以帮我找出我应该做什么吗？谢谢！

GooeyCircleWidget(
              progress: _sliderValue,
              color: Colors.blue,
            ),

class GooeyCircleWidget extends StatefulWidget {
  Color color;
  double progress ;

  _GooeyCircleWcoloridgetState createState() => _GooeyCircleWidgetState(
    progress: progress,
    color:color,
  );
  GooeyCircleWidget({
   @required this.progress,
   this.color
});å
}

class _GooeyCircleWidgetState extends State<GooeyCircleWidget>
    with SingleTickerProviderStateMixin {
  final double progress;
  AnimationController controller;
  final Color color;

  _GooeyCircleWidgetState(
      {@required this.progress,
        this.color});


  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);


  }


  @override
  Widget build(BuildContext context) {
    print(progress);
    // TODO: implement build
    return CustomPaint(
      painter: AnimatedCirclePainter( 
      progress: progress,
      color: color,
      ),
      size: Size(1080, 200),
    );
  }
}

Answer 1

不要将 GooeyCircleWidget 中的变量传递给 _GooeyCircleWidgetState 的构造函数。而是使用 widget.

像这样：

class GooeyCircleWidget extends StatefulWidget {
  Color color;
  double progress ;

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

  GooeyCircleWidget({
   @required this.progress,
   this.color,
  });
}

class _GooeyCircleWidgetState extends State<GooeyCircleWidget>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    print(widget.progress);
    // TODO: implement build
    return CustomPaint(
      painter: AnimatedCirclePainter( 
      progress: widget.progress,
      color: widget.color
      ),
      size: Size(1080, 200),
    );
  }
}

如何根据从外部传递的变化值动态更改自定义小部件中成员的值

How to change the value of a member in a custom widget dynamically based on a changing value passed from outside

flutter

flutter-layout

flutter-dependencies

flutter-animation

flutter-widget