最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

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

Flutter 太平洋学习网 浏览 评论

不管是微信还是QQ,淘宝,支付宝等国内知名APP都有底部导航菜单(BottomNavigationBar),因此Flutter也提供了这一个BottomNavigationBar类,可以让我们快速轻松的创建APP底部导航,比Android的BottomNavigationView真的简单好用很多!

main.dart基本代码如下所示:

  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显示
        ),
    );
  }

效果如图所示:

image.png

在BottomNavigationBar类中有一个非常重要的属性“type”,它的值是一个枚举类型,分别是“BottomNavigationBarType.fixed”和“BottomNavigationBarType.shifting”,设置这两个值会让你APP底部导航呈现出不一样的效果。

例如“type:BottomNavigationBarType.fixed”这样设值,就有如下效果,显示所有的菜单label文字标识:

image.png

而“type:BottomNavigationBarType.shifting”这样设值则会隐藏菜单文字说明,当有点击导航元素之后才会显示菜单文字信息,如图所示:

image.png

注意说明:

要想在这种type为“BottomNavigationBarType.shifting”风格下设置导航菜单的背景颜色(如上述的蓝色),使用“backgroundColor: Colors.blue”这样直接设置是不行的,官方认为只能通过设置item元素的背景颜色,来间接达到设置导航背景颜色的需求,代码如下:

  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,
  ),

Flutter BottomNavigationBar完整代码,点击菜单选项切换不同页面:

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<MyHomePage> {

  //菜单角标初始化为0,	
  int _selectedIndex = 0;

  //菜单点击事件
  void _onItemTapped(int index) {
    setState(() { //每次点击都会改变值
      _selectedIndex = index;

    });
  }

  //页面组件集合
  List<Widget> _widgetOptions = <Widget>[
    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,
        ),
    );
  }
}

点击之后效果如图所示:

1585647614689499.png

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/flutter/981.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论