flutter 顶部导航tabbar自定义
本文使用tabbar实现顶部横向滚动多个菜单。
实现tabbar搜索框功能加功能按钮。
话不多说,上代码!
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_zhihu/kits/color/colorKit.dart'; class TestPage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
} class _TestPageState extends State<TestPage>
with SingleTickerProviderStateMixin {
TabController _tabController; //tabbar控制器,控制顶部tabbar切换
//搜索框控制器,适用于在全局监听搜索框内容。如果不需要全局监听,只使用onChanged onSubmitted即可
TextEditingController _textController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: 9, vsync: this);//初始化控制器
_textController = TextEditingController();
_textController.addListener(() {
print('_textController+${_textController.text}');
});
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Icon(
Icons.home,
),
flex: 0,
),
Expanded(
child: Container(
height: 30,
margin: EdgeInsets.fromLTRB(10, 5, 10, 0),
child: TextField(
controller: _textController,
decoration: InputDecoration(
fillColor: ColorKit.hexToColor('#F6F6F6'),
filled: true,
contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),
hintText: '请输入搜索内容',
hintStyle: TextStyle(fontSize: 13),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide.none,
),
),
onChanged: (text){
print('onchanged+$text');
},
onSubmitted: (text){
print('onSubmitted+$text');
},
),
),
flex: 1,
),
Expanded(
child: Icon(Icons.pages),
flex: 0,
),
],
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(35),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 1,
child: Container(
height: 48,
child: TabBar(
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,
controller: _tabController,
tabs: [
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
Container(
width: 60,
alignment: Alignment.center,
child: Text('退机'),
),
],
),
)),
Expanded(flex: 0, child: Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Icon(Icons.ac_unit),
))
],
),
),
),
//顶部tabbar页面内容
body: TabBarView(
controller: _tabController,//tabbar控制器
children: [
Text('111111111'),
Text('2222222222'),
Text('333333333'),
Text('111111111'),
Text('2222222222'),
Text('333333333'),
Text('111111111'),
Text('2222222222'),
Text('333333333')
],
),
);
}
}
flutter 顶部导航tabbar自定义的更多相关文章
- Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController
如需转载,请注明出处:Flutter学习笔记(17)--顶部导航TabBar.TabBarView.DefaultTabController 上一篇我们说了BottmNavigationBar底部导航 ...
- 顶部导航TabBar、TabBarView、DefaultTabController
原文地址:https://www.cnblogs.com/upwgh/p/11369537.html TabBar:Tab页的选项组件,默认为水平排列. TabBarView:Tab页的内容容器,Ta ...
- uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...
- 微信小程序自定义顶部导航
注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...
- [置顶]
xamarin Tablayout+Viewpager+Fragment顶部导航栏
最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...
- uni-app实现顶部导航栏显示按钮+搜索框
最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现 ...
- TabLayout实现顶部导航(一)
代码地址如下:http://www.demodashi.com/demo/14552.html 前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 T ...
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- 【React -- 9/100】 抽离顶部导航栏 - [组件复用]
今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...
- uni-app动态修改顶部导航栏标题
动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...
随机推荐
- 【DM论文阅读杂记】推荐系统 注意力机制
Paper Title Real-time Attention Based Look-alike Model for Recommender System Basic algorithm and ma ...
- 莫烦Python 4
莫烦Python 4 新建模板小书匠 RNN Classifier 循环神经网络 问题描述 使用RNN对MNIST里面的图片进行分类 关键 SimpleRNN()参数 batch_input_shap ...
- Task :app:lintVitalRelease FAILED
错误信息:Task :app:lintVitalRelease FAILED 问题原因:dl.google.com 无法连接 解决办法: 修改hosts(推荐)通过在线查询ip网站,找到dl.goog ...
- BundleFusion_Ubuntu_Pangolin 安装的一些error
/usr/bin/ld: 找不到 -lEigen3::Eigen 解决方法:find_package(Eigen3 REQUIRED)为list(APPEND CMAKE_INCLUDE_PATH & ...
- c++文件中,头文件与实现文件该写什么内容
1. 参考https://www.cnblogs.com/fenghuan/p/4794514.html
- usb 2.0 request
- Linux系统时间的设定以及自带的timesync时间同步
1.三个阶段的系统时间设定 1.1 内核启动阶段 这里是在menuconfig文件配置RTC设定系统时间选项. CONFIG_RTC_HCTOSYS_DEVICE="rtc1&qu ...
- 日常开发记录-this.$message,this.$prompt,交换弹窗确定和取消按钮的位置,确定在左,取消在右
代码: <template> <el-button type="text" @click="open">点击打开 Message Box ...
- Oracle函数NULLIF
1.NULLIF函数 函数语法:NULLIF(Expression1,Expression2) 函数功能:如果来个表达式相等,则返回NULL值,否则返回第一个表达式 功能很简单,但是要注意以下几种情况 ...
- join => innerJoin
drupal7中 ->join == ->innerJoin 不是leftJoin哦 无语哦