使用底部应用栏标签导航 - 颤动
Posted
技术标签:
【中文标题】使用底部应用栏标签导航 - 颤动【英文标题】:Navigate using bottom app bar tabs - flutter 【发布时间】:2019-06-15 13:58:01 【问题描述】:我在颤振中使用底部应用栏进行底部导航。当点击底部应用栏中的选项卡之一时,我仍然希望底部应用栏和应用栏保持原样,但只有正文内容会根据所点击的内容而变化。
我尝试使用 push() 方法,但它给了我一个新页面,而不是一个后退按钮。
Navigation_tabs.dart:
import 'package:flutter/material.dart';
class NavigationTabs extends StatelessWidget
@override
Widget build(BuildContext context)
return new Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () ,
),
appBar: AppBar(
title: Text('Dashboard'),
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.home,
color: Colors.cyan[700],
),
onPressed: () ,
),
new Container(
padding: EdgeInsets.only(left: 20),
child: IconButton(
icon: Icon(
Icons.list,
color: Colors.cyan[700],
),
onPressed: () => Navigator.pushNamed(context, '/login'),
)),
new Container(
padding: EdgeInsets.only(left: 120),
child: IconButton(
icon: Icon(
Icons.explore,
color: Colors.cyan[700],
),
onPressed: () ,
)),
new Container(
height: 22.0,
child: new RawMaterialButton(
onPressed: () ,
child: new Icon(
Icons.person,
color: Colors.white,
size: 20.0,
),
shape: new CircleBorder(),
elevation: 1.0,
fillColor: Colors.cyan[700],
))
],
),
));
我希望能够只在没有返回按钮的情况下更改页面内容,而不是在按下其中一个选项卡时转到一个全新的页面。
【问题讨论】:
看看这个帖子:medium.com/coding-with-flutter/… 可以参考本站Bottom navigation 【参考方案1】:您可以使用 BottomNavigationBarItem 而不是创建按钮,并使用 bottomNavigationBar 的 ontap。
class _MyHomePageState extends State<MyHomePage>
int _index = 0;
final List<Widget> _children = [
Center(child: Text("First Page"),),
Center(child: Text("Second Page"),),
Center(child: Text("Third Page"),)
];
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("Bottom Navigation"),
),
body: Center(
child: (_children[_index ]),
),
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.looks_one),
title: Text('First'),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_two),
title: Text('Second'),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_3),
title: Text('Third'),
)
],
),
);
void onTabTapped(int index)
setState(()
_index = index;
);
更详细的解释:
Flutter documentation
【讨论】:
以上是关于使用底部应用栏标签导航 - 颤动的主要内容,如果未能解决你的问题,请参考以下文章