Flutter入门实践

002.1 BottomNavigationBar举例【入门级】

2020-03-04  本文已影响0人  码农二哥

涉及到的类

效果

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');
          },
        ),
      ),
上一篇 下一篇

猜你喜欢

热点阅读