flutter实现底部标签栏

class MyAppextends StatelessWidget {

@override

  Widgetbuild(BuildContext context) {

return new MaterialApp(

home:Scaffold(

body:MyHomePage(),

    ),

    );

  }

}

class MyHomePageextends StatefulWidget{

MyHomePage({Key key}) :super(key:key);

  @override

  _MyHomePageStatecreateState() =>new _MyHomePageState();

}

class _MyHomePageStateextends State{

int_selectIndex =1;//当前选中的索引

  final _widgetOptions=[

Text('Index 0: 信息'),

    Text('Index 1: 通讯录'),

    Text('Index 2: 发现'),

  ];

  @override

  Widgetbuild(BuildContext context){

return new Scaffold(

appBar:new AppBar(

title:Text('BottomNavigationBar示例'),

    ),

      body:Center(

child:_widgetOptions.elementAt(_selectIndex),//居中显示一个文本

    ),

      //底部导航按钮 包括图标及文本

      bottomNavigationBar:BottomNavigationBar(

items: [

BottomNavigationBarItem(icon:Icon(Icons.chat),title:Text('信息')),

          BottomNavigationBarItem(icon:Icon(Icons.contacts),title:Text('通讯录')),

          BottomNavigationBarItem(icon:Icon(Icons.account_circle),title:Text('发现')),

        ],

        currentIndex:_selectIndex,

        fixedColor: Colors.deepPurple,

        onTap: _onItemTapped,

      ),

    );

  }

void _onItemTapped(int index){

setState(() {

_selectIndex=index;

    });

  }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容