Flutter独立底部导航栏文件的创建、导入使用及相关问题咨询

嘿，我来帮你搞定这个独立底部导航栏的实现，还有你提到的几个问题~

首先看你已经写的Nav组件，目前的实现是点击导航项就push新页面，这样会导致导航栏只在当前页面显示，跳转到新页面后就没了。要让它能在所有页面上方固定显示，同时页面内容可以滚动，我们需要调整实现方式：

1. 改成页面切换模式（保持导航栏固定） #

不要用Navigator.push，而是在_NavState里维护一个当前页面索引，根据索引切换Scaffold的body内容，这样导航栏会一直固定在底部，页面切换时不会重新加载导航栏：

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/services.dart';
import 'home.dart';
// 导入其他页面组件，比如InfoPage、LibraryPage等
// import 'info.dart';
// import 'library.dart';

class Nav extends StatefulWidget {
  const Nav({super.key});

  @override
  State<Nav> createState() => _NavState();
}

class _NavState extends State<Nav> {
  Color backgroundColor = const Color(0xffe9edf1);
  Color secondaryColor = const Color(0xffe1e6ec);
  Color accentColor = const Color(0xff2d5765);
  
  // 维护当前页面索引
  int _currentIndex = 1;

  // 根据索引返回对应的页面
  Widget _getCurrentPage() {
    switch(_currentIndex) {
      case 0:
        // return const LibraryPage(); // 替换成你的第一个页面
        return const Home(); // 暂时用Home代替
      case 1:
        return const Home();
      case 2:
        // return const InfoPage(); // 替换成你的第三个页面
        return const Home(); // 暂时用Home代替
      default:
        return const Home();
    }
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: backgroundColor,
      systemNavigationBarColor: secondaryColor,
    ));

    return Scaffold(
      backgroundColor: backgroundColor,
      // 页面内容区域，用SingleChildScrollView包裹实现滚动
      body: SingleChildScrollView(
        child: _getCurrentPage(),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        // 修改点击事件，更新当前索引
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        index: _currentIndex,
        backgroundColor: backgroundColor,
        color: secondaryColor,
        buttonBackgroundColor: backgroundColor,
        animationDuration: const Duration(milliseconds: 300),
        // 可以调整导航栏高度，解决尺寸问题
        height: 60,
        items: [
          NeumorphicIcon(
            Icons.menu_book_rounded,
            style: NeumorphicStyle(
              color: accentColor,
              intensity: 20,
            ),
            // 调整图标尺寸
            size: 30,
          ),
          NeumorphicIcon(
            Icons.home_rounded,
            style: NeumorphicStyle(
              color: accentColor,
              intensity: 20,
            ),
            size: 30,
          ),
          NeumorphicIcon(
            Icons.info_rounded,
            style: NeumorphicStyle(
              color: accentColor,
              intensity: 20,
            ),
            size: 30,
          ),
        ],
      ),
    );
  }
}

2. 解决页面滚动问题 #

只要把页面内容放在SingleChildScrollView里（就像上面代码那样），你的页面（比如Home）内容超过屏幕高度时就会自动滚动，同时底部导航栏保持固定。

3. 调整导航栏的尺寸问题 #

• 可以给CurvedNavigationBar设置height属性（比如height:60）来调整导航栏的整体高度
• 给NeumorphicIcon设置size属性来调整图标的大小，解决图标尺寸不协调的问题

4. main.dart的修改 #

因为Nav现在是管理所有页面的根组件，所以main.dart里直接把它作为MaterialApp的首页即可：

import 'package:flutter/material.dart';
import 'nav.dart'; // 导入你的Nav组件文件

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Nav(), // 把Nav作为根页面
    );
  }
}

这样修改后，你的底部导航栏会一直固定在屏幕底部，切换页面时不会消失，页面内容可以正常滚动，尺寸问题也能通过调整参数解决。如果还有其他细节需要调整，比如页面切换的动画效果，可以再根据需求优化~

备注：内容来源于stack exchange，提问作者Atharv More