Flutter UI如何实现侧拉抽屉菜单

小编给大家分享一下Flutter UI如何实现侧拉抽屉菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

在移动开发中，我们可以通过底部导航栏、标签页或是侧边抽屉菜单来实现导航。这是在小屏幕上可以充分利用空间。我们设计不仅要实用而且要有趣，这样才算得上好的 UI 设计。这件我们在 Scaffold 通常是上下结构，头部是标题栏下面主界面。

@overrideWidget build(BuildContext context) {  // TODO: implement build  return Scaffold(    appBar: AppBar(title: Text(title),),    body: Center(child: Text('$title Demo'),),  ), ),);

Scaffold 除了 appBar 和 body 属性以为还有 drawer 属性方便我们定义侧边抽屉。

@overrideWidget build(BuildContext context) {  // TODO: implement build  return Scaffold(    appBar: AppBar(title: Text(title),),    body: Center(child: Text('$title Demo'),),    drawer: Drawer(    )    ),  ),);

这样便可以在 child 为侧拉抽屉添加内容，内容是添加一个列表。DrawerHeader 添加标题栏。然后 decoration 中添加背景颜色。然后通过 ListTile 组件来添加一条一条内容

child: ListView(      padding: EdgeInsets.zero,      children: <Widget>[        DrawerHeader(          child: Text('$title Demo'),          decoration: BoxDecoration(            color: Colors.blue          ),        ),        ListTile(          title: Text("React"),          onTap: (){            Navigator.pop(context);          },        ),        ListTile(           title: Text("Vue"),           onTap: (){            Navigator.pop(context);           },        )      ],),

为 ListTile 添加 onTap 事件来通过 Navigator 返回到主界面。

ListTile(      title: Text("Vue"),      onTap: (){        Navigator.pop(context);      }, )

完整代码

import 'package:flutter/material.dart'; class DrawerApp extends StatelessWidget{   final appTitle = "侧滑抽屉";   @override  Widget build(BuildContext context) {    // TODO: implement build    return MaterialApp(      title: appTitle,      home: MyHomePage(title:appTitle),    );  }  } class MyHomePage extends StatelessWidget{  final String title;  MyHomePage({Key key,this.title}):super(key:key);   @override  Widget build(BuildContext context) {    // TODO: implement build    return Scaffold(      appBar: AppBar(title: Text(title),),      body: Center(child: Text('$title Demo'),),      drawer: Drawer(        child: ListView(          padding: EdgeInsets.zero,          children: <Widget>[            DrawerHeader(              child: Text('$title Demo'),              decoration: BoxDecoration(                color: Colors.blue              ),            ),            ListTile(              title: Text("React"),              onTap: (){                Navigator.pop(context);              },            ),            ListTile(              title: Text("Vue"),              onTap: (){                Navigator.pop(context);              },            )          ],        ),      ),    );  }}

看完了这篇文章，相信你对“Flutter UI如何实现侧拉抽屉菜单”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！