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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- ngtos 天融信
NGFW系列产品基于天融信公司10年高品质安全产品开发经验结晶的NGTOS系统架构,采用了多项突破性技术.基于分层的设计思想,天融信公司通过长期的安全产品研发经验,分析多种安全硬件平台技术的差异,创造 ...
- idea启动springboot项目报Error running 'ServiceStarter': Command line is too long. Shorten command line for ServiceStarter or also for Application
解决办法:在.idea文件夹下面的workspace.xml中的 <component name="PropertiesComponent">标签下面添加: <p ...
- JavaScript 廖
=============== JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中 ======注释 // 以双斜杠开头直到行末 ...
- Django REST framework+Vue 打造生鲜电商项目(笔记六)
(部分代码来自https://www.cnblogs.com/derek1184405959/p/8836205.html) 九.个人中心功能开发 1.drf的api文档自动生成 (1) url #d ...
- MySQL-时间日期类型
一.MySQL中 日期和时间类型 表示时间值的日期和时间类型为 DATETIME.DATE.TIMESTAMP.TIME和YEAR. 每个时间类型有一个有效值范围和一个"零"值,当 ...
- 工作流学习之--TPFlow数据库分析
一.TPFlow项目数据库表: 1. 流程相关: a. leipi_flow工作流表: b. leipi_flow_process流程步骤表: c. leipi_run_process运行过程表:记录 ...
- [Luogu] 树链剖分
模板题,对于对为某个点为根的子树进行处理时,只需每个节点记录两个值 分别为搜索以该节点为根的子树时的最初搜索序和最末搜索序,将这两 个数作为线段树区间操作的端点进行操作 #include <bi ...
- 《Microsoft Visio 2013 Step by Step.pdf》
- spring boot aop 切库实现读写分离
项目结构: 主要代码 : 配置数据库 配置datasource 线程隔离: 已上传git gitee地址:https://gitee.com/xxoo0_297/springboot-aop.git
- C++11多线程std::thread创建方式
//#include <cstdlib> //#include <cstdio> //#include <cstring> #include <string& ...