15 Flutter BottomNavigationBar自定义底部导航条以及实现页面切换以及模块化

妖狐艹你老母 2023-08-17 15:58 90阅读 0赞

效果：

![1057166-20190904171432118-1577344431.png][]

/\*\*

\* Flutter  BottomNavigationBar 自定义底部导航条、以及实现页面切换：

\* BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换，

\* bottomNavigationBar是Scaffold组件的参数。

\*BottomNavigationBar常见的属性：

items  List<BottomNavigationBaritem> 底部导航条按钮集合。

iconSize icon

currentIndex 默认选中第几个

onTap 选中变化回调函数

fixedColor 选中的颜色

type

BottomNavigationBarType.fixed

BottomNavigationBarType.shifting

\*/

main.dart

import 'package:flutter/material.dart';
    import 'pages/Tabs.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Tabs(),
        );
      }
    }

pages/Tabs.dart

import 'package:flutter/material.dart';
    import 'tabs/Home.dart';
    import 'tabs/Category.dart';
    import 'tabs/Setting.dart';
    class Tabs extends StatefulWidget {
      Tabs({Key key}) : super(key: key);
      _TabsState createState() => _TabsState();
    }
    
    class _TabsState extends State<Tabs> {
      int _currentIndex = 0;
      List _pageList=[
        HomePage(),
        CategoryPage(),
        SettingPage()
      ];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Flutter Demo'),
          ),
          bottomNavigationBar: BottomNavigationBar(
              currentIndex: this._currentIndex,
              onTap: (int index) {
                // print(index);
                setState(() {
                  this._currentIndex = index;
                });
              },
              iconSize: 36.0,
              type: BottomNavigationBarType.fixed,
              fixedColor: Colors.red,
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.category), title: Text('分类')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.settings), title: Text('设置')),
              ]),
          body: this._pageList[this._currentIndex],
        );
      }
    }

pages/tabs/Home.dart

import 'package:flutter/material.dart';
    
    class HomePage extends StatelessWidget {
      const HomePage({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text('首页'),
        );
      }
    }

pages/tabs/Category.dart

import 'package:flutter/material.dart';
    
    class CategoryPage extends StatelessWidget {
      const CategoryPage({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text('分类')
        );
      }
    }

pages/tabs/Setting.dart

import 'package:flutter/cupertino.dart';
    
    class SettingPage extends StatelessWidget {
      const SettingPage({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text('设置'),
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11460342.html

[1057166-20190904171432118-1577344431.png]: /images/20230810/3b0c4b7aa6ea41f892a5b43210282b0f.png