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')
        ],
      ),
    );
  }
}