BottomNavigationBar详解

BottomNavigationBar

在学习Scaffold的时候已经涉及到BottomNavigationBar，其构造：

 BottomNavigationBar({
    super.key,
    required this.items,
    this.onTap,//点击事件
    this.currentIndex = 0,//默认选中
    this.elevation,
    this.type,
    Color? fixedColor,//选中颜色
    this.backgroundColor,//背景颜色
    this.iconSize = 24.0,//图标大小
    Color? selectedItemColor,//选中item大小，颜色、透明度
    this.unselectedItemColor,//未选中item大小，颜色、透明度
    this.selectedIconTheme,//选定图标大小，颜色、透明度
    this.unselectedIconTheme,//未选定图标大小，颜色、透明度
    this.selectedFontSize = 14.0,//选中标签大小
    this.unselectedFontSize = 12.0,//未选中标签大小
    this.selectedLabelStyle,//选中标签样式
    this.unselectedLabelStyle,//未选中标签样式
    this.showSelectedLabels,//显示标签
    this.showUnselectedLabels,//不显示标签
    this.mouseCursor,
    this.enableFeedback,
    this.landscapeLayout,
  })

items属性

items属性用于定义BottomNavigationBar项目的列表。此属性为必填项，并且项数必须大于或等于2，否则会出现错误。

例子：

class Exp2 extends StatefulWidget {
  const Exp2({Key? key}) : super(key: key);

  @override
  State<Exp2> createState() => _Exp2State();
}

class _Exp2State extends State<Exp2> {
  int selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(title: const Text('bottomNavigationBar'),),
      body: MainBody(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: selectedIndex,
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label:'Home'
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.book),
              label:'Book'
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label:'Me'
          ),
        ],
        onTap: (int index){
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }

  Widget? MainBody(){
    if(selectedIndex== 0){
      return MyHome();
    }else if(selectedIndex==1){
      return MyBook();
    }else{
      return Mine();
    }
  }
}

class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('home'),);
  }
}
class MyBook extends StatelessWidget {
  const MyBook({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('book'),);
  }
}
class Mine extends StatelessWidget {
  const Mine({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('mine'),);
  }
}

@required List<BottomNavigationBarItem> items

BottomNavigationBarItem构造

 const BottomNavigationBarItem({
   required this.icon,//图标
   this.label,//标签
   Widget? activeIcon,//选中图标
   this.backgroundColor,//背景颜色
   this.tooltip,
 }) 

selectedItemColor、unselectedItemColor

selectedItemColor属性用于指定所选BottomNavigationBarItem的颜色，该颜色适用于图标和标签。unselectedItemColor反正。 注意：selectedItemColor属性与fixedColor相同，仅允许使用这两个属性之一。

  selectedItemColor: Colors.red,
  unselectedItemColor: Colors.green,

selectedIconTheme、unselectedIconTheme

selectedIconTheme属性用于设置选定的BottomNavigationBarItem图标大小，颜色和不透明度。unselectedIconTheme则是未选中的选项设置。

//图标选中和未选中的设置
 selectedIconTheme: const IconThemeData(
  color: Colors.red,
  opacity: .8,
  size: 30,
),
unselectedIconTheme: const IconThemeData(
  color: Colors.green,
  opacity: .8,
  size: 30,
),

fixedColor

fixedColor属性类似于selectedItemColor属性。两者都用于指定所选BottomNavigationBarItem的颜色。它适用于图标和标签。

 fixedColor: Colors.green,//选中颜色图标个标签

selectedFontSize、unselectedFontSize

selectedFontSize属性用于在选定的BottomNavigationBarItem上指定字体大小。unselectedFontSize则是未选中的设置。

selectedFontSize: 36,
unselectedFontSize: 12,

selectedLabelStyle、unselectedLabelStyle

selectedLabelStyle属性用于指定所选BottomNavigationBarItem的标签上文本样式。unselectedLabelStyle则是未选中的设置。

selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold,fontSize: 36),
unselectedLabelStyle: const TextStyle(fontSize: 14),

showSelectedLabels、showUnselectedLabels

showSelectedLabels属性用于允许或禁止在当前选定的BottomNavigationBarItem上显示标签。其默认值为true。showUnselectedLabels则是未选中的设置

 showSelectedLabels: false,//隐藏标签
 showUnselectedLabels: true,//显示标签