Flutter 项目实战 底部导航 六，阿里技术专家

在Flutter中创建带有底部导航栏的应用程序，可以使用CupertinoTabBar和CupertinoTabScaffold来实现iOS风格的底部导航栏。以下是一个简单的实例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text("Home")),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.search), title: Text("Search")),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.settings), title: Text("Settings")),
          ],
        ),
        tabBuilder: (context, index) {
          switch (index) {
            case 0:
              return CupertinoTabView(builder: (context) => HomePage());
            case 1:
              return CupertinoTabView(builder: (context) => SearchPage());
            case 2:
              return CupertinoTabView(builder: (context) => SettingsPage());
            default:
              return Center(child: Text('Unknown tab: $index'));
          }
        },
      ),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}
 
class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search Page'));
  }
}
 
class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Settings Page'));
  }
}

这段代码创建了一个带有三个标签的底部导航栏，每个标签对应一个页面。点击不同的标签会显示不同的内容。这是一个简洁的实现iOS风格底部导航的例子。