002.1 BottomNavigationBar举例【入门级】

涉及到的类

• Scaffold
• AppBar
• BottomNavigationBar
• BottomNavigationBarItem

效果

image.png

关键代码

Scaffold(
        // AppBar：相当于iOS 的导航栏
        appBar: AppBar(
          // AppBar上的显示内容
          // Text 用于展示文本内容，相当于iOS中的UILabel
          title: Text('App Bar 展示内容'),
        ),
        // body：AppBar及BottomNavigationBar之间展示的内容
        // Center 是用于把子Widget 居中的Widget
        body: Center(
          child: Text('Hello World'),
        ),
        // 相当于iOS 中的UITabBar
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.work), title: Text('工作')),
            BottomNavigationBarItem(
                icon: Icon(Icons.security), title: Text('安全')),
          ],
          onTap: (tappedIndex) {
            print('xiaowei.li tappedIndex：$tappedIndex');
          },
        ),
      ),