Flutter BottomNavigationBar的一些用法(底部导航菜单)

 Widget build(BuildContext context) {

    return Scaffold(

      body: Text("Hello World"),

        bottomNavigationBar: BottomNavigationBar(

          items: [ //导航菜单元素

          BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home),),

          BottomNavigationBarItem(title: Text('新闻'), icon: Icon(Icons.remove_from_queue),),

          BottomNavigationBarItem(title: Text('网评'), icon: Icon(Icons.chat_bubble_outline),),

          BottomNavigationBarItem(title: Text('历史'), icon: Icon(Icons.update),),

          BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person_outline),),

        ],

          //被选择item的颜色

          selectedItemColor: Colors.amber[800],

          //未选择item的颜色 

          unselectedItemColor: Colors.blue, 

          //当前页 

          currentIndex: 0, 

          //item点击事件

          onTap: (){},  

          //默认为shifting风格

          type: BottomNavigationBarType.shifting, 

          //设置导航菜单背景颜色,如果type为shifting风格时,此设置无效为默认白色背景

          //在type为fixed风格时,则导航背景为设置的该背景颜色

          backgroundColor: Colors.blue, 

          showSelectedLabels: true, 导航是否显示文字说明,默认为true显示

        ),

    );

  }



import 'package:flutter/material.dart';

import 'homePage.dart';

import 'commentPage.dart';

import 'newsPage.dart';

import 'historyPage.dart';

import 'minePage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: MyHomePage(title: 'My First Flutter APP'),

    );

  }

}

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);

  @override

  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State {

  //菜单角标初始化为0,

  int _selectedIndex = 0;

  //菜单点击事件

  void _onItemTapped(int index) {

    setState(() { //每次点击都会改变值

      _selectedIndex = index;

    });

  }

  //页面组件集合

  List _widgetOptions = [

    HomePage(title: "首页"),

    NewsPage(title: "新闻"),

    CommentPage(title: "评论"),

    HistoryPage(title: "历史"),

    MinePage(title: "我的"),

  ];

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: _widgetOptions.elementAt(_selectedIndex),

        bottomNavigationBar: BottomNavigationBar(

          items: [

            BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home),backgroundColor: Colors.blue),

            BottomNavigationBarItem(title: Text('新闻'), icon: Icon(Icons.remove_from_queue),backgroundColor: Colors.blue),

            BottomNavigationBarItem(title: Text('网评'), icon: Icon(Icons.chat_bubble_outline),backgroundColor: Colors.blue),

            BottomNavigationBarItem(title: Text('历史'), icon: Icon(Icons.update),backgroundColor: Colors.blue),

            BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person_outline),backgroundColor: Colors.blue),

          ],

          selectedItemColor: Colors.amber[800],

          unselectedItemColor: Colors.white,

          currentIndex: _selectedIndex,

          onTap: _onItemTapped,

          type: BottomNavigationBarType.shifting,

          showSelectedLabels: true,

        ),

    );

  }

}


https://www.tpyyes.com/a/flutter/981.html

https://zhuanlan.zhihu.com/p/190112741

你可能感兴趣的:(Flutter BottomNavigationBar的一些用法(底部导航菜单))