Flutter：如何在AppBar中使用动画图标-我想在Flutter应用程序的应用栏中使用此动画图标代替Animatedless Icon

如何解决Flutter：如何在AppBar中使用动画图标-我想在Flutter应用程序的应用栏中使用此动画图标代替Animatedless Icon

我想在此AppBar中使用动画图标，但无法完成，因为该动画图标具有带有“ with TickerProviderStateMixin”的有状态小部件。如果我将整个支架移动到有状态的小部件，则“ onMenuTap”不起作用。该问题的主要目的是使用Flutter AppBar中的动画图标。

def func_checkprice():
    try:
        global product_link
        
        product_link = link.get()
        page =requests.get(product_link)
        soup = BeautifulSoup(page.content,'html.parser')
        product_name = soup.find(class_='_35KyD6').get_text()
        price = soup.find(class_='_1vC4OE _3qQ9m1').get_text()
        print(product_name,price,ctime())
        product_window = Tk()
        product_window.geometry("200x200")
        back_img1 = ImageTk.PhotoImage(Image.open("388275.jpg"))
        back_label1 = Label(product_window,image=back_img1)
        back_label1.place(x=0,y=0,relheight=1,relwidth=1)
        details_name = Label(product_window,text=product_name,wraplength=120)
        details_price = Label(product_window,text=price,wraplength=120)
        details_name.grid(row=0,column=0)
        details_price.grid(row=0,column=1)
        okay_button = Button(product_window,text="Okay",command=product_window.destroy)
        okay_button.grid(row=1,column=0,columnspan=2,ipadx=10,pady=5)
        link.delete(0,END)
    except:
        popup = messageBox.showerror("Error","Invalid Link") 

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

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(),);
      }
    }

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

leading: IconButton(
                tooltip: 'App Settings',

解决方法

您可以在下面复制粘贴运行完整代码
步骤1：您可以使用StatefulWidget制作具有VoidCallback onMenuTap

的动画图标

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,);
  }
}