美文网首页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