flutter 頂部導(dǎo)航tabbar自定義
本文使用tabbar實(shí)現(xiàn)頂部橫向滾動(dòng)多個(gè)菜單。
實(shí)現(xiàn)tabbar搜索框功能加功能按鈕。

話不多說(shuō),上代碼!
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切換 //搜索框控制器,適用于在全局監(jiān)聽搜索框內(nèi)容。如果不需要全局監(jiān)聽,只使用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: '請(qǐng)輸入搜索內(nèi)容', 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('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), Container( width: 60, alignment: Alignment.center, child: Text('退機(jī)'), ), ], ), )), Expanded(flex: 0, child: Container( margin: EdgeInsets.fromLTRB(10, 0, 10, 0), child: Icon(Icons.ac_unit), )) ], ), ), ), //頂部tabbar頁(yè)面內(nèi)容 body: TabBarView( controller: _tabController,//tabbar控制器 children: [ Text('111111111'), Text('2222222222'), Text('333333333'), Text('111111111'), Text('2222222222'), Text('333333333'), Text('111111111'), Text('2222222222'), Text('333333333') ], ), ); } }

浙公網(wǎng)安備 33010602011771號(hào)