【自学Flutter】18 TabBar、TabBarView、BottomAppBar 导航栏和浮动按钮的使用

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  // 定义TabBar的标签列表
  final List<Widget> _children = [
    Icon(Icons.home),
    Icon(Icons.email),
    Icon(Icons.alarm),
    Icon(Icons.face),
  ];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar 示例'),
        bottom: TabBar(
          // 设置当前选中的标签
          controller: null,
          // 设置标签的图标和标签标题
          tabs: <Widget>[
            Tab(icon: Icon(Icons.home), text: '主页'),
            Tab(icon: Icon(Icons.email), text: '邮件'),
            Tab(icon: Icon(Icons.alarm), text: '提醒'),
            Tab(icon: Icon(Icons.face), text: '我的'),
          ],
        ),
      ),
      body: TabBarView(
        // 设置与TabBar中的标签对应的页面内容
        children: <Widget>[
          Icon(Icons.home),
          Icon(Icons.email),
          Icon(Icons.alarm),
          Icon(Icons.face),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(icon: Icon(Icons.home), onPressed: () {}),
            IconButton(icon: Icon(Icons.email), onPressed: () {}),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

这段代码展示了如何在Flutter中使用TabBar、TabBarView和BottomAppBar来创建带有底部导航栏的应用。TabBar用于顶部导航，TabBarView用于显示对应的页面内容，BottomAppBar用于底部永久性的操作按钮和浮动按钮。代码简洁，注释充足，方便理解和学习。