如何在颤动的抽屉中添加一个抽屉？

Question

strong text按下抽屉中的设置，然后打开一个新的抽屉。单击抽屉中的按钮时如何实现抽屉。

Answer 1

因此，基本上，您需要设置状态以更改抽屉小部件的内容。即，最初显示列表项目1、2、3。单击项目1时，设置一个布尔值。如果布尔值为true，则显示列表项目4、5、6。

不确定这是否有意义。现在正在手机上度假，所以我无法提供代码示例。

Answer 2

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        drawer: MyDrawer(),
        body: Center(
          child: Center(child: Text('Text')),
        ),
      ),
    );
  }
}

class MyDrawer extends StatefulWidget {
  @override
  _DrawerState createState() => _DrawerState();
}

class _DrawerState extends State<MyDrawer> {
  int myIndex;
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: 0);
  }

  //The Logic where you change the pages
  _onChangePage(int index){
    if(index != 0) setState(() => myIndex = index); //change myIndex if you're Selecting between Settings and Explore
    _controller.animateToPage(index.clamp(0, 1),
      duration: const Duration(milliseconds: 500), curve: Curves.linear);
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: PageView.builder(
          controller: _controller,
          physics: NeverScrollableScrollPhysics(), //so the user can not move between pages
          itemCount: 2,
          itemBuilder: (context, index) {
            // Original Drawer
            if (index == 0) return MyWidget(
                explore: () => _onChangePage(1),
                settings: () => _onChangePage(2),
              );
            //Second Drawer form the PageView
              switch(myIndex){
                case 1:
                  return MyExploreAll(goBack: () => _onChangePage(0));
                case 2:
                default:
                  return MySettings(goBack: () => _onChangePage(0));
              }
          },
        )
      );
  }
}

//The Menu Drawer (Your first image)
class MyWidget extends StatelessWidget {
  final VoidCallback explore;
  final VoidCallback settings;

  MyWidget({this.explore, this.settings});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList(
          delegate: SliverChildListDelegate([
            ListTile(
              title: Text('Send Money'),
              onTap: () => print('Send Money'),
            ),
            ListTile(
              title: Text('Explore All Amazon Pay'),
              onTap: () => print('Explore All Amazon Pay'),
            ),
            const Divider(color: Colors.grey, thickness: 1,),
            ListTile(
              title: Text('Try Prime'),
              onTap: () => print('Try Prime'),
            ),
            ListTile(
              title: Text('Explore All Programs'),
              trailing: const Icon(Icons.arrow_forward_ios),
              onTap: explore,
            ),
            const Divider(color: Colors.grey, thickness: 1,),
            ListTile(
              title: Text('Fun Zone'),
              onTap: () => print('Fun Zone'),
            ),
            const Divider(color: Colors.grey, thickness: 1,),
            //More Stuff
            ListTile(
              title: Text('Settings'),
              trailing: const Icon(Icons.arrow_forward_ios),
              onTap: settings,
            ),
          ])
        )
      ],
    );
  }
}

// The settings Drawer(second image)
class MySettings extends StatelessWidget {
  final VoidCallback goBack;

  MySettings({this.goBack});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList(
          delegate: SliverChildListDelegate([
            ListTile(
              leading: const Icon(Icons.arrow_back_ios),
              title: Text('Main Menu'),
              onTap: goBack,
            ),
            ListTile(
              title: Text('Settings', textScaleFactor: 3,),
              onTap: () => print('Settings'),
            ),
            const Divider(color: Colors.grey, thickness: 1,),
            ListTile(
              title: Text('Change Country'),
              onTap: () => print('Change Country'),
            ),
            ListTile(
              title: Text('ETC'),
              onTap: () => print('ETC'),
            ),
            const Divider(color: Colors.grey, thickness: 1,),
            ListTile(
              title: Text('Dummy Text'),
              onTap: () => print('Dummy Text'),
            ),
          ])
        )
      ],
    );
  }
}

class MyExploreAll extends StatelessWidget {
  final VoidCallback goBack;

  MyExploreAll({this.goBack});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList(
          delegate: SliverChildListDelegate([
            ListTile(
              leading: const Icon(Icons.arrow_back_ios),
              title: Text('Main Menu'),
              onTap: goBack,
            ),
            ListTile(
              title: Text('Explore All', textScaleFactor: 3,),
              onTap: () => print('Explore'),
            ),
            const Divider(color: Colors.grey, thickness: 1,),
          ])
        )
      ],
    );
  }
}


class MyInnerDrawer extends StatelessWidget {
  final String name;
  final PageController _controller;

  MyInnerDrawer(this._controller, this.name);

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ListTile(
        title: Text(name),
        trailing: const Icon(Icons.arrow_back_ios),
        onTap: () => _controller.animateToPage(0,
            duration: const Duration(milliseconds: 500), curve: Curves.linear),
      )
    ]);
  }
}

使用PageView.builder（），其中索引0是firstPage（具有常规抽屉的第一张图像），索引1是选定的小部件（设置或浏览）。我使用内部索引myIndex在PageView的索引1中的多个选项之间进行选择，这是因为如果使用常规的PageView并为其提供所有选项的列表[Drawer，Explorer，Settings]（如果使用控制器）。 animateToPage（），您可以看到所有页面的过渡，例如，如果您在页面0中，并动画到页面2，则您可能会暂时看到页面1（就像您在水平滚动时一样）。

如果您不想看动画而只是直接跳到该页面，则可以使用controller.jumpToPage（index），并且不需要整个逻辑，这可能会更容易

 class _DrawerState extends State<MyDrawer> {
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: 0);
  }

  _onChangePage(int index){
    _controller.jumpToPage(index);
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: PageView.builder(
          controller: _controller,
          physics: NeverScrollableScrollPhysics(),
          itemCount: 3,
          itemBuilder: (context, index) {
            switch(index){
             case 1:
              return MyExploreAll(goBack: () => _onChangePage(0));
             case 2:
              return MySettings(goBack: () => _onChangePage(0));
             case 0:
             default:
               return MyWidget(
                explore: () => _onChangePage(1),
                settings: () => _onChangePage(2),
              );
           }
          },
        )
      );
  }
}

[这里您只是告诉PageView childCount为3（Drawer菜单，Explorer和Settings），并且只是进行了切换以在这3个索引之间跳转。您可以在此示例中尝试使用animationToPage（），并看到我认为对您的项目不理想的效果]