Flutter模仿实现微信底部导航栏流程详解

Copy code
TabBarView(
  controller: _tabController,
  physics: NeverScrollableScrollPhysics(), // 禁用滚动
  dragStartBehavior: DragStartBehavior.down, // 垂直滚动
  children: [
    // 子组件列表
    ...
  ],
)

 import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTabPage(),
    );
  }
}
class MyTabPage extends StatefulWidget {
  @override
  _MyTabPageState createState() => _MyTabPageState();
}
class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this); // 3是选项卡数量
  }
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('微信'),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // 第一个选项卡的内容
          Container(
            child: Center(
              child: Text('聊天'),
            ),
          ),
          // 第二个选项卡的内容
          Container(
            child: Center(
              child: Text('群组'),
            ),
          ),
          // 第三个选项卡的内容
          Container(
            child: Center(
              child: Text('个人'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: TabBar(
        controller: _tabController,
        tabs: [
          Tab(icon: Icon(Icons.chat), text: '聊天'),
          Tab(icon: Icon(Icons.group), text: '群组'),
          Tab(icon: Icon(Icons.person), text: '个人'),
        ],
        indicatorColor: Colors.blue, // 选中状态下的指示器颜色
        labelColor: Colors.blue, // 选中状态下的文本颜色
        unselectedLabelColor: Colors.grey, // 未选中状态下的文本颜色
      ),
    );
  }
}

BottomNavigationBar({
  Key? key,
  required List<BottomNavigationBarItem> items, // 导航选项列表
  int currentIndex = 0, // 当前选中的索引
  Color? backgroundColor, // 背景颜色
  Color? unselectedItemColor, // 未选中项的颜色
  Color? selectedItemColor, // 选中项的颜色
  double? elevation, // 阴影高度
  BottomNavigationBarType type = BottomNavigationBarType.fixed, // 样式类型
  ValueChanged<int>? onTap, // 点击事件回调
  MouseCursor? mouseCursor, // 鼠标指针
  bool enableFeedback = true, // 是否启用触觉反馈
})

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTabPage(),
    );
  }
}
class MyTabPage extends StatefulWidget {
  @override
  _MyTabPageState createState() => _MyTabPageState();
}
class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin {
  int _currentIndex = 0;
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this); // 3是选项卡数量
    _tabController.addListener(_handleTabChange); // 添加监听器
  }
  @override
  void dispose() {
    _tabController.removeListener(_handleTabChange); // 移除监听器
    _tabController.dispose();
    super.dispose();
  }
  void _handleTabChange() {
    setState(() {
      _currentIndex = _tabController.index; // 更新焦点索引
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('微信'),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // 第一个选项卡的内容
          Container(
            child: Center(
              child: Text('聊天'),
            ),
          ),
          // 第二个选项卡的内容
          Container(
            child: Center(
              child: Text('群组'),
            ),
          ),
          // 第三个选项卡的内容
          Container(
            child: Center(
              child: Text('个人'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
            _tabController.animateTo(index); // 切换TabBarView
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: '聊天',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group),
            label: '群组',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '个人',
          ),
        ],
      ),
    );
  }
}