flutter底部导航栏demo

最新推荐文章于 2025-04-19 16:33:14 发布

头上的阿飘

最新推荐文章于 2025-04-19 16:33:14 发布

阅读量244

点赞数

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

本文链接：https://blog.youkuaiyun.com/bin2277904333/article/details/99487533

版权

flutter 专栏收录该内容

14 篇文章

订阅专栏

这篇博客详细介绍了如何在Flutter中实现底部导航栏功能，包括`main.dart`的设置，`index.dart`的导入，以及`pageA.dart`、`pageB.dart`、`pageC.dart`和`pageD.dart`四个页面的创建和切换逻辑。通过实例代码，展示了如何构建一个完整的底部导航栏应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.dart

import 'package:flutter/material.dart';
import 'pages/pageIndex.dart';

main(){
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: IndexPage()
      )
    );
  }
}

index.dart

import 'package:flutter/material.dart';
import './pageA.dart';
import './pageB.dart';
import './pageC.dart';
import './pageD.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {

  //底部导航栏选项列表
  final List<BottomNavigationBarItem> bottomItems = [
    BottomNavigationBarItem(
      //标题
      title: Text("pageA"),
      //图标
      icon: Icon(Icons.ac_unit),
    ),
    BottomNavigationBarItem(
        title: Text("pageB"), icon: Icon(Icons.brightness_2)),
    BottomNavigationBarItem(
      title: Text("pageC"),
      icon: Icon(Icons.filter_drama),
    ),
    BottomNavigationBarItem(
      title: Text("pageD"),
      icon: Icon(Icons.wb_sunny)
    )
  ];

  //
  final List<Widget> pages = [pageA(), pageB(), pageC(), pageD()];

  @override
  void initState() {
    //初始化默认页面
    currentPage = pages[currentIndex];
    super.initState();
  }

  //当前页索引
  int currentIndex = 0;
  //当前页
  Widget currentPage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //当前页
      body: currentPage,
      bottomNavigationBar: BottomNavigationBar(
        //背景色,不知道是不是flutter的bug，在shifting类型中无效
        backgroundColor: Colors.white,
        //没有选择的选项颜色
        unselectedItemColor: Colors.blue,
        //选中的选项颜色
        selectedItemColor: Colors.red,
        //底部导航栏颜色
        type: BottomNavigationBarType.shifting,
        //底部导航栏选项
        items: bottomItems,
        //当前索引
        currentIndex: currentIndex,
        onTap: (index) {
          //更新当前页索引和当前页
          setState(() {
            currentIndex = index;
            currentPage = pages[index];
          });
        },
      ),
    );
  }
}

pages

pageA.dart

import 'package:flutter/material.dart';

class pageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("pageA"),
      ),
    );
  }
}

pageB.dart

import 'package:flutter/material.dart';

class pageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("pageB"),
      ),
    );
  }
}

pageC.dart

pageD.dart