尝试在新应用中实现侧面抽屉,我可以渲染它,但是它覆盖了整个屏幕,这是我的设置方法:
主页:
class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), ), drawer: SideDrawer(), body: Center( child: Text('Home page'), ), ); } }
抽屉小部件在一个单独的文件中:
class SideDrawer extends StatelessWidget { const SideDrawer({Key key, this.user}) : super(key: key); final FirebaseUser user; @override Widget build(BuildContext context) { return new SizedBox( width: MediaQuery.of(context).size.width * 0.85, child: Drawer( child: new ListView( children:[ new DrawerHeader( child: new Text("DRAWER HEADER.."), decoration: new BoxDecoration(color: Colors.orange), ), new ListTile( title: new Text("Item => 1"), onTap: () { Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new HomePage())); }, ), ], )), ); } }
更新:抽屉应该从登录页面获取用户详细信息,我想这里的问题与抽屉是从单独的家用脚手架上调用有关的,这就是为什么一开始它覆盖了整个区域的原因,尽管有85%屏幕区域已在代码中设置。
我也尝试过此解决方案,但是没有任何建议吗?
您的大多数代码都可以。但是,您应该制作一个,Widget side(BuildContext context)
而不是制作一个SideDrawer class extends StatelessWidget
这是完整的main.dart
import 'package:flutter/material.dart'; import 'side.dart'; import 'user.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage(title: 'Flutter Demo Home Page'), ); } } class HomePage extends StatefulWidget { HomePage({Key key, this.title}) : super(key: key); final String title; @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State{ User user = new User("name","firstname","adress","username"); Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), ), drawer: new SideDrawer(user:user), body: Center( child: Text('Home page'), ), ); } }
这是另一个包含sideDrawer的文件
import 'package:flutter/material.dart'; import 'main.dart'; import 'user.dart'; class SideDrawer extends StatelessWidget { const SideDrawer({Key key, this.user}) : super(key: key); final User user; @override Widget build(BuildContext context) { return new SizedBox( width: MediaQuery.of(context).size.width * 0.85,//20.0, child: Drawer( child: new ListView( children:[ new DrawerHeader( child: new Text("DRAWER HEADER.."), decoration: new BoxDecoration(color: Colors.orange), ), new ListTile( title: new Text(user.name), onTap: () { Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new HomePage())); }, ), new ListTile( title: new Text(user.firstname), onTap: () { Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new HomePage())); }, ), new ListTile( title: new Text(user.adress), onTap: () { Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new HomePage())); }, ), new ListTile( title: new Text(user.username), onTap: () { Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new HomePage())); }, ), ], )), ); } }
最终显示如下:
跳频对您有帮助。
问候
编辑:
我已经更新了代码和图片以满足您的需求。我还制作了一个假冒品User class
,仅用于演示目的。