我注意到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"),)],
),
),
),
);
}
答案 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();
来完成这项工作。
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,
);