20Flutter通过TabController定义顶部tab切换,介绍生命周期函数
基本使用:
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切换,介绍生命周期函数的更多相关文章
- TabController定义顶部tab切换
前面通过DefaultTabController组件实现了AppBar里面的顶部导航切换,但是在项目中有数据请求,上拉加载更多等操作的时候,前面的写法,就不是很方便操作,因此,在flutter里面,还 ...
- 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)
Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...
- AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
一.Flutter AppBar 自定义顶部按钮图标.颜色 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当 ...
- Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...
- Flutter——TabBar组件(顶部Tab切换组件)
TabBar组件的常用属性: 属性 描述 tabs 显示的标签内容,一般使用 Tab 对象,也可以是其他的Widget controller TabController 对象 isScrollabl ...
- 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航
ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...
- 自己定义一个tab指令
定义一个tab切换的指令: 指令的文件结构: Js/directives/tab tab.html tab.js tab.html: <style> .my-li-style{ line- ...
- tab 切换 和 BottomNavigationBar 自定义 底部导航条
BottomNavigationBar 组件 BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- EntityFramework 两个参数连续(中间有空格)问题
昨天在项目中,用到 EntityFramework 通过SQL语句查询. 具体的SQL语句如下: SELECT t.* FROM ( SELECT c.id AS CommunityId, c.`na ...
- vue路由分区结合require.context使用
1.先说路由分区 在router文件夹下新建你要分区的模块例如 登录 订单模块 新建文件 logn.router.js order.router.js 代码如下: export default { ...
- matlab(7) Regularized logistic regression : mapFeature(将feature增多) and costFunctionReg
Regularized logistic regression : mapFeature(将feature增多) and costFunctionReg ex2_reg.m文件中的部分内容 %% == ...
- css、js文件后的后缀作用是什么?
文章转自:https://blog.csdn.net/yelbosh/article/details/47303247 <link rel="stylesheet" type ...
- go 变量的定义方式
var a int a = 1 var a,b int a =1 b = 2 var a,b = 1,2 var s string = "hello world" a, b := ...
- TCP 拥塞控制
TCP 拥塞控制 相关名词 滑动窗口 tcp通过滑动窗口进行流量控制,所谓的窗口可以理解为接收端所能提供的缓冲区大小. TCP是一个滑动窗口协议,即一个TCP连接的发送端在某个时刻能发多少数据是由滑动 ...
- ORACLE数据库误操作执行了DELETE,该如何恢复数据?
ORACLE数据库误操作执行了DELETE,该如何恢复数据? 原创 2016年08月11日 17:23:04 10517 作为一个程序员,数据库操作是必须的,但是如果操作失误,一般都会造成比较严重的后 ...
- sql server 时间处理函数 datediff() 和getdate()
一: DATEDIFF() 定义和用法 DATEDIFF() 函数返回两个日期之间的时间. 语法 DATEDIFF(datepart,startdate,enddate) startdate 和 en ...
- Oracle 与 postgreSQL 事务处理区别(多版本与undo区别)
2015年左右,因为工作需要用MongoDB.CouchBase这两种文档型数据库,时不时到这两个数据库官网上查资料.报BUG.时常可以在MongoDB官网上看到这样一些新闻,“某某企业成功将MySQ ...
- BZOJ 4300: 绝世好题 二进制
对于每一个数字拆位,然后维护一个大小为 30 左右的桶即可. code: #include <bits/stdc++.h> #define N 100006 #define setIO(s ...