专栏首页前端开发随笔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 条评论
登录 后参与评论

相关文章

  • Dart环境配置和运行

    第一步,去官网下载Dart的SDK https://gekorm.com/dart-windows/

    wePanda
  • Flutter配置路由组件抽离及页面传参

    在lib目录下新建个routes文件夹,里面新建个Routes.dart文件来统一管理我们的路由跳转及传参, 在这里我们就以Home.dart文件跳转到Sea...

    wePanda
  • 微信小程序弹窗禁止页面滚动

    在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置sc...

    wePanda
  • 全面了解 Java 原子变量类

    保证线程安全是 Java 并发编程必须要解决的重要问题。Java 从原子性、可见性、有序性这三大特性入手,确保多线程的数据一致性。

    静默虚空
  • Java虚拟机类加载机制

    看到这个题目,很多人会觉得我写我的java代码,至于类,JVM爱怎么加载就怎么加载,博主有很长一段时间也是这么认为的。随着编程经验的日积月累,越来越感觉到了解虚...

    Java团长
  • Springboot异步任务执行及监控

    除了自己实现线程外,springboot本身就提供了通过注解的方式,进行异步任务的执行。下面主要记录一下,在Springboot项目中实现异步任...

    xcbeyond
  • springBoot异步任务、异步监控

    除了自己实现线程外,springBoot本身就提供了通过注解的方式,进行异步任务的执行。下面主要记录一下,在springBoot项目中实现异步任务,以及...

    xcbeyond
  • 腾讯云实验室的正确投稿姿势

    腾讯云实验室上线了在线投稿能力,现在除了官方推出的实验室之外,允许有能力的开发者把自己的技术和经验通过在实验室投稿的方式来进行分享和传播。

    小Q
  • “连连看”小析

    近段日子与几位同事聊到了“连连看”这个小游戏,感觉还颇有些趣味,虽然其本身规则并不繁琐,但玩起来确实很能让人投入。出于自己的一点追究癖,自己这几天还认真考虑了...

    用户2615200
  • 配置springmvc在其他类中(spring容器外)获取注入bean

    学习https://github.com/thinkgem/jeesite 今天在写JedisUtils的时候要注入JedisPool,而这个属性被设置为sta...

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券