前面通过DefaultTabController组件实现了AppBar里面的顶部导航切换,但是在项目中有数据请求,上拉加载更多等操作的时候,前面的写法,就不是很方便操作,因此,在flutter里面,还提供了一个用于实现顶部导航的组件:tabController。

基本实现

为了实现tabController的顶部切换,在前面项目的基础上,新建一个TabBarController.dart的页面,然后配置路由,并在首页配置路由跳转按钮。

接下来是写abBarController.dart的页面。

首先,要使用tabController组件,就必须是在一个继承StatefulWidget的动态组件,并且还要实现SingleTickerProviderStateMixin这个类,

然后在组件初始化的时候,实例化TabController,实例化的时候需要传入两个参数,其中第一个是固定写法,第二个代表Tab个数。

剩下的和前面差不多了,在AppBar里配置bottom属性,设置导航,然后在body里面添加导航对应的页面,不同的是,不管在bottom里面还是body里面,都还需要添加controller: this._tabController。

abBarController.dart

import 'package:flutter/material.dart';

class TabBarControllerPage extends StatefulWidget {
TabBarControllerPage({Key key}) : super(key: key); _TabBarControllerPageState createState() => _TabBarControllerPageState();
} class _TabBarControllerPageState extends State<TabBarControllerPage> with SingleTickerProviderStateMixin {
TabController _tabController; @override
void initState() {
super.initState();
_tabController=new TabController(
vsync: this,
length: 2
);
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TabBarControllerPage"),
bottom: TabBar(
controller: this._tabController,
tabs: <Widget>[
Tab(text:"热销"),
Tab(text:"推荐"),
],
),
),
body: TabBarView(
controller: this._tabController,
children: <Widget>[
Center(child: Text("热销")),
Center(child: Text("推荐"))
],
),
);
}
}

代码下载:点这里(提取码:dwvo)

TabController定义顶部tab切换的更多相关文章

  1. 20Flutter通过TabController定义顶部tab切换,介绍生命周期函数

    基本使用: import 'package:flutter/material.dart'; class TabBarControllerPage extends StatefulWidget { Ta ...

  2. 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)

    Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...

  3. AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当 ...

  4. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

  5. Flutter——TabBar组件(顶部Tab切换组件)

    TabBar组件的常用属性: 属性 描述 tabs 显示的标签内容,一般使用 Tab 对象,也可以是其他的Widget  controller TabController 对象 isScrollabl ...

  6. 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航

    ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...

  7. 自己定义一个tab指令

    定义一个tab切换的指令: 指令的文件结构: Js/directives/tab tab.html tab.js tab.html: <style> .my-li-style{ line- ...

  8. tab 切换 和 BottomNavigationBar 自定义 底部导航条

    BottomNavigationBar 组件    BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold ...

  9. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

随机推荐

  1. 博客图片上传picgo工具安装配置github图传使用

    摘要 对于每一个写博客的人来说,图片是至关重要.这一路经历了多次图片的烦恼,之前选择了微博个人文章那里粘贴图片的方式上传,感觉也挺方便的.但是由于新浪的图片显示问题,如果header中不设置 标签就不 ...

  2. Git的资源地址

    下载地址:https://git-scm.com/downloads 安装教程: https://baijiahao.baidu.com/s?id=1619087367741781687&wf ...

  3. Vuex模块:不开启命名空间

    模块不开启命名空间时,会共享全局命名空间. { state: { 模块1: "局部状态1", 模块2: "局部状态2" }, getters: { getter ...

  4. 【MM系列】SAP MM中物料帐下修改物料的价格

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 物料帐下修改物料的价格   ...

  5. UVa 12169 Disgruntled Judge 紫书

    思路还是按照紫书,枚举a,得出b, 然后验证. 代码参考了LRJ的. #include <cstdio> #include <iostream> using namespace ...

  6. JavaScript 开发的 睡眠状况自测(SRSS)

    Javascript 开发睡眠状况自测程序,手记!2019.11.13日... <script>//初始化fbox = new Findpair('fbox','output');fbox ...

  7. “希希敬敬对”团队——敏捷冲刺Alpha过程总结

    “希希敬敬对”团队在七天冲刺过程中每一个小组成员都尽力去完成自己的任务.在合作过程中,总算是有一些成果出现,代码功能能够实现. 对此次冲刺有如下优缺点: 优点: 团队人员合作较多,成员都能够积极响应参 ...

  8. [Web 前端] 010 css 常用的边框设置

    css 常用边框属性 概览 参数 释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式solid 实线,dotted 点状线,dash ...

  9. Java集合:Collection、List、Set、Map、泛型

    1.集合的理解和好处 2.集合的框架体系图 ★ 3.Collection接口的特点和使用 ★ 4.List和Set接口的特点和使用★ 5.List接口的实现类学习★ 6.Set接口的实现类学习★ 7. ...

  10. Sudoku (剪枝+状态压缩+预处理)

    [题目描述] In the game of Sudoku, you are given a large 9 × 9 grid divided into smaller 3 × 3 subgrids. ...