- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Flutter 项目中有一个简单的抽屉,我想让抽屉在用户滑动/打开时始终位于底部导航栏上方。我玩弄我的代码,但还找不到任何解决方案。
import 'package:flutter/material.dart';
import 'package:testing2/pages/ChannelsPage.dart';
import 'package:testing2/pages/HomePage.dart';
import 'package:testing2/pages/ExplorePage.dart';
import 'package:testing2/fragments/first_fragment.dart';
import 'package:testing2/fragments/second_fragment.dart';
import 'package:testing2/fragments/third_fragment.dart';
import 'package:testing2/Shared/drawer.dart';
class MyHomePage extends StatefulWidget {
@override
_MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}
class _MyBottomNavigationBarState extends State<MyHomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
int _currentSelected = 0;
GlobalKey<ScaffoldState> _drawerKey = GlobalKey<ScaffoldState>();
final List<Widget> _children = [
HomePage(),
SettingsPage(),
ContactPage(),
HomePage()
];
void onTappedBar(int index){
index == 3
? _drawerKey.currentState.openDrawer()
: setState((){
_currentSelected = index;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _drawerKey,
drawer: new Drawer(
child: ListView(
children: <Widget>[
new DrawerHeader(
child: new Text('Jonathan'),
decoration: new BoxDecoration(color: Colors.orange),),
new ListTile(
leading: const Icon(Icons.notifications),
title: new Text('Notifications'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new FirstFragment()));
},
),
new ListTile(
leading: const Icon(Icons.list),
title: new Text('Preferences'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondFragment()));
},
),
new ListTile(
leading: const Icon(Icons.help),
title: new Text('Help'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new ThirdFragment()));
},
),
new ListTile(
leading: const Icon(Icons.outlined_flag),
title: new Text('Logout'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new FirstFragment()));
},
),
],
)
),
body:_children[_currentSelected],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blueGrey[900],
type: BottomNavigationBarType.fixed,
onTap: onTappedBar,
currentIndex: _currentSelected,
showUnselectedLabels: true,
unselectedItemColor: Colors.white,
selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text('Home')),
BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text('Explore')),
BottomNavigationBarItem(icon: new Icon(Icons.device_hub), title: new Text('Channels')),
BottomNavigationBarItem(icon: new Icon(Icons.dehaze), title: new Text('More')),
],
),
);
}
}
class Page extends StatelessWidget {
const Page({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container();
}
}
最佳答案
您可以通过以下方式执行此操作。
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
appBar: AppBar(
title: Text("data"),
),
drawer: Drawer(
child: Center(
child: RaisedButton(
child: Text("Press"),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Hello1()));
},
),
),
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
class Hello1 extends StatelessWidget {
const Hello1({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: Text("data"),
),
),
);
}
}
关于flutter - 如何在底部导航上方制作 flutter 抽屉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61234225/
假设有一个具有非常简单的 UI 层次结构的窗口,它只有两个同级: NSTextView 和 NSButton,并且它们确实重叠。 我的问题是,为什么光标悬停在按钮上时会有所不同,具体取决于其下方是否有
例如,当我将 TPanel 添加到表单并使用 alTop 对齐它,然后将 TMainMenu 添加到同一表单时,主菜单位置会覆盖面板位置,以便主菜单保持在窗体的最顶层,面板显示在其下方。 是否可以覆盖
我想构建一个 UI,其中我在屏幕顶部有一些固定的小部件(在所有选项卡上可见),然后在它们下面我想要一个 TabBarView(底部有选项卡栏),这是否可能而不使您的自己的标签小部件还是 TabBarV
我一直在这里关注 Phaser 3 的介绍 http://phaser.io/tutorials/making-your-first-phaser-3-game并发现我的 Angular 色“悬停”在
我在 View 中间有一个 UITextView,在 View 底部有一个 UIToolBar。当我触摸 UITextView 时,我希望在 UIToolBar 上方出现一个可视键盘。我该怎么做? 最
我正在尝试制作井字游戏,我有一个 3 x 3 按钮网格,但我想在按钮上方有一个栏,显示分数和玩家姓名,有人可以帮助我吗?到java,不知道从哪里开始。 import javax.swing.*; im
是否可以指定 noUiSlider 绘制的工具提示的位置?似乎默认情况下它将第一个放在 slider 上,第二个放在下面。我理解这里的可用性目标,但我想把两者都放在上面或下面。 示例(带有上方和下方的
我的应用程序中有主详细布局(参见左图): 我为操作栏设置了导航模式列表(使用它来过滤第二个 fragment 中的 ListView ): final ActionBar actionBar = ge
我是 iOS 编程新手,在使用 XLPagerTabStrip(github.com/xmartlabs/XLPagerTabStrip) 时遇到了困难。我按照它的教程,成功在VC的顶部添加了Page
这个问题适用于任何项目,但在这种情况下,我想将我的图像放置在 map 上方,目前它位于 map 下方。 我是 swift 1.2 的新手,所以我不知道如何组合一个示例,任何帮助将不胜感激。 最佳答案
我如何在 javascript 中确定一个元素是否在视口(viewport)上方(用户已经滚动过它)(不仅仅是它是否可见)? 在这段代码中: 控制台日志(iselement1aboveviewport
我正在尝试将工具栏添加到我的 View Controller 。 我的 View Controller : -(void)loadView { UIWebView *webView = [[U
我知道这是一个一般性问题,但任何方向都会有所帮助。 所以我正在使用这个模块 https://github.com/maxep/MXSegmentedPager尝试重新创建 Twitter 的个人资料页
我需要在保存按钮下放置一个带有 id 的 div。这是 html 代码: save 这是我的 : 通过这种方式,div 隐藏了按钮,我的目的是在 div 上方显示按钮。
我试图将我的整个 refreshControl 放在 tableview 后面。我可以通过这样做来放置实际的微调器: self.tableView.addSubview(refreshContro
这在 Safari 和 Firefox 中都会发生。我的导航栏看起来像这样: Test 相关的 CSS 看起来像: li { float: left } a:hover {
我在 CSS 中的 #footermain div 上有一个框阴影,但我无法让它显示在绿色页脚上方。我什么都试过了,还是想不通。 #footermain { background: #1f6c
我试图将图像部分放置在旋转 slider 上方( slider 上侧的一部分应该被图像覆盖)我试过 image{position:relative; z-index:10; } slider{posi
我认为这是一个简单的问题,但我无法理解它。我在页面顶部有一个固定的 div,当我向下滚动查看内容时,内容(文本)显示在该固定 div 上方 5 像素的边距中。该边距(黑色,请参阅 https://js
我有两个 div,在页脚配置中。目的是在悬停时通过显示隐藏的 div 向上扩展页脚。 #extendedFooter, #test { display: none; } #standardFo
我是一名优秀的程序员,十分优秀!