思享工具箱

BottomNavigationBar 自定义 底部导航条

摘要：
import'package:flutter/material.dart';voidmain()=˃runApp;classMyAppextendsStatelessWidget{@overrideWidgetbuild{returnMaterialApp;}}classTabsextendsStatefulWidget{Tabs:super;_TabsStatecreateState()=˃_TabsState();}class_TabsStateextendsState{int_currentIndex=0;@overrideWidgetbuild{returnScaffold;}}需要特别说明的是，默认可以显示两个或者三个BottomNavigationBarItem，如果有更多的BottomNavigationBarItem需要显示，则需要配置type的为BottomNavigationBarType.fixed，否则样式会出现问题。页面切换要实现点击后页面切换的效果，首先需要有三个页面，在flutter中，一切皆组件，页面也是组件。首先，在lib目录下新建pages文件夹，然后在pages下新建文件夹tabs，并新建上面导航对应的三个页面。

在flutter中，BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，bottomNavigationBar是 Scaffold 组件的参数。

BottomNavigationBar 常见的属性

  • items ：List底部导航条按钮集合
  • iconSize ：icon
  • currentIndex ：默认选中第几个
  • onTap：选中变化回调函数
  • fixedColor ：选中的颜色
  • type ：BottomNavigationBarType.fixed & BottomNavigationBarType.shifting

基本实现

import 'package:flutter/material.dart';
void main() =>runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    returnMaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      )
    );
  }
}

BottomNavigationBar 自定义 底部导航条第1张

切换选中

当我们点击按钮，想要切换选中的导航块时，需要监听onTap，然后改变currentIndex。

import 'package:flutter/material.dart';
void main() =>runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    returnMaterialApp(
      home:Tabs()
    );
  }
}
class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);
  _TabsState createState() =>_TabsState();
}
class _TabsState extends State<Tabs>{
  int _currentIndex=0;
  @override
  Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap: (intindex){
              setState(() {
                  this._currentIndex=index;
              });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      );
  }
}

BottomNavigationBar 自定义 底部导航条第2张BottomNavigationBar 自定义 底部导航条第3张

需要特别说明的是，默认可以显示两个或者三个BottomNavigationBarItem，如果有更多的BottomNavigationBarItem需要显示，则需要配置type的为BottomNavigationBarType.fixed，否则样式会出现问题。

BottomNavigationBar 自定义 底部导航条第4张

页面切换

要实现点击后页面切换的效果，首先需要有三个页面，在flutter中，一切皆组件，页面也是组件。

首先，在lib目录下新建pages文件夹，然后在pages下新建文件夹tabs，并新建上面导航对应的三个页面。

Category.dart

import 'package:flutter/material.dart';
class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);
  _CategoryPageState createState() =>_CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage>{
  @override
  Widget build(BuildContext context) {
    return Text("分类");
  }
}

Home.dart

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() =>_HomePageState();
}
class _HomePageState extends State<HomePage>{
  @override
  Widget build(BuildContext context) {
    return Text("我是首页组件");
  }
}

Setting.dart

import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
  SettingPage({Key key}) : super(key: key);
  _SettingPageState createState() =>_SettingPageState();
}
class _SettingPageState extends State<SettingPage>{
  @override
  Widget build(BuildContext context) {
    returnListView(
      children: <Widget>[
        ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        )
      ],
    );
  }
}

BottomNavigationBar 自定义 底部导航条第5张

然后，在pages文件夹下新建Tabs.dart文件，并将上面例子中的tabs组件剪切到这个文件中，

import 'package:flutter/material.dart';
class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);
  _TabsState createState() =>_TabsState();
}
class _TabsState extends State<Tabs>{
  int _currentIndex=0;
  @override
  Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap: (intindex){
              setState(() {
                  this._currentIndex=index;
              });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      );
  }
}

最后，在main.dart中引入Tabs.dart

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
void main() =>runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    returnMaterialApp(
      home:Tabs()
    );
  }
}

此时，仅仅只是实现上面例子中的效果，还不能实现页面的切换，还需要继续修改Tabs.dart文件。

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);
  _TabsState createState() =>_TabsState();
}
class _TabsState extends State<Tabs>{
  int _currentIndex=0;
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置对应的索引值选中
          onTap: (intindex){
              setState(() {  //改变状态
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //选中的颜色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs可以有多个按钮
items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      );
  }
}

代码下载：点这里 提取码(xsju)

标签：#tabs#flutter | 浏览：123 | 发布日期：

免责声明：文章转载自《BottomNavigationBar 自定义 底部导航条》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇任意给定一个正整数N，求一个最小的正整数M(M&amp;gt;1)，使得N*M的十进制表示形式里只含有1和0。vue与element ui搭配，关于eltable表格的排序问题下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

bootstrap添加iframe页

改写自: https://www.cnblogs.com/yxgmagic/p/9637075.html 效果图: <div class="ibox float-e-margins"> <div id="tabContainer"></div> </div> <scri...

tabsSwiper 全屏选项卡（uniapp-uView）

完整代码 <template> <view> <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"swiperWidth="750" gutter="150"&...

Flutter中的日期插件date_format 中文 国际化 及flutter_cupertino_date_picker

今天我们来聊聊Flutter中的日期和日期选择器。 Flutter中的日期和时间戳 //日期时间戳转换 var _nowTime = DateTime.now();//获取当前时间 print(_nowTime); print(_nowDate.millisecondsSinceEpoch); //13位时间戳 1575389234667 prin...

Flutter cached_network_image图片缓存异常/加载失败优化

很多应用都会这么操作，把一些图像进行缓存可以提升用户体验，也能减轻资源浪费，这里以cached_network_image为例。它可以将网络图像进行本地缓存，在需要的时候直接加载，提供了两个使用方法： CachedNetworkImage( imageUrl: "http://via.placeholder.com/350x150",...

flutter SnackBar 底部消息提示

具有可选操作的轻量级消息提示，在屏幕的底部显示 文档：https://api.flutter.dev/flutter/material/SnackBar-class.html demo: import 'package:flutter/material.dart'; class SnackBarDemo extendsStatefulWidget {...

Flutter -------- BottomNavigationBar 界面切换

Android 中有BottomNavigationBar+Fragment切换 而在Flutter也有的BottomNavigationBar 效果图 底部有两种情况 底部导航栏的类型更改其项目的显示方式。如果未指定，则 当少于四个项时，它会自动设置为BottomNavigationBarType.fixed， 否则为BottomNavigationB...

最新文章

随机推荐

思享工具箱导航