这篇文章主要为大家详细介绍了Flutter自定义底部导航栏的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Flutter自定义底部导航栏的具体代码，供大家参考，具体内容如下
文件结构：
main.dart
import 'package:flutter/material.dart'; import 'pages/tabs.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Tabs(), ); } }tabs.dart
import 'package:flutter/material.dart'; import 'tabs/home.dart'; import 'tabs/category.dart'; import 'tabs/user.dart'; class Tabs extends StatefulWidget { Tabs({Key key}) : super(key: key); @override _TabsState createState() => _TabsState(); } class _TabsState extends State { int _currentIndex = 0; List _pageList=[ HomePage(), CategoryPage(), UserPage(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('自定义底部导航'), ), body: this._pageList[this._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, onTap: (int index) { setState(() { this._currentIndex = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('首页'), ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text('分类'), ), BottomNavigationBarItem( icon: Icon(Icons.supervised_user_circle), title: Text('会员'), ), ], ), ); } } home.dart
import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { HomePage({Key key}) : super(key: key); @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State { @override Widget build(BuildContext context) { return Text('首页'); } } category.dart
import 'package:flutter/material.dart'; class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key); @override _CategoryPageState createState() => _CategoryPageState(); } class _CategoryPageState extends State { @override Widget build(BuildContext context) { return Text('分类'); } } user.dart
import 'package:flutter/material.dart'; class UserPage extends StatefulWidget { UserPage({Key key}) : super(key: key); @override _UserPageState createState() => _UserPageState(); } class _UserPageState extends State { @override Widget build(BuildContext context) { return Text('会员'); } } 效果展示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是Flutter自定义底部导航栏的方法的详细内容，更多请关注0133技术站其它相关文章！
