基本使用:

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 dispose(){ //生命周期函数:
super.dispose();
_tabController.dispose();
}
@override
void initState(){ //生命周期函数:
super.initState();
_tabController=new TabController(
vsync: this,
length:
);
_tabController.addListener((){
print(_tabController.index);
});
} @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('推荐'))
],
) );
}
}

20Flutter通过TabController定义顶部tab切换,介绍生命周期函数的更多相关文章

  1. TabController定义顶部tab切换

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

  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. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. IDEA快捷键之关闭标签页和选定单词

    下面所说的快捷键仅作为演示使用,个人可根据喜好自行设置 使用Alt + W 选中某个单词 点击IDEA左上角的File 打开Settings 在左侧点击KeyMap 打开右侧的Editor Actio ...

  2. 利其器:无法在 ".vscode" 文件夹()内创建 "launch.json" 文件。

    无法在 ".vscode" 文件夹()内创建 "launch.json" 文件. https://www.cnblogs.com/lidabo/p/588899 ...

  3. 性能三 powerVR specfication

    2.Optimising Geometry Interleaving Attributes VBO Draw call size Triangle Size  32个像素/primitive    - ...

  4. 【bzoj3238】差异 后缀树

    题目大意:给你一个字符串$S$,设$S_i$是串$S$第$i$长的后缀,求: $\sum\limits_{i=1}^{|S|} \sum\limits_{j=i+1}^{|S|} |S_i|+|S_j ...

  5. 有关Django的smallDemo

    注: 电脑为Mac,Python解释器为3.5.4 数据库使用的是pymysql模块代替mysqldb 功能: 运行服务器,在login登录界面输入用户名和密码,post到服务器, 通过数据库判断用户 ...

  6. Vue全家桶之——Vuex

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...

  7. (C99)复合字面量

    #include <stdio.h> struct argvs { char a[64]; int b; }; int pfunc(struct argvs *a) { printf(&q ...

  8. Linux Redirecting to /bin/systemctl restart iptables.service

    方案 一 1.昨天碰到一个错误,linux下输入命令:service iptables restart时,总会报下面一个提示很简单,这句话的意思就是让你重定向到systemctl然后再启用,白话就是说 ...

  9. $("xxx"); 使用jQuery获得对象

    $("xxx"); 使用jQuery获得对象 console.log( $ ( $ ( $ ( '.dropdown' ) ) ) );  与下面返回的结果都是一毛一样的. con ...

  10. 18.4.09 模拟考 zhx P75

    题目链接 https://files.cnblogs.com/files/lovewhy/P75.pdf P75 竞赛时间: ????年??月??日??:??-??:?? 注意事项(请务必仔细阅读) ...