我正在尝试实现一个底部导航抽屉，类似于Reply Material Study 中使用的导航抽屉，它是底部应用栏的扩展，并通过底部应用栏中的图标按钮打开和关闭。
我尝试过底部工作表，但它会替换或悬停在底部应用栏的顶部。我希望它看起来像屏幕截图中的那样，底部应用栏停留在屏幕上，当点击“菜单”按钮时，底部导航抽屉向上滑动。
Material Design 网站将其显示为一个组件，但没有链接到任何展示如何在 Flutter 中实现它的地方。
【问题讨论】：
我很快就做到了，但是您必须在列表视图中实现活动页面文本/图标颜色。另外，如果您想从要点中复制，完整的代码是here。
class ScreenOne extends StatefulWidget {
@override
_ScreenOneState createState() => _ScreenOneState();
}
class _ScreenOneState extends State<ScreenOne> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Reply demo"),
),
bottomNavigationBar: BottomAppBar(
elevation: 0,
color: Color(0xff344955),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
height: 56.0,
child: Row(children: <Widget>[
IconButton(
onPressed: showMenu,
icon: Icon(Icons.menu),
color: Colors.white,
),
Spacer(),
IconButton(
onPressed: () {},
icon: Icon(Icons.add),
color: Colors.white,
)
]),
),
),
);
}
showMenu() {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
),
color: Color(0xff232f34),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: 36,
),
SizedBox(
height: (56 * 6).toDouble(),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
),
color: Color(0xff344955),
),
child: Stack(
alignment: Alignment(0, 0),
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: -36,
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
border: Border.all(
color: Color(0xff232f34), width: 10)),
child: Center(
child: ClipOval(
child: Image.network(
"https://i.stack.imgur.com/S11YG.jpg?s=64&g=1",
fit: BoxFit.cover,
height: 36,
width: 36,
),
),
),
),
),
Positioned(
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
ListTile(
title: Text(
"Inbox",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.inbox,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Starred",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.star_border,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Sent",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.send,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Trash",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.delete_outline,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Spam",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.error,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Drafts",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.mail_outline,
color: Colors.white,
),
onTap: () {},
),
],
),
)
],
))),
Container(
height: 56,
color: Color(0xff4a6572),
)
],
),
);
});
}
}
【讨论】：
BottomAppBar 小部件，只需保留其中包含行的容器即可。
您可以使用 BottomSheet 。 （感谢westdabestdb）
正在开发 flutter_gallery 演示应用：
class ModalBottomSheetDemo extends StatelessWidget {
static const String routeName = '/material/modal-bottom-sheet';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Modal bottom sheet'),
actions: <Widget>[MaterialDemoDocumentationButton(routeName)],
),
body: Center(
child: RaisedButton(
child: const Text('SHOW BOTTOM SHEET'),
onPressed: () {
showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Text('This is the modal bottom sheet. Tap anywhere to dismiss.',
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 24.0
)
)
)
);
});
}
)
)
);
}
}
【讨论】：
BottomSheet 和 ListView :)