Flutter定义tabbar底部导航路由跳转的方法

本文实例为大家分享了Flutter定义tabbar底部导航路由跳转的具体代码,供大家参考,具体内容如下

效果展示

整体实现的目录结构

第一步 把三个页面放到tabs里 Category.dart || Home.dart || Setting.dart

在这里我只展示 Home.dart 另外两个页面相同

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Text("我是首页组件");
  }
}

在 Tabs.dart 里import 引入三个页面

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

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  // 把页面存放到数组里
  List _pageList = [
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        // 默认选中第几项
        currentIndex: this._currentIndex,
        // 导航栏点击获取索引值
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize: 30.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("设置")),
        ],
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart'; //快捷方式:fim
import 'pages/Tabs.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Tabs(),
      theme: ThemeData(primarySwatch: Colors.deepOrange),
      debugShowCheckedModeBanner: false,
    );
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • flutter 路由跳转的实现示例

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • Flutter路由的跳转、动画和传参详解(最简单)

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • Flutter路由之fluro的配置及跳转

    目录 1.pubspec.yaml导包,注意格式~ 2.新建路由类,改类是定义页面的路径,然后将页面handler和路径设置到路由中 3.新建router_handler.dart,处理参数和跳转页面 4.调用传参 5.接收数据 6.问题来了,因为fluro无法直接传中文的,这里就需要用到编码码解码了,也就是encode和decode 1.pubspec.yaml导包,注意格式~ dependencies: flutter: sdk: flutter fluro: ^1.6.3 2.新建路由类,

  • Flutter定义tabbar底部导航路由跳转的方法

    本文实例为大家分享了Flutter定义tabbar底部导航路由跳转的具体代码,供大家参考,具体内容如下 效果展示 整体实现的目录结构 第一步 把三个页面放到tabs里 Category.dart || Home.dart || Setting.dart 在这里我只展示 Home.dart 另外两个页面相同 import 'package:flutter/material.dart'; class HomePage extends StatefulWidget {   HomePage({Key

  • 微信小程序 (三)tabBar底部导航详细介绍

    tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp                     icon组件 Window                            text组件        

  • 微信小程序tabBar底部导航中文注解api详解

    微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解释. 微信小程序tabBar是在全局app.json文件里面配置的. 小程序tabBar配置代码注解 { "pages":[ "pages/index/index", "pages/detail/detail" ], "window":{ "navigatio

  • 支付宝小程序tabbar底部导航

    支付宝小程序重写tabbar底部导航,供大家参考,具体内容如下 1.app.js中代码如下 editTabBar: function () { var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.route; console.log(t) console.log(s) 0 != s.indexOf("/") && (s = "/" + s)

  • 微信小程序自定义底部导航带跳转功能

    本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml <!--底部导航 --> <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t

  • 微信小程序tabbar底部导航

    微信小程序重写tabbar底部导航,供大家参考,具体内容如下 1.app.js代码如下: editTabBar: function() { var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__; 0 != s.indexOf("/") && (s = "/" + s); for (var n in e.list) e.li

  • jQuery对底部导航进行跳转并高亮显示的实例代码

    这两天弄一个mui的底部菜单,有点费时了,尝试了用vue写,纯js写,还有根据mui的写,还是有些问题和麻烦.直到看了网上的一些例子,才想明白,之前一直是一种点击触发事件才高亮的思维去做,这个虽然可以了,但是页面跳转了就又都没了.网上看明白的例子是:让当前页面地址与导航里的地址做对比,相同就高亮,之前思维太死,一直以点击才触发事件来写,结果问题好几个.接下来上代码 <style> .active{ color:#D96C00;}/*高亮样式*/ </style> 这里就放菜单部分代

  • uniapp小程序配置tabbar底部导航栏实战指南

    目录 前言: 正文 Tips 1.首先我们准备好自己项目所需要的tab图标 2.找到我们的pages.json文件进行配置 3.配置一下导航栏标题内容 4.来看看我们的成果(效果图) 总结 前言: 配置底部导航栏首先需要大家准备好自己想要使用的图标,每个tab可以选择两个图标,分别为选中前的和选中后的.之后我们根据uniapp官网提供的 uniapp官网tabbar配置项,话不多说直接上正文一起来学习一下如何配置底部导航栏吧. 正文 首先我们先看一下官网中的介绍:如果应用是一个多 tab 应用,

  • angular 未登录状态拦截路由跳转的方法

    使用angularjs的但页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面. angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了. 第一步:定义myapp var myapp=angular.module("MainController",["ui.router",'infinit

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

随机推荐