基本使用:

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. 备份一下我的88bugs的application文档

    # 服务端口 server.port=8083 #spring.mvc.favicon.enabled=false server.servlet.context-path=/bug/ dateform ...

  2. vue-cli3项目搭建配置以及性能优化

    项目初始化 注意:安装前请确保有安装node.js,并且node>=8.9 全局安装vue npm install -g @vue/cli 如果之前安装了vue旧版本,查看vue --versi ...

  3. .NET Core 初体验

    .NET Core 作为微软的开源项目,neter 们对之的期待还是挺大的. 以前也看过,接触过,摸索建了几个示例项目,今天就罗列下自己的初体验. .NET Core 安装.帮助等 安装的话,直接官网 ...

  4. go语言-关于文件的操作和解释

    一.文件存放的位置 bin文件:存放编译后的二进制文件 pkg文件:存放编译后的库文件 src文件:存放源代码文件 二.运行文件的常用命令 两种运行区别(直接运行和编译后运行) 1.编译生成可执行文件 ...

  5. vue:概要

    一.环境 #安装nodejs-官网安装包配置环境变量 node -v #安装webpack npm install webpack -g #安装vue-cli npm install vue-cli ...

  6. IDEA八条配置修改

    IDEA版本:IntelliJ IDEA 2019.2.1 x64 八条配置修改: 自动编译开关 忽略大小写开关 智能导包开关 悬浮提示开关 取消单行显示tabs的操作 项目文件编码 滚轴修改字体大小 ...

  7. REST与RPC区别

    OSI网络七层模型 第一层:应用层.定义了用于在网络中进行通信和传输数据的接口: 第二层:表示层.定义不同的系统中数据的传输格式,编码和解码规范等: 第三层:会话层.管理用户的会话,控制用户间逻辑连接 ...

  8. 【LOJ #3144】「APIO 2019」奇怪装置

    题意: 定义将一个\(t\)如下转换成一个二元组: \[ f(t) = \begin{cases} x = (t + \left\lfloor \frac{t}{B} \right \rfloor) ...

  9. LibreOJ #6217. 扑克牌

    二次联通门 : LibreOJ #6217. 扑克牌 /* LibreOJ #6217. 扑克牌 背包.... 回到家之后简直了...sb题想半天 */ #include <cstdio> ...

  10. 洛谷P3119草鉴定

    题目 草鉴定,tarjan可以用来缩点,优化spfa的时间, 缩点之后就是一个\(DAG\)了,因此完全可以用来跑spfa上的最长路,然后枚举每条边,查看是否这条边的两个节点分别可以到达起点所在的强连 ...