爱刨根知识网

  1. 首页 > 经验知识 > >

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'; //快捷方式:fimimport '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,    );  }}【Flutter定义tabbar底部导航路由跳转的方法】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com 。
-- 展开阅读全文 --

    推荐阅读


    上一篇：Android组件化原理详细介绍

    下一篇：未绝育的公猫可以养在一起吗