Flutter 底部导航 tab bar的实现详解

Flutter的底部导航栏TabBar是一种经典的UI设计，比较常见的使用案例是APP底部导航栏的实现。本文将对Flutter底部导航栏TabBar进行详细的介绍和实现讲解。

实现步骤

在pubspec.yaml文件中添加cupertino_icons依赖包，并运行flutter packages get命令。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

在main.dart文件中定义一个名为MyApp的有状态组件，作为应用的根组件。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_screen.dart';
import 'profile_screen.dart';
import 'settings_screen.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  int _selectedIndex = 0; // 当前选中的TabBar下标

  final List<Widget> _pages = [
    HomeScreen(),
    ProfileScreen(),
    SettingsScreen(),
  ]; // TabBar对应的页面

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: _pages[_selectedIndex], // 根据下标返回对应的页面
        bottomNavigationBar: CupertinoTabBar(
          backgroundColor: Colors.white,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: (int index) { // 点击TabBar时切换页面
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
    );
  }
}

在home_screen.dart、profile_screen.dart、settings_screen.dart等文件中编写对应的UI界面布局。

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Home Screen',
        style: Theme.of(context).textTheme.headline2,
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Profile Screen',
        style: Theme.of(context).textTheme.headline2,
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Settings Screen',
        style: Theme.of(context).textTheme.headline2,
      ),
    );
  }
}

在main.dart文件中引入需要的依赖包，并在MyApp组件的build方法中添加相应的页面和TabBar。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_screen.dart';
import 'profile_screen.dart';
import 'settings_screen.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  int _selectedIndex = 0; // 当前选中的TabBar下标

  final List<Widget> _pages = [
    HomeScreen(),
    ProfileScreen(),
    SettingsScreen(),
  ]; // TabBar对应的页面

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: _pages[_selectedIndex], // 根据下标返回对应的页面
        bottomNavigationBar: CupertinoTabBar(
          backgroundColor: Colors.white,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: (int index) { // 点击TabBar时切换页面
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
    );
  }
}

实现效果

经过以上的实现步骤，我们成功地实现了一个底部导航栏TabBar，并且可以根据TabBar的点击事件来切换页面。如下图所示：

总结

Flutter的底部导航栏TabBar实现起来比较简单，仅需在Scaffold组件中添加bottomNavigationBar属性即可。同时，我们还可以通过设置TabBar的currentIndex来控制页面的切换。除此之外，TabBar还支持特定的样式配置和事件处理，可以给予更好的用户体验和交互设计。