基本使用:

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. osi七层网络模型(一)

    在网络中OSI分为七层网络模型,怎么理解七层模型呢?简单理解我们的手机都有手机壳.屏幕.摄像头.电池.芯片等很多原件,每个原件都是由不同的 厂家生产,最终组装成了一部功能完整的手机,同样,在网络中,也 ...

  2. Winform工程反编译后的工作

    Winform工程,反编译后,虽然能用,但不太好用. 因为form并没有像原生的那样. 所以,需要几个步聚: 1. 用ResGen工具,把二进制资源文件还原为xml格式: ResGen fromXX. ...

  3. 为什么要设置HTTP timeout?

    先看一个不设置timeout造成的线上事故. 一次线上事故 有一次生产上的一个服务出了点故障,一个原本每5分钟执行一次的定时任务突然不执行了.第一反应是任务执行报错,查看日志,却没有找到任何异常报错信 ...

  4. unittest单元测试笔记

    单元测试 unittest单元测试是基于java的JUnit思想框架开发出来的测试框架 import unittest import HTMLTestRunner class Mytest1(unit ...

  5. latex 表格每行设置不同字体

    Each cell of a table is set in a box, so that a change of font style (or whatever) only lasts to the ...

  6. c语言之——整型的隐式转换与溢出检测

    溢出检测 我们可以通过下面的方式来检测溢出: if(a > INT_MAX - b) {     printf("overflow\n"); } 我们利用整型的最大值减去其中 ...

  7. CSP模拟赛 number (二分+数位DP)

    题面 给定整数m,km,km,k,求出最小和最大的正整数 nnn 使得 n+1,n+2,-,2nn+1,n+2,-,2nn+1,n+2,-,2n 中恰好有 mmm 个数 在二进制下恰好有 kkk 个 ...

  8. log4j2配置文件log4j2.xml详解

    配置全解 1.缺省默认配置文件 <?xml version="1.0" encoding="UTF-8"?> <Configuration s ...

  9. Vue.js-组件化前端开发新思路

    Vue.js-组件化前端开发新思路 12017.04.14 18:31:25字数 6228阅读 5632 本文章是我最近在公司的一场内部分享的内容.我有个习惯就是每次分享都会先将要分享的内容写成文章. ...

  10. Greenplum 查看表的分区键与分区类型

    方法一 查看表的分区键 select d.nspname||'.'||a.relname as table_name,string_agg(b.attname,',') as column_namef ...