Flutter控件演示 - BottomNavigationBar

本文演示如何使用 BottomNavigationBar 控件构建一个带底部 Tab 功能的界面框架。

在 flutter 中，可以通过 BottomNavigationBar 和 BottomNavigationBarItem 来构建底部的 Tab 功能。

代码如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Bottom Navigatior"),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          items: [
            BottomNavigationBarItem(
              icon: new Icon(Icons.home),
              title: new Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.mail),
              title: new Text('Messages'),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.person), title: Text('Profile'))
          ],
          onTap: (selected) =>  print("you choice is ${selected}")
          )
        ),
    );
  }
}

从代码上可以看到，BottomNavigationBar 通过 currentIndex 来记录当前的选项，并通过 onTap 方法来监听当前用户的选择。