Flutter 仿掘金之动态Tabbar

栏目: ASP.NET · 发布时间: 1年前

来源: juejin.im

内容简介:不多逼逼先看Tabbar的参数好了,这两个必须关联起来用. 不然会报错

本文转载自:https://juejin.im/post/5ce8dd43f265da1b6a346fc4,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

Flutter 仿掘金之动态Tabbar

不多逼逼

Tabbar

先看Tabbar的参数

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,
  })
复制代码

好了,这两个必须关联起来用. 不然会报错

DefaultTabController

这个是一个无状态的控制器,很简单.但是要做成动态Tabbar的话,不能用这个.

TabController

也很简单.

TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
复制代码

主要是这个 TickerProvider .作用是获取每一帧刷新的通知.

其实也简单

直接 实现TickerProviderStateMixin就好了.

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{

  TabController _tabController;
    
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: _spList.length, vsync: this);// 直接传this
  }
}
复制代码

如何动态创建

SharedPreferences 这里我使用了本地缓存来做的

添加插件

Flutter 仿掘金之动态Tabbar

写个工具

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,
          )
        ],
      ),
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

掘金大数据

掘金大数据

程新洲、朱常波、晁昆 / 机械工业出版社 / 2019-1 / 59.00元

在数据横向融合的时代,充分挖掘数据金矿及盘活数据资产,是企业发展和转型的关键所在。电信运营商以其数据特殊性,必将成为大数据领域的领航者、生力军。各行业的大数据从业者要如何从电信业的大数据中挖掘价值呢? 本书彻底揭开电信运营商数据的神秘面纱,系统介绍了大数据的发展历程,主要的数据挖掘方法,电信运营商在网络运行及业务运营方面的数据资源特征,基于用户、业务、网络、终端及内在联系的电信运营商大数据分......一起来看看 《掘金大数据》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码