flutter - 如何在颤动中显示右下角的抽屉图标?
问题描述
我需要在页面底部显示总共 5 个图标(4 个底部导航图标 + 1 个菜单抽屉图标)。我正在使用 BottomNavigationBarItem 来显示四个底部导航图标。在那我需要添加菜单抽屉图标。我只能找到右下角和左下角的答案。请帮助解决这个问题
class HomeScreen extends StatefulWidget{
final int indexvalue;
HomeScreen({Key key, @required this.indexvalue}) : super(key: key);
@override
State createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
int _selectedPage = 0;
final _pageOptions = [
Screen1(),
WebView1(),
Home(),
Leader(),
];
@override
Widget build(BuildContext context){
Size size = MediaQuery.of(context).size;
var val = widget.indexvalue;
print(widget.indexvalue);
return MaterialApp(
title: 'Home',
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(title: Text('Home'),),
body: _pageOptions[_selectedPage],
endDrawer: build_1(),
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.green,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.red,
textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
child: new BottomNavigationBar(
showSelectedLabels: false, // <-- HERE
showUnselectedLabels: false,
currentIndex: _selectedPage,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.photo_library), title: Text('photo_library')),
BottomNavigationBarItem(icon: Icon(Icons.book), title: Text('book')),
BottomNavigationBarItem(icon: Icon(Icons.notifications), title: Text('download')),
],
),
),
)
);
}
}
build_1(){
return SizedBox(
//width: size.width,
child: Drawer(
child: new ListView(
children: <Widget>[
new DrawerHeader(
child: new Text("Drawer Header"),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new Text("Item 1"),
new Text("Item 2"),
new Text("Item 3"),
new Text("Item 4"),
new Text("Item 5"),
new Text("Item 6"),
],
),
),
);
}
解决方案
如果您在脚手架中使用:
抽屉:抽屉()使用_scaffoldKey.currentState.openDrawer();
endDrawer:抽屉()使用_scaffoldKey.currentState.openEndDrawer();
推荐阅读
- python - 如何在python中使用docxtpl jinja2标签的嵌套字典列表
- python - 在非常大的数据框中使用掩码进行有效的条件选择
- qt - 如何让浏览器支持自封闭的xhtml标签?
- r - RStudio图形设备对于mac上的空间对象真的很慢
- sql - PostgreSQL 从一个特殊的日期开始计数
- php - 使用php查找mysql查询结果中的特定值
- html - 如何在一个单元格内创建均匀的单元格间距
我一直在做一个小的。但是,我有一个表格,其中所有单元格都根据每个单元格中文本的大小自动调整大小。我将如何使所有单元格的宽度相同?例如,有 10 个单元格,每个单元格总是占用表格宽度的 10%。
您可以看到表格的 JSFiddle,其中单元格的宽度取决于此处的文本:https ://j
- reactjs - ReactJS:函数中的重新渲染过多
- c++ - 多态 C++:将子对象按值传递给接受父对象的函数
- c++ - C++ 避免动态内存分配