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