0

我有一个 CircularProgressIndicator，用于在用户按下按钮时显示进度。但是，当我打开使用此类的屏幕时，它会显示加载动画，我不知道为什么。当屏幕打开时，它不应该在用户按下按钮之前显示动画。

当屏幕打开时，您会在此页面上看到类似于动画的内容：https ://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',
                  ),
                ],
              ),
            ],
          ),
        )
    );
  }
4

2 回答 2

1

如果提供给 a 的值CircularProgressIndicator是null它只是默认为旋转动画。

一开始controller?.value大概就回来了null。将其更改为value: controller?.value ?? 0以便在它null为 0 时用作值。

编辑：

改变

CircularProgressIndicator(
  value: controller?.value,
  semanticsLabel: 'Linear progress indicator',
),

至

CircularProgressIndicator(
  value: controller?.value ?? 0,
  semanticsLabel: 'Linear progress indicator',
),
于 2022-02-07T00:22:44.980 回答
-1

以下是有关如何实现所提供示例的快速示例：

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
        ),
      ),
    );
  }
}
于 2022-02-07T01:46:44.877 回答