flutter - 如何在 Flutter 底部导航栏中的特定选项卡中加载数据
问题描述
我在底部导航栏中使用动画容器在滚动时隐藏底部导航栏(类似于 Pinterest)。我想在同一页面中显示特定选项卡的数据。(参考 GIF)
https://i.stack.imgur.com/xlOsy.gif
我想在选项卡的屏幕中显示内容,我不想路由到离开主屏幕的其他屏幕。我有 4 行不同的图标。我怎样才能做到这一点?
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
double yTransValue = 0;
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollUpdateNotification>(
onNotification: (notification) {
print(notification.metrics.axisDirection);
print(notification.metrics.axis);
if (notification.scrollDelta.sign == 1) {
setState(() {
yTransValue = 100;
});
} else if (notification.scrollDelta.sign == -1) {
setState(() {
yTransValue = 0;
});
}
},
child: Scaffold(
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return SizedBox(
height: 260,
child: Card(
child: Center(child: Text('Item #$index')),
),
);
},
),
bottomNavigationBar: AnimatedContainer(
duration: Duration(milliseconds: 300),
transform: Matrix4.translationValues(0, yTransValue, 0),
child: SizedBox(
height: 60,
child: Card(
color: Colors.grey,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.home),
Icon(Icons.search),
Icon(Icons.favorite_border),
Icon(Icons.person_rounded),
],
),
),
),
),
),
);
}
}
我曾尝试使用“手势检测器”包装图标但是当按下图标时,数据会加载到新屏幕中。
解决方案
使用以下代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
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(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
推荐阅读
- java - 如何使用 Maven 将 JavaFX 项目部署到 EXE?
- google-api - 谷歌如何“理解”我已经登录谷歌服务(如 gmail)
- registry - mspaint 的 URL 协议传递了错误的参数
- latex - 引用类型而不仅仅是数字
- angular - 角度动画:在按钮滑入上输入溢出文本
- github - 在 Github 上的项目板上放置拉取请求的目的是什么?
- google-chrome - 由于最新 chrome 浏览器中的相同站点 cookie 设置,嵌入 iframe 中的 Kibana 仪表板每次都重定向到登录
- javascript - querySelectorAll 仅选择顶层的匹配元素
- linux - 如何同时运行几个 nohup?
- arrays - 如何找到给定数字之和的数组元素