1.flutter 底部的tabbar

Scaffold -> bottomNavigationBar: Scaffold -> body:

 int _currentIndex = 0; // 当前选中的选项卡索引

  final List<Widget> _children = [    Center(child: Text('Tab 1')),    Center(child: Text('Tab 2')),    Center(child: Text('Tab 3')),  ]; // 每个选项卡对应的内容

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar Demo'),
      ),
      body:  _children[_currentIndex], // 根据当前选中的索引显示不同的内容
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 当前选中的选项卡索引
        onTap: onTabTapped, // 点击选项卡时的回调函数
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Tab 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Tab 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Tab 3',
          ),
        ],
      ),
    );
  }

  // 点击选项卡时的回调函数
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

2.flutter的tabbar加背景颜色

int _currentIndex = 0; // 当前选中的选项卡索引

final List<Widget> _children = [  Center(child: Text('Tab 1')),  Center(child: Text('Tab 2')),  Center(child: Text('Tab 3')),]; // 每个选项卡对应的内容

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        _children[_currentIndex],
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            height:  60,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/tabbar_bg.png'),
                fit: BoxFit.cover,
              ),
            ),
            child: BottomNavigationBar(
              elevation: 0,
              backgroundColor: Colors.transparent,
              selectedFontSize: 10,
              unselectedFontSize: 10,
              showUnselectedLabels: true,
              onTap: (event) {
                setState(() {
                  _currentIndex = event;
                });
              },
              currentIndex: _currentIndex,
              type: BottomNavigationBarType.fixed,
              items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Tab 1',
              ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  label: 'Tab 2',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: 'Tab 3',
                ),
              ],
            ),
          ),
        ),
      ],
    ), // 根据当前选中的索引显示不同的内容
  );
}

// 点击选项卡时的回调函数
void onTabTapped(int index) {
  setState(() {
    _currentIndex = index;
  });
}