Flutter BottomNavigationBar 自定义底部导航栏，实现页面切换

最新推荐文章于 2024-06-19 18:17:32 发布

达帮主

最新推荐文章于 2024-06-19 18:17:32 发布

阅读量1.9k

点赞数 2

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/qq_35427437/article/details/109298511

版权

Flutter 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何在Flutter中使用BottomNavigationBar组件创建底部导航条，并实现场景间的页面切换。通过设置items、currentIndex、onTap、fixedColor等属性，结合Scaffold构建了一个包含首页、分类和设置三个页面的应用。示例代码详细展示了每个页面的实现和状态管理。

摘要由CSDN通过智能技术生成

Flutter BottomNavigationBar组件

BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换，bottomNatigationBar是Scaffold组件的参数。

BottomNavigationBar常见属性

属性	说明
items	List<BottomNavigationBarItem> 底部导航条按钮集合
iconSize	icon
currentIndex	默认选中第几个
onTap	选中变化回调函数
onTap	onTap: (int index){ setState(() { print("Tagwjlis index = ${index}"); this._currentIndex = index; }); },
fixedColor	选中的颜色
type	BottomNavigationBarType.fixed //配置底部tabs可以有多个按钮 BottomNavigationBarType.shifting

实现一个页面切换功能目录

main.dart

import 'package:flutter/material.dart';
import 'package:stack_align_positioned/pages/Tabs.dart';
import 'reg/listData.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  int _curentIndex = 0;
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }

}

Tabs.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stack_align_positioned/main.dart';
import 'package:stack_align_positioned/pages/tabs/CategoryPages.dart';
import 'package:stack_align_positioned/pages/tabs/HomePage.dart';
import 'package:stack_align_positioned/pages/tabs/SettingsPages.dart';

class Tabs extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabsState();
  }
}

class _TabsState extends State<Tabs>{
  int _currentIndex = 0;
  List _listPageData = [  //页面的链表
    HomePages(),
    CategoryPages(),
    SettingsPages()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter BottomNavigationBar"),
      ),
      body: this._listPageData[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,//配置对应的索引值选中
        onTap: (int index){//index 表示选择选项
          setState(() {
            print("Tagwjlis index = ${index}");
            this._currentIndex = index;
          });
        },
        iconSize: 36.0,           //icon的大小
        fixedColor: Colors.red,   //选中颜色
        type: BottomNavigationBarType.fixed,//配置底部tabs可以有多个按钮
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("首页")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text("分类")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("设置")
          )
        ],
      ),
    );
  }
}

HomePages.dart

import 'package:flutter/cupertino.dart';

class HomePages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }

}

class _HomeState extends State<HomePages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Home Text"),
    );
  }
}

CategoryPages.dart

import 'package:flutter/cupertino.dart';

class CategoryPages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CategorysStae();
  }
}

class _CategorysStae extends State<CategoryPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("CategoryPages center"),
    );
  }
}

SettingsPages.dart

import 'package:flutter/cupertino.dart';

class SettingsPages extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return _SettingsStae();
  }
}

class _SettingsStae extends State<SettingsPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("SettingsPages center"),
    );
  }
}