如何在不使用Scaffold.drawer的情况下使用Drawer?

时间:2018-08-17 08:57:54

标签: dart flutter

我注意到Scaffold.Drawer的Drawer仅在存在Scaffold的AppBar时显示。

但是我使用BottomNavigationBar中存在的BottomAppBar代替了AppBar。

如何使Drawer与BottomAppBar一起使用? 这是我的下面没有显示抽屉的代码

class homieclass extends State<homie>{

@override   小部件build(BuildContext context){     返回MaterialApp(       debugShowCheckedModeBanner:否,       主页:新脚手架(

    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"),)],
    ),
  ),

  ),
);

}

3 个答案:

答案 0 :(得分:2)

对我来说效果很好。这是一个工作示例,底部栏中带有专用的“显示抽屉”按钮(也可以从左侧拖动抽屉):

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版本一起使用)

答案 1 :(得分:0)

您可以使用Drawer,但是您必须提供DrawerController,并且还要安排抽屉覆盖您的其他内容。使用Stack很容易做到。重要的是,堆栈必须容纳一个不透明的容器,否则当绘图滑入和滑出时,您将获得渲染工件。脚手架不需要这样做,但很烦人的是,它还在绘制移动时重新构建了其他内容(正是他们试图避免的类型)。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutterui/util/layout_util.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
      MaterialApp(title: 'Flutter Playground',
          home: Material(child:DrawerStack(body: body(), drawer: _drawer())));
}

Drawer _drawer() =>Drawer(
  child: SafeArea(
    child: Center(
      child: Column(
        children: [
          Text('endDrawer content'),
          Builder(builder:(context) => RaisedButton(
            child: Text('Click', semanticsLabel: 'Click 2'),
            onPressed: () {
              Navigator.pop(context);
            },
          )),
        ],
      ),
    ),
  ),
);

Widget body() => Container(
  decoration: BoxDecoration(color: Color.fromARGB(255, 255, 255, 255)),
        child: SafeArea(
            child: Center(
                child: Column(children: [
      Text('Body'), // style:TextStyle(fontSize: 14.0,color: Colors.black)),
      Builder(builder:(context) => RaisedButton(
          child: Text('Open drawer'),
          onPressed: () {
            (context.ancestorWidgetOfExactType(DrawerStack) as DrawerStack).openDrawer();
//            DrawerStack.of(context).openDrawer();
          })),
    ]))));


class DrawerStack extends StatelessWidget {
  final GlobalKey<DrawerControllerState> _drawerKey =
  GlobalKey<DrawerControllerState>();
  final drawerScrimColor = Color.fromARGB(90, 100, 100, 128);
  final double drawerEdgeDragWidth = null;
  final DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start;

  final Widget body;
  final Drawer drawer;

  DrawerStack({Key key, this.body, this.drawer}) : super(key: key);

  void openDrawer() {
    _drawerKey.currentState?.open();
  }

  @override
  Widget build(BuildContext context) => Stack(
    children: [
      // body
      body,

      DrawerController(
        key: _drawerKey,
        alignment: DrawerAlignment.end,
        child: drawer,
        drawerCallback: (_){},
        dragStartBehavior: drawerDragStartBehavior,
        //widget.drawerDragStartBehavior,
        scrimColor: drawerScrimColor,
        edgeDragWidth: drawerEdgeDragWidth,
      ),
    ],
  );
}

答案 2 :(得分:0)

您可以从颤抖本身中的cutthemN/3中的CriteriaBuilder criteriaBuilder = entityManager.getCriteriaBuilder(); CriteriaQuery<Person> criteriaQuery = criteriaBuilder.createQuery(Person.class); Root<Person> personRoot = criteriaQuery.from(Person.class); Predicate jobPredicate = criteriaBuilder.equal(personRoot.get("job"), "doctor"); Predicate agePredicate = criteriaBuilder.greaterThan(personRoot.get("age"), 45); Predicate combinedPredicate = criteriaBuilder.and(jobPredicate, agePredicate); criteriaQuery.where(combinedPredicate); List<Person> searchResults = entityManager.createQuery(criteriaQuery).getResultList(); 来完成这项工作。

  1. Scaffold.of(context).openDrawer()/ Scaffold.of(context).openEndDrawer();
  2. scaffoldKey.currentState.openDrawer(); / scaffoldKey.currentState..openEndDrawer();

openDrawer

global key

Case 1 或者您可以使用脚手架钥匙

bottomNavigationBar:BottomAppBar(
      elevation: 10,
      shape: CircularNotchedRectangle(),
      child: Container(
        height: 80,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              child: GestureDetector(
                onTap: () {
                  Scaffold.of(context).openDrawer();
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.dashboard),
                    Text(
                      'DASHBOARD',
                      style: TextStyle(color: Colors.black),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {},
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.home),
                    Text(
                      'CHALLENGES',
                      style: TextStyle(color: Colors.black),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: (){},
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.public),
                    Text(
                      'Public',
                      style: TextStyle(color: Colors.black),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {},
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.sentiment_satisfied),
                    Text(
                      'Settings',
                      style: TextStyle(color: Colors.black),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      color: AppColors.WHITE,
    );