Flutter实现底部导航
更新时间:2019年02月13日 15:47:09 作者:An-Ding
这篇文章主要为大家详细介绍了Flutter实现底部导航的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Flutter实现底部导航的具体代码,供大家参考,具体内容如下
BottomNavigationBar使用
底部导航栏 主文件 main.dart (注意导入文件路径)
import 'package:flutter/material.dart'; import './views/firstPage.dart'; import './views/secondPage.dart'; import './views/thirdPage.dart'; //首先导入三个界面 void main() { runApp(new MyApp()); } class MyApp extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyApp> with TickerProviderStateMixin{ int _tabIndex = 0; List<BottomNavigationBarItem> _navigationViews; var appBarTitles = ['首页', '发现', '我的']; PageController pageController; var _body; initData() { _body = new IndexedStack( children: <Widget>[new FirstPage(), new SecondPage(), new ThirdPage()], index: _tabIndex, ); } @override void initState() { super.initState(); _navigationViews = <BottomNavigationBarItem>[ new BottomNavigationBarItem( icon: const Icon(Icons.home), title: new Text(appBarTitles[0]), backgroundColor: Colors.blue, ), new BottomNavigationBarItem( icon: const Icon(Icons.widgets), title: new Text(appBarTitles[1]), backgroundColor: Colors.blue, ), new BottomNavigationBarItem( icon: const Icon(Icons.person), title: new Text(appBarTitles[2]), backgroundColor: Colors.blue, ), ]; } final navigatorKey = GlobalKey<NavigatorState>(); @override Widget build(BuildContext context) { initData(); return new MaterialApp( navigatorKey: navigatorKey, theme: new ThemeData( primaryColor: Colors.blue, accentColor: Colors.blue ), home: new Scaffold( appBar: new AppBar( title: new Text( appBarTitles[_tabIndex], style: new TextStyle(color: Colors.white), ), ), body: _body, bottomNavigationBar: new BottomNavigationBar( items: _navigationViews .map((BottomNavigationBarItem navigationView) => navigationView) .toList(), currentIndex: _tabIndex, type: BottomNavigationBarType.fixed, onTap: (index) { setState(() { _tabIndex = index; }); }, ), ), ); } }
底部包含三个导航按钮,分别对应三个界面:
firstPage.dart
import 'package:flutter/material.dart'; class FirstPage extends StatefulWidget { @override State<StatefulWidget> createState() => new FirstPageState(); } class FirstPageState extends State<FirstPage> { @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Text('这是第一个界面'), ), ); } }
secondPage.dart
import 'package:flutter/material.dart'; class SecondPage extends StatefulWidget { @override State<StatefulWidget> createState() => SecondPageState(); } class SecondPageState extends State<SecondPage> { @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Text("这是我第二个页面"), ), ); } }
thirdPage.dart
import 'package:flutter/material.dart'; class ThirdPage extends StatefulWidget { @override State<StatefulWidget> createState() => ThirdPageState(); } class ThirdPageState extends State<ThirdPage>{ @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Text('我是界面三'), ), ); } }
运行截图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android使用Activity实现从底部弹出菜单或窗口的方法
这篇文章主要介绍了Android使用Activity实现从底部弹出菜单或窗口的方法,涉及Android布局、窗口、事件监听、权限控制等相关操作技巧,需要的朋友可以参考下2017-07-07Kotlin文件读写与SharedPreferences存储功能实现方法
SharedPreferences是安卓平台上一个轻量级的存储类,用来保存应用的一些常用配置,比如Activity状态,Activity暂停时,将此activity的状态保存到SharedPereferences中;当Activity重载,系统回调方法onSaveInstanceState时,再从SharedPreferences中将值取出2022-12-12Android布局中gravity与layout_gravity属性说明
这篇文章主要介绍了Android布局中gravity与layout_gravity属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01
最新评论