Android Studio中Flutter Bottom Navigation Bar仅单个图标显示标签求助

你的问题出在BottomNavigationBar的默认行为上：当导航项数量≥4个时，Flutter会自动使用BottomNavigationBarType.shifting类型，这种模式下仅会显示当前选中项的标签，未选中项仅保留图标。

只需给BottomNavigationBar添加两个属性即可解决：

• type: BottomNavigationBarType.fixed：强制使用固定布局模式，所有项的大小一致，标签始终显示
• showUnselectedLabels: true：显式指定未选中项的标签可见（fixed模式下默认已开启，显式设置更稳妥）

修改后的完整代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Whispering Woodz'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Text(
          'Welcome to the Whispering Woodz App!',
          style: TextStyle(fontSize: 20),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        unselectedItemColor: Colors.black,
        fixedColor: Colors.black,
        // 添加以下两行属性
        type: BottomNavigationBarType.fixed,
        showUnselectedLabels: true,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: 'Weddings',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Corporate Events',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Matchmaking',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.celebration),
            label: 'Private Parties',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.build),
            label: 'Services Offered',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.photo),
            label: 'Gallery',
          ),
        ],
        onTap: (int index) {
          // Handle button taps here
          switch (index) {
            case 0:
            // Wedding Celebrations button tapped
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => WeddingPage()));
              break;
            case 1:
            // Corporate Events button tapped
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => CorporateEventsPage()));
              break;
            case 2:
            // Match Making button tapped
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => MatchMakingPage()));
              break;
            case 3:
            // Private Parties button tapped
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => PrivatePartiesPage()));
              break;
            case 4:
            // Services Offered button tapped
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => ServicesOfferedPage()));
              break;
            case 5:
            // Gallery button tapped
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => GalleryPage()));
              break;
          }
        },
      ),
    );
  }
}

// 补充页面类示例（避免编译报错）
class WeddingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text('Weddings')));
  }
}

class CorporateEventsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text('Corporate Events')));
  }
}

class MatchMakingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text('Matchmaking')));
  }
}

class PrivatePartiesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text('Private Parties')));
  }
}

class ServicesOfferedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text('Services Offered')));
  }
}

class GalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text('Gallery')));
  }
}

补充说明 #

• BottomNavigationBarType.fixed：适用于导航项数量较多（≥4）的场景，所有项的宽度均匀分配，标签持续显示
• showUnselectedLabels: true：确保未选中状态下的标签不会被隐藏，和fixed类型配合使用能保证所有标签始终可见

内容的提问来源于stack exchange，提问作者Faita