如何在 Flutter 按钮中切换播放和暂停图标？

Question

我有一个

FloatingActionButton

，单击时会将其图标更改为暂停图标。再次单击按钮时如何将图标切换回播放图标？

代码：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      AnimatedBuilder(
          animation: controller,
          builder: (context, child) {
            return FloatingActionButton.extended(
                onPressed: () {
                  if (controller.isAnimating)
                    controller.stop();
                  else {
                    controller.reverse(
                        from: controller.value == 0.0
                            ? 1.0
                            : controller.value);
                  }
            },
                icon: Icon(
                  controller.isAnimating
                    ? Icons.pause
                    : Icons.play_arrow  ,
                  color: Color(0xffF2F2F2),),

                label: Text(
                  controller.isAnimating ? "Pause" : "Play",));

          }),
      SizedBox(width: 20,),
      AnimatedBuilder(
          animation: controller,
          builder: (context, child) {
            return FloatingActionButton.extended(
              onPressed: () {
                if (controller.isAnimating)
                  controller.reset();
              },
              icon: Icon(Icons.refresh,
                color: Color(0xffF2F2F2),),

              label: Text("Refresh",),);

          }),
    ],
  )

说明：

我希望每次点击按钮时都能在播放图标 (

Icons.play_arrow

) 和暂停图标 (

Icons.pause

) 之间无缝切换。

Answer 1

创建一个变量

_isPlaying = false

，然后相应地更新它。此外，请拨打

myController.forward()

而不是

reverse()

。我不是动画大师，所以我可能会弄错（你可能需要稍微调整一下）。但它似乎确实有效：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  var _animationController;
  var _isPlaying = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        AnimatedBuilder(
            animation: _animationController,
            builder: (context, child) {
              return FloatingActionButton.extended(
                  onPressed: () {
                    setState(() {
                      _isPlaying = !_isPlaying;
                    });
                    if (_animationController.isAnimating)
                      _animationController.stop();
                    else {
                      _animationController.forward(
                          from: _animationController.value == 0.0
                              ? 1.0
                              : _animationController.value);
                    }
                  },
                  icon: Icon(
                    _isPlaying ? Icons.pause : Icons.play_arrow,
                    color: Color(0xffF2F2F2),
                  ),
                  label: Text(
                    _animationController.isAnimating ? "Pause" : "Play",
                  ));
            }),
        SizedBox(
          width: 20,
        ),
        AnimatedBuilder(
            animation: _animationController,
            builder: (context, child) {
              return FloatingActionButton.extended(
                onPressed: () {
                  setState(() {
                    _isPlaying = !_isPlaying;
                  });
                },
                icon: Icon(
                  Icons.refresh,
                  color: Color(0xffF2F2F2),
                ),
                label: Text(
                  "Refresh",
                ),
              );
            }),
      ],
    ));
  }

  @override
  void initState() {
    // TODO: implement initState
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    super.initState();
  }
}