本文使用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自定义的更多相关文章

  1. Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController

    如需转载,请注明出处:Flutter学习笔记(17)--顶部导航TabBar.TabBarView.DefaultTabController 上一篇我们说了BottmNavigationBar底部导航 ...

  2. 顶部导航TabBar、TabBarView、DefaultTabController

    原文地址:https://www.cnblogs.com/upwgh/p/11369537.html TabBar:Tab页的选项组件,默认为水平排列. TabBarView:Tab页的内容容器,Ta ...

  3. uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...

  4. 微信小程序自定义顶部导航

    注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...

  5. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  6. uni-app实现顶部导航栏显示按钮+搜索框

    最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现 ...

  7. TabLayout实现顶部导航(一)

    代码地址如下:http://www.demodashi.com/demo/14552.html 前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 T ...

  8. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  9. 【React -- 9/100】 抽离顶部导航栏 - [组件复用]

    今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...

  10. uni-app动态修改顶部导航栏标题

    动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...

随机推荐

  1. webpack的加载器兼容配置一览

    "devDependencies": { "css-loader": "^3.2.1", "file-loader": ...

  2. 剑指 Offer II 动态规划

    088. 爬楼梯的最少成本 class Solution { public: int minCostClimbingStairs(vector<int>& cost) { int ...

  3. DSP(数字信号处理)与监控摄像机相关技术解读

    提起安防领域,我们第一个想到的应该就是监控摄像机了,它对于安防的重要性,就像人的眼睛对于人的作用一样,是重要的信息获取来源. 监控摄像机广泛应用于学校.公司.银行.交通.平安城市等多个安保领域. 广州 ...

  4. System.Diagnostics.Process.Start(); 用法详解

    来源:https://news.68idc.cn/buildlang/ask/20150104156981.html 实例代码:http://www.cppcns.com/ruanjian/cshar ...

  5. vscode 远程连接 linux 远程开发

    1. 安装拓展 remote-ssh 2. 设置云主机 git 控制台使用命令 ssh-keygen # 生成一个 ssh key # 登录远程主机 # ssh ubuntu@123.123.123. ...

  6. Redux Toolkit——基操

    redux-toolkit是redux的升级版 安装 npm install @reduxjs/toolkit // 在react中还需要搭配react-redux使用 npm install rea ...

  7. eval对函数this指向的影响

    js eval() 对 this 指向的影响 const fn = () => { console.log('fn this is:', this) } function evalWrapper ...

  8. top单核与32C--CPU爆表

    linux的cpu使用频率是根据cpu个数和核数决定的 top, 然后你按一下键盘的1,这就是单个核心的负载,不然是所有核心的负载相加,自然会超过100 单核为100%,服务器是32核的,下面基本用了 ...

  9. Linux 查找并杀死进程

    1.查找包含java的所有进程 ps -ef | grep java 2.根据端口号查看进程号 lsof -i:8080 sudo lsof -i:8080 3.杀死进程 kill -9 proces ...

  10. 配置全局路由表和VRF路由表之间的路由泄漏

    1.拓扑图 2.R1配置 R1#sho run Building configuration... Current configuration : 1360 bytes ! upgrade fpd a ...