flutter 底部导航栏 BottomNavigationBar

话不多说,上代码

import 'package:flutter/material.dart';
import 'package:flutter_zhihu/pages/tabs/homeTab.dart';

class TabsController extends StatefulWidget {
  @override
  _TabsControllerState createState() => _TabsControllerState();
}

class _TabsControllerState extends State<TabsController> {

  int _currentIndex = 0;
  final pages = [HomeTab(),HomeTab(),HomeTab(),HomeTab(),HomeTab()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('标题'),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: (){
            print('惦记了搜索');
          })
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,//配置底部菜单
        currentIndex: _currentIndex,//当前菜单在第几个
        onTap: (index){
        //菜单切换事件 _changePage(index); }, type: BottomNavigationBarType.fixed,//菜单切换效果 ), body: pages[_currentIndex],//菜单页面切换 ); }
 //定义底部菜单
final List<BottomNavigationBarItem> bottomNavItems = [ BottomNavigationBarItem( backgroundColor: Colors.blue, icon: Icon(Icons.home), label: '首页', ), BottomNavigationBarItem( backgroundColor: Colors.green, icon: Icon(Icons.message), label: '视频', ), BottomNavigationBarItem( backgroundColor: Colors.amber, icon: Icon(Icons.shopping_cart), label: '会员', ), BottomNavigationBarItem( backgroundColor: Colors.red, icon: Icon(Icons.person), label: '消息', ), BottomNavigationBarItem( backgroundColor: Colors.red, icon: Icon(Icons.person), label: '我的', ), ]; /*切换页面*/ void _changePage(int index) { /*如果点击的导航项不是当前项 切换 */ if (index != _currentIndex) { setState(() { _currentIndex = index; }); } } }

 

posted @ 2021-01-20 16:46  淡然吖  阅读(941)  评论(1编辑  收藏  举报