您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文小编为大家详细介绍“flutter如何实现底部导航栏切换”,内容详细,步骤清晰,细节处理妥当,希望这篇“flutter如何实现底部导航栏切换”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
思路:MaterialApp是提供了bottomnavigationbar的,可以使用,这个已经提供了的widget,再利用每次点击tab的时候使用set state方法来更新屏幕,切换中间的body的widget;
main文件:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_app1/MyBottomNavigationBar.dart'; void main(){ runApp(new MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build // throw UnimplementedError(); return new MaterialApp( title:" MyNavigationBar", home: new MyBottomNavigationBar(), ); } }
MyBottomNavigationBar():
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_app1/pages/AddScreen.dart'; import 'package:flutter_app1/pages/HomeScreen.dart'; import 'package:flutter_app1/pages/PersonScreen.dart'; class MyBottomNavigationBar extends StatefulWidget{ @override MyNavigationBarState createState() { // TODO: implement createState // throw UnimplementedError(); return new MyNavigationBarState(); } } class MyNavigationBarState extends State<MyBottomNavigationBar>{ List<Widget> pagesList=[]; int cunrrentIndex=0; @override void initState() { pagesList=pagesList..add(new HomeScreen()) ..add(new AddScreen()) ..add(new PersonScreen()); } @override Widget build(BuildContext context) { // TODO: implement build // throw UnimplementedError(); return new Scaffold( appBar: new AppBar( title: new Text("MyNavigationBar"), ), body: pagesList[cunrrentIndex], bottomNavigationBar: new BottomNavigationBar( items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), label:"Home" ), new BottomNavigationBarItem( icon: new Icon(Icons.add), label:"Add" ), new BottomNavigationBarItem( icon: new Icon(Icons.person), label:"Person" ) ], onTap:(index){ setState(() { cunrrentIndex=index; }); }, currentIndex: cunrrentIndex, ) ); } }
addScreen:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class AddScreen extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build // throw UnimplementedError(); return new Scaffold( appBar: new AppBar( title: new Text("AddPage"), ), body: new Center( child: new Text("Add"), ), ); } }
HomeScreen
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build // throw UnimplementedError(); return new Scaffold( appBar: new AppBar( title: new Text("HomePage"), ), body: new Center( child:Image.asset("images/cat.png"), ), ); } }
PersonScreen :
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class PersonScreen extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build // throw UnimplementedError(); return new Scaffold( appBar: new AppBar( title: new Text("PersonPage"), ), body: new Center( child: new Text("Person"), ), ); } }
最终效果:
读到这里,这篇“flutter如何实现底部导航栏切换”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。