美文网首页Flutter入门实践
002.1 BottomNavigationBar举例【入门级】

002.1 BottomNavigationBar举例【入门级】

作者: 码农二哥 | 来源:发表于2020-03-04 11:59 被阅读0次

涉及到的类

  • 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');
          },
        ),
      ),

相关文章

网友评论

    本文标题:002.1 BottomNavigationBar举例【入门级】

    本文链接:https://www.haomeiwen.com/subject/mbemlhtx.html