Flutter 仿掘金之動態Tabbar

時間 2019-12-07

標籤 flutter 動態 tabbar 简体版

原文原文鏈接

效果

很少逼逼緩存

Tabbar

先看Tabbar的參數bash

const TabBar({
    Key key,
    @required this.tabs, // item
    this.controller, //控制器
    this.isScrollable = false, //是否能夠滑動
    this.indicatorColor, //指示器的顏色
    this.indicatorWeight = 2.0,
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,//自定義指示器
    this.indicatorSize,
    this.labelColor, // 選中文字顏色
    this.labelStyle, // 
    this.labelPadding, // 文字的內邊距
    this.unselectedLabelColor, // 未選中文字顏色
    this.unselectedLabelStyle,
    this.dragStartBehavior = DragStartBehavior.start, 
    this.onTap,// 點擊事件
  })
複製代碼

TabBarView

const TabBarView({
    Key key,
    @required this.children, // 每頁的view
    this.controller, // 控制器
    this.physics,
    this.dragStartBehavior = DragStartBehavior.start,
  })
複製代碼

好了,這兩個必須關聯起來用. 否則會報錯app

DefaultTabController

這個是一個無狀態的控制器,很簡單.可是要作成動態Tabbar的話,不能用這個.async

TabController

也很簡單.ide

TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
複製代碼

主要是這個TickerProvider.做用是獲取每一幀刷新的通知.工具

其實也簡單

直接實現TickerProviderStateMixin就行了.ui

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{

  TabController _tabController;
    
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: _spList.length, vsync: this);// 直接傳this
  }
}
複製代碼

如何動態建立

SharedPreferences 這裏我使用了本地緩存來作的this

添加插件spa

寫個工具插件

class SpUtils {
  static Future<List<String>> getSpList(String key) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getStringList(key) ?? [];
  }

  static setSpList(String key, List<String> list) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setStringList(key, list);
  }
}
複製代碼

這樣使用就簡單不少了

完整的代碼

import 'package:flutter/material.dart';
import '../util/SpUtils.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  var _bottomIndex = 0;
  var _spList = [];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: _spList.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    SpUtils.getSpList('tabmenu').then((s) {
      if (_spList == s) {
        return;
      }
      setState(() {
        _spList = s;
        _tabController = new TabController(length: _spList.length, vsync: this);
      });
    });
    return Scaffold(
      appBar: new AppBar(
        titleSpacing: 0,
        title: Center(
          child: new TabBar(
            controller: _tabController,
            isScrollable: true,
            labelColor: Colors.white,
            tabs: _spList.map((f) {
              return Center(
                child: new Text(f),
              );
            }).toList(),
          ),
        ),
        actions: <Widget>[
          new Container(
            child: new Icon(Icons.arrow_drop_down),
            width: 48,
          )
        ],
      ),
      body: TabBarView(
          controller: _tabController,
          children: _spList.isEmpty
              ? []
              : _spList.map((f) {
                  return Center(
                    child: new Text(f),
                  );
                }).toList()),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: new Container(),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.whatshot),
            title: new Container(),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: new Container(),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.book),
            title: new Container(),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: new Container(),
          ),
        ],
        currentIndex: _bottomIndex,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.white,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        onTap: (i) {
          setState(() {
            _bottomIndex = i;
          });
        },
      ), 
    );
  }
}
複製代碼

注意的點:

1._tabController 要從新建立.由於須要更新長度

SpUtils.getSpList('tabmenu').then((s) { //獲取緩存
      if (_spList == s) {//防止遞歸刷新
        return;
      }
      setState(() {
        _spList = s;
        _tabController = new TabController(length: _spList.length, vsync: this);
      });
    });
複製代碼

2.Tabbar放Appbard的title位置上

TabBar須要使用center包裝.否則默認高度是不會佔滿的,固然也能夠用其它辦法

isScrollable須要設置爲true.才能滑動.

appBar: new AppBar(
        titleSpacing: 0,
        title: Center(
          child: new TabBar(
            controller: _tabController,
            isScrollable: true,
            labelColor: Colors.white,
            tabs: _spList.map((f) {
              return Center(
                child: new Text(f),
              );
            }).toList(),
          ),
        ),
        actions: <Widget>[
          new Container(
            child: new Icon(Icons.arrow_drop_down),
            width: 48,
          )
        ],
      ),
複製代碼