时间戳

首页 > 解决方案 > 如何在没有 Scaffold.drawer 的情况下使用 Drawer？

dart - 如何在没有 Scaffold.drawer 的情况下使用 Drawer？

问题描述

我注意到 Scaffold.drawer 的 Drawer 仅在存在 AppBar 的 Scaffold 时出现。

但是，我使用了 BottomNavigationBar 中的 BottomAppBar，而不是 AppBar。

如何让 Drawer 与 BottomAppBar 一起使用？这是我的代码下面没有出现抽屉

class homieclass extends State<homie>{

@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold(

    backgroundColor: Colors.white70.withOpacity(0.9),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(onPressed: (){},backgroundColor: Colors.redAccent,child: ImageIcon(new AssetImage("ast/hello123.png")),),
    bottomNavigationBar: BottomAppBar(child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,mainAxisSize: MainAxisSize.max,children: <Widget>[
        IconButton(icon: Icon(Icons.menu), onPressed: (){}),IconButton(icon: Icon(Icons.message), onPressed: (){}),
    ],
    ),
    ),
    body: new Column(
      children: <Widget>[new SizedBox(height: 50.0, ),
        Container(margin: EdgeInsets.only(left: 0.0),child: new Text("Events",textAlign: TextAlign.left,style: TextStyle(fontFamily: 'ssfr',fontSize: 35.0,fontWeight: FontWeight.bold),),)
        , Container(margin: EdgeInsets.only(left: 10.0,right: 10.0) ,width: 360.0,height: 40.0,decoration: new BoxDecoration(color: Colors.blueGrey.withOpacity(0.2),
          border: new Border.all(color: Colors.blueGrey.withOpacity(0.0), width: 2.0),
          borderRadius: new BorderRadius.circular(10.0),),child: new Row(children: <Widget>[SizedBox(width: 10.0,),Icon(Icons.search,color: Colors.blueGrey.withOpacity(0.9),),Text(" Search",style: TextStyle(fontFamily: 'ssft',color: Colors.blueGrey,fontSize: 20.0),)],),)
      ,new SizedBox(height: 10.0,),new SizedBox(
        height: 5.0,
        child: new Center(
          child: new Container(
            margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
            height: 2.0
            ,
            color: Colors.redAccent.withOpacity(0.8),
          ),
        ),
      ),],
    ),drawer: new Drawer(
    child: new ListView(
      children: <Widget>[ListTile(title: Text("hello"),)],
    ),
  ),

  ),
);

}

标签： dartflutter

解决方案

它非常适合我。这是一个工作示例，底部栏中有一个专用的“显示抽屉”按钮（抽屉也可以从左侧拖入）：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Body'),
      ),
      bottomNavigationBar: Builder(builder: (BuildContext context) {
        return BottomAppBar(
          color: Colors.orange,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              IconButton(icon: Icon(Icons.menu), onPressed: () {
                Scaffold.of(context).openDrawer();;
              }),
              IconButton(icon: Icon(Icons.message), onPressed: () {}),
            ],
          ),
        );
        },),
      drawer: Drawer(
        child: SafeArea(
          right: false,
          child: Center(
            child: Text('Drawer content'),
          ),
        ),
      ),
    );
  }
}

Flutter 版本：最新的主版本（虽然我也很确定它适用于 beta 版本）

推荐阅读