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

Posted 2023-02-23

【中文标题】如何根据从外部传递的更改值动态更改自定义小部件中成员的值

【英文标题】：How to change the value of a member in a custom widget dynamically based on a changing value passed from outside

【发布时间】：2020-10-28 20:50:55

【问题描述】：

我是新来的颤振。 我正在尝试制作一个自定义小部件，该小部件使用贝塞尔曲线来绘制一个粘乎乎的圆圈，它会根据滑块的值改变其位置。

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

问题是，我需要根据 _sliderValue 更改粘性圆圈的位置（进度），但似乎 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),
    );
  

【参考方案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),
    );