如何在活动堆栈上执行PushNamed路由

问题描述

因此，我在学习有关AnimatedContainer（）的知识，并使用AnimatedContainer创建了一个自定义抽屉。看起来像这样。

The app

每当我点击菜单按钮时，动画容器就会收缩，再次轻按时，容器将保持其原始大小。我在这里所做的是我使用了Stack，并在其中添加了DrawerScreen（），HomeScreen（）作为其子级，因此当主页移动时，您可以看到抽屉。

我面临的问题： 我打算做的是，当我按下抽屉按钮（“主页”，“浏览”，“聊天”等）时，它应该将用户重定向到该页面。但是我对操作方法感到困惑，因为抽屉屏幕始终出现在背面，我只需要将新屏幕推到HomeScreen上即可。

这是我的代码：

Main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: ContData(),child: MaterialApp(
        home: Scaffold(
          body: Stack(
            children: [
              DrawerScreen(),HomeScreen(),],),routes: {'explore': (context) => Explore_Screen()},);
  }
}

HomeScreen.dart

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  double xFactor = 0;
  double yFactor = 0;
  double zFactor = 0;
  double spaceFactor = 1;
  bool isDrawerOn = false;

  List<BoxShadow> shadow = [
    BoxShadow(color: Colors.grey[300],blurRadius: 30,offset: Offset(0,10))
  ];

  @override
  Widget build(BuildContext context) {
    final data = Provider.of<ContData>(context);
    return AnimatedContainer(
      decoration: Boxdecoration(
        borderRadius: BorderRadius.circular(30),color: Colors.grey[200],duration: Duration(milliseconds: 250),transform: Matrix4.translationValues(xFactor,yFactor,zFactor)
        ..scale(spaceFactor),child: Column(
        children: [
          SizedBox(
            height: 50,Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
              isDrawerOn
                  ? IconButton(
                      icon: Icon(Icons.arrow_back),onpressed: () {
                        data.setParam(0,1,false);
                        xFactor = data.data['xFactor'];
                        yFactor = data.data['yFactor'];
                        zFactor = data.data['zFactor'];
                        spaceFactor = data.data['scaleFactor'];
                        isDrawerOn = data.data['isOpen'];
                        data.clearData();
                      })
                  : IconButton(
                      icon: Icon(Icons.menu),onpressed: () {
                        data.setParam(250,175,0.6,true);
                        xFactor = data.data['xFactor'];
                        yFactor = data.data['yFactor'];
                        zFactor = data.data['zFactor'];
                        spaceFactor = data.data['scaleFactor'];
                        isDrawerOn = data.data['isOpen'];
                        data.clearData();
                      }),Container(
                padding: EdgeInsets.symmetric(horizontal: 80,vertical: 8),decoration: Boxdecoration(
                    borderRadius: BorderRadius.circular(20),color: Colors.white,BoxShadow: shadow),child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
                    Icon(Icons.search),Text('Search'),IconButton(icon: Icon(Icons.more_vert),onpressed: () {})
            ],SizedBox(height: 30),Container(
            margin: EdgeInsets.symmetric(horizontal: 15),height: 250,child: Row(
              children: [
                Expanded(
                  child: Stack(children: [
                    Container(
                      margin: EdgeInsets.only(top: 40),decoration: Boxdecoration(
                          borderRadius: BorderRadius.circular(10),color: Colors.grey[400]),Align(
                      child: Image.asset(
                        'assets/pet-cat1.png',)
                  ]),Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 60,bottom: 20),decoration: Boxdecoration(
                      color: Colors.white,BoxShadow: shadow,borderRadius: BorderRadius.only(
                          topRight: Radius.circular(20),bottomright: Radius.circular(20)),child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                        Text(
                          'Cat Name',style: TextStyle(color: Colors.cyan,fontSize: 20),Text("Cat Type"),Row(
                          mainAxisAlignment: MainAxisAlignment.center,children: [
                            Icon(
                              Icons.pin_drop,color: Colors.cyan,SizedBox(width: 10),Text('Location'),)
                      ],)
              ],)
        ],);
  }
}

DrawerScreen.dart

class DrawerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,alignment: Alignment.centerLeft,child: Container(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10),child:
              Column(crossAxisAlignment: CrossAxisAlignment.center,children: [
            SizedBox(
              height: 50,Row(
              children: [
                CircleAvatar(
                  backgroundColor: Colors.orange,radius: 25,SizedBox(
                  width: 10,Text(
                  'Hello Rijin Thomas!',style: TextStyle(color: Colors.white,SizedBox(height: 80),ListView(shrinkWrap: true,children: [
              ListTile(
                onTap: () {},leading: Icon(Icons.home,color: Colors.white),title: Text('Home',style: TextStyle(color: Colors.white)),ListTile(
                onTap: () {
                  Navigator.of(context).pushReplacementNamed('/explore');
                },leading: Icon(Icons.explore,title: Text('Explore',ListTile(
                leading: Icon(Icons.chat,title: Text('Chat',ListTile(
                leading: Icon(Icons.store,title: Text('Store',ListTile(
                leading: Icon(Icons.photo,title: Text('gallery',ListTile(
                leading: Icon(Icons.Feedback,title: Text('Feedback',]),Spacer(),Row(children: [
              Icon(
                Icons.settings,SizedBox(width: 5),Text(
                'Settings',style: TextStyle(color: Colors.white),SizedBox(width: 15),Icon(
                Icons.exit_to_app,Text(
                'logout',SizedBox(height: 20)
          ]),);
  }
}

我知道我尚未将小部件拆分为较小的小部件，因此它看起来很丑。如果有人可以帮助我，那就太好了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）