"為什么屏幕加載時我的 CircularProgressIndicator 隨機旋轉？"

Question

我有一個 CircularProgressIndicator，用於在用戶按下按鈕時顯示進度。 但是，當我打開使用此類的屏幕時，它會顯示加載動畫，我不知道為什么。 當屏幕打開時，它不應該在用戶按下按鈕之前顯示動畫。

當屏幕打開時，您會在此頁面上看到類似於動畫的內容： https<\/a> :\/\/www.c-sharpcorner.com\/article\/create-chrome-like-loading-animation\/

class _MsgInputState extends State<MsgInput> with TickerProviderStateMixin {

  AnimationController? controller;

  @override
  void initState() {
    super.initState();
    initialize();

  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  void initialize() async {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    )..addListener(() {
      setState(() {});
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Align(
          alignment: Alignment.bottomLeft,
          child: Column(
            children: [
              Row(
                children: [
                  GestureDetector(
                    onTap: () async {
                      controller?.forward();
                    },
                    onLongPressDown: (details) async {
                      controller?.forward();
                    },
                    onLongPressUp: () async {
                      controller?.stop();
                      controller?.reset();
                    },
                    child: Text('Record'),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  SizedBox(width: 100),
                  CircularProgressIndicator(
                    value: controller?.value,
                    semanticsLabel: 'Linear progress indicator',
                  ),
                ],
              ),
            ],
          ),
        )
    );
  }

Answer 1

如果提供給CircularProgressIndicator<\/code>的值為null<\/code> ，則它默認為旋轉動畫。

在 beginnin controller?.value<\/code>可能返回null<\/code> 。 將其更改為value: controller?.value ?? 0<\/code> value: controller?.value ?? 0<\/code>以便當它為null<\/code>時 0 用作值。

Answer 2

以下是有關如何實現所提供示例的快速示例：

class StateProgress extends StatelessWidget {
  const StateProgress({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: SizedBox(
        height: 50,
        width: 50,
        child: CircularProgressIndicator(
          strokeWidth: 2,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent /*Should be the color of the indicator*/),
          backgroundColor: Colors.white, //  Could be made to match the color of the background the indicator is on
        ),
      ),
    );
  }
}