如何在颤动的抽屉内再添加一个抽屉？
Posted
技术标签:
【中文标题】如何在颤动的抽屉内再添加一个抽屉？【英文标题】：how to add one more drawer inside a drawer in flutter? 【发布时间】：2020-09-26 19:39:04 【问题描述】：strong text 当我按下抽屉中的设置然后打开一个新抽屉时。当我单击抽屉中的按钮时如何实现抽屉。
【问题讨论】：
请提供您的代码示例。不看任何代码就更难理解问题。请阅读更多关于如何提供mcve 【参考方案1】：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 并在使用控制器的情况下为其提供所有选项 [抽屉、资源管理器、设置] 的列表。 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（抽屉菜单、资源管理器和设置），然后执行一个 switch case 在这 3 个索引之间跳转。您可以尝试在此示例中使用 animationToPage() 并查看我认为不适合您的项目的效果
【讨论】：
【参考方案2】：所以基本上你会想要设置状态来改变抽屉小部件的内容。即最初显示列表项 1、2、3。单击第 1 项时，设置一个布尔值。如果 bool 为真，则显示列表项 4、5、6。
不确定这是否有意义。我现在在手机上度假，所以我无法提供代码示例。
【讨论】：
以上是关于如何在颤动的抽屉内再添加一个抽屉？的主要内容，如果未能解决你的问题，请参考以下文章