Flutter 遇到一个问题 tabbar写三个正常显示切换,三个以上就只显示一个了

Flutter 遇到一个问题 tabbar写三个正常显示切换,三个以上就只显示一个了

import 'package:flutter/material.dart';
import 'page/home.dart';
import 'page/mine.dart';
import 'page/health.dart';
import 'page/yutang.dart';
import 'page/message.dart';

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

// 根文件
class MyApp extends StatelessWidget {
const MyApp({super.key});

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(debugShowCheckedModeBanner: false, home: MainPage());
}
}

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

[@override](/user/override)
State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
// 记录下标
int _currentIndex = 0;
// 创建页面
final List<Widget> _tabPages = const [
  HomePage(),
  YutangPage(),
  MessagePage(),
  MinePage(),
  HealthPage(),
];
[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: _tabPages[_currentIndex],
    //  tabbar部分
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentIndex, //
      fixedColor: Colors.orange, // 设置tab选中的颜色
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: '咸鱼'),
        BottomNavigationBarItem(icon: Icon(Icons.message), label: '鱼塘'),
        BottomNavigationBarItem(icon: Icon(Icons.add_box), label: '发布'),
        BottomNavigationBarItem(
          icon: Icon(Icons.message_rounded),
          label: '消息',
        ),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
      ],
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
    ),
  );
}
}   

更多关于 Flutter 遇到一个问题 tabbar写三个正常显示切换,三个以上就只显示一个了的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于 Flutter 遇到一个问题 tabbar写三个正常显示切换,三个以上就只显示一个了的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


这个问题是因为 Flutter 的 BottomNavigationBar 有一个默认行为:当有超过 3 个以上的 item 时,默认会显示为 “shifting” 模式,这种模式下只会显示选中的 item 的文字和图标,其他 item 的文字会被隐藏。

在 BottomNavigationBar 中添加 type 属性,设置为 BottomNavigationBarType.fixed:

class _MainPageState extends State<MainPage> {
  // 记录下标
  int _currentIndex = 0;
  // 创建页面
  final List<Widget> _tabPages = const [
    HomePage(),
    YutangPage(),
    MessagePage(),
    MinePage(),
    HealthPage(),
  ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _tabPages[_currentIndex],
      // tabbar部分
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed, // 添加这一行
        currentIndex: _currentIndex,
        fixedColor: Colors.orange,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: '咸鱼'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: '鱼塘'),
          BottomNavigationBarItem(icon: Icon(Icons.add_box), label: '发布'),
          BottomNavigationBarItem(
            icon: Icon(Icons.message_rounded),
            label: '消息',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
回到顶部