Flutter：如何在 AppBar 中使用动画图标 - 我想在 Flutter 应用的 appbar 中使用这个动画图标而不是 Animatedless Icon

Question

我想在这个 AppBar 中使用动画图标，但因为动画图标有一个带有“with TickerProviderStateMixin”的有状态小部件，所以无法完成。如果我将整个脚手架移动到有状态小部件，则“onMenuTap”不起作用。 Question的主要目的是使用Flutter AppBar中的动画图标。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../FreelanceTheme/AppStyleModeNotifier.dart';

class HomePage extends StatelessWidget with NavigationStates {
      final Function onMenuTap;
      const HomePage({Key key, this.onMenuTap}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
        return MaterialApp(
          home: Scaffold(
            backgroundColor: Color(0xffE5E5E5),
            appBar: AppBar(
              elevation: 0,
              backgroundColor: appStyleMode.appBarBackgroundColor,
              actions: <Widget>[
                Switch(
                  activeColor: Colors.orange,
                  value: appStyleMode.mode,
                  onChanged: (value) => appStyleMode.switchMode(),
                ),
              ],
              leading: IconButton(
                tooltip: 'App Settings',
                icon: Icon(
                  FontAwesomeIcons.bars,
                  color: Colors.white,
                ),
                onPressed: onMenuTap,
              ),
              centerTitle: true,
              title: Text(
                "Home",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            body: FreelancingHomePage(),
          ),
        );
      }
    }

我想用应用栏中的动画图标替换这个 IconButton。

leading: IconButton(
                tooltip: 'App Settings',
                icon: Icon(
                  FontAwesomeIcons.bars,
                  color: Colors.white,
                ),
                onPressed: onMenuTap,
              ),

以下是动画图标的代码。我想在上面的appBar中使用这个动画图标。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

 AnimationController _animationIconController1,
 bool isarrowmenu = false;


@override
  void initState() {
    super.initState();
    _animationIconController1 = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 750),
      reverseDuration: Duration(milliseconds: 750),
    );
 }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(


GestureDetector(
              onTap: () {
                setState(() {
                  isarrowmenu
                      ? _animationIconController1.reverse()
                      : _animationIconController1.forward();
                  isarrowmenu = !isarrowmenu;
                });
              },
              child: ClipOval(
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 2.5,
                      color: Colors.green,
                    ),
                    borderRadius: BorderRadius.all(
                      Radius.circular(50.0),
                    ),
                  ),
                  width: 75,
                  height: 75,
                  child: Center(
                    child: AnimatedIcon(
                      icon: AnimatedIcons.arrow_menu,
                      progress: _animationIconController1,
                      color: Colors.red,
                      size: 60,
                    ),
                  ),
                ),
              ),
            ),
     ),
   );
 }

Answer 1

您可以在下面复制粘贴运行完整代码
第 1 步：您可以使用具有VoidCallback onMenuTap 的StatefulWidget 制作此动画图标

class CustomIcon extends StatefulWidget {
  VoidCallback onMenuTap;

  CustomIcon({Key key, this.onMenuTap}) : super(key: key);
  @override
  _CustomIconState createState() => _CustomIconState();
}

class _CustomIconState extends State<CustomIcon> with TickerProviderStateMixin {
  AnimationController _animationIconController1;

第2步：在leading中，可以使用CustomIcon并传递onMenuTap

home: HomePage(
        onMenuTap: () {
          print("hi");
        },
      ),
...   
leading: CustomIcon(
            onMenuTap: () {
              onMenuTap();
            },
          ),

工作演示

工作演示的输出

I/flutter (25195): hi
I/flutter (25195): hi

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(
        onMenuTap: () {
          print("hi");
        },
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final Function onMenuTap;
  const HomePage({Key key, this.onMenuTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xffE5E5E5),
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.blue,
          actions: <Widget>[
            /* Switch(
              activeColor: Colors.orange,
              value: appStyleMode.mode,
              onChanged: (value) => appStyleMode.switchMode(),
            ),*/
          ],
          leading: CustomIcon(
            onMenuTap: () {
              onMenuTap();
            },
          ),
          centerTitle: true,
          title: Text(
            "Home",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
        body: Text("FreelancingHomePage()"),
      ),
    );
  }
}

class CustomIcon extends StatefulWidget {
  VoidCallback onMenuTap;

  CustomIcon({Key key, this.onMenuTap}) : super(key: key);
  @override
  _CustomIconState createState() => _CustomIconState();
}

class _CustomIconState extends State<CustomIcon> with TickerProviderStateMixin {
  AnimationController _animationIconController1;
  bool isarrowmenu = false;

  @override
  void initState() {
    super.initState();
    _animationIconController1 = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 750),
      reverseDuration: Duration(milliseconds: 750),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isarrowmenu
              ? _animationIconController1.reverse()
              : _animationIconController1.forward();
          isarrowmenu = !isarrowmenu;

          if (widget.onMenuTap != null) {
            widget.onMenuTap();
          }
        });
      },
      child: ClipOval(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 2.5,
              color: Colors.green,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(50.0),
            ),
          ),
          width: 75,
          height: 75,
          child: Center(
            child: AnimatedIcon(
              icon: AnimatedIcons.arrow_menu,
              progress: _animationIconController1,
              color: Colors.red,
              size: 60,
            ),
          ),
        ),
      ),
    );
  }
}