flutter - 如何将我的 Hero-Widget-Page 插入到 BottomNavigationBar?
问题描述
我正在尝试构建一个带有底部导航栏的应用程序,我的主屏幕在第一个选项卡上,我的 Hero-Widget-Page 在另一个选项卡上。问题是,我需要context
Hero 小部件中的变量,并且通过使用不同的List<Widget>
BottomNavigationBar 页面,我只能显示简单的小部件,例如Text
.
镖
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( // on this place i wanna add what is in the body now
'Home',
style: optionStyle,
),
Text(
'Devices',
style: optionStyle,
)
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: color_1,
title: Text("Device Manager"),
),
body: Row( // here i wanna insert _widgetOptions.elementAt(_selectedIndex) instead of the Herowidget itself
children: [
Hero(
tag: 'matrix1',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageOne())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix1.png'),
height: 100,
width: 100,),
Text("Matrix Kitchen", style: mytextStyle,),
]
)
),
),
Hero(
tag: 'matrix2',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix2.png'),
height: 100,
width: 100,),
Text("PARTY ROOM", style: mytextStyle,),
]
)
),
),
] // wrap children
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: color_1,
currentIndex: _selectedIndex,
selectedItemColor: color_2,
onTap: _onItemTapped,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Home")),
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Devices"))
]
)
);
} // Widget build
} // class _MyHomePageState
}
'''
像这样,Hero 小部件将显示在两个页面上,因此 bottomNavigationBar 不起作用。我感谢所有有想法做这件事的人,两天前就已经在尝试了!
解决方案
这应该适合你
class _MyHomePageStateState extends State<MyHomePageState> {
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
final _widgetOptions = <Widget>[
HeroPageHome(),
HeroPageDevices()
];
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: color_1,
title: Text("Device Manager"),
),
body: _widgetOptions.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: color_1,
currentIndex: _selectedIndex,
selectedItemColor: color_2,
onTap: _onItemTapped,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Home")
),
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Devices")
)
]
)
);
}
}
请注意,我为您的Hero
页面创建了单独的类。
class HeroPageHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Hero(
tag: 'matrix1',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageOne())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix1.png'),
height: 100,
width: 100,
),
Text("Matrix Kitchen", style: mytextStyle,),
]
)
),
);
}
}
class HeroPageDevices extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Hero(
tag: 'matrix2',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix2.png'),
height: 100,
width: 100,
),
Text("PARTY ROOM", style: mytextStyle,),
]
)
),
);
}
}
推荐阅读
- java - 获取端点的指标
- c++ - 使用新的展示位置作为复制赋值运算符不好吗?
- c++ - 将带有自动参数的 lambda 传递给另一个函数是否合法
- java - 值未正确插入 SQLite 数据库
- windows - SET 命令不回显 FOR /F 循环参数值
- c++ - 如何在 Qt5 C++ 上集成 Libcurl 以消耗来自 Azure 认知的资源
- javascript - 如何拉伸使用 JS“document.body.style.backgroundImage = url(imgsrc);”插入的背景图像?
- javascript - res 在这种情况下是什么意思?
- javascript - 如何从 Flask 模板访问接收到的 JSON 数据?
- java - 如何使用 Jsoup 编辑实时 HTML?