Flutter 项目实战 底部导航 六，Flutter最新开源框架

在Flutter中，创建一个带有底部导航栏的应用程序可以通过使用CupertinoTabBar和CupertinoTabScaffold来实现iOS风格的底部导航栏，或者使用BottomNavigationBar和Scaffold来实现更常见的底部导航栏。以下是一个简单的实例代码，展示了如何使用BottomNavigationBar创建一个带有三个标签的底部导航栏。

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.add),
  ];
 
  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text('Search')),
          BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('Add')),
        ],
      ),
    );
  }
}

这段代码创建了一个包含三个标签的底部导航栏，每个标签分别对应首页、搜索和添加页面。当用户点击底部导航栏的一个标签时，对应的页面会被显示在主体内容区域。这是一个简单的底部导航实现，可以根据实际需求进行扩展和定制。