smart_tab_layout

原生 TabBar 功能扩展、支持纵轴排列、更方便的样式配置、更多的样式过渡效果、预制的指示器

SmartTabLayout 使用

导入项目

dependencies:
   smart_tab_layout: 1.0.7

创建

  • 1.外部定义一个 DefaultTabController 或传入一个 controller
  • 2.传入 labels 指定 tab 显示内容（自定义 tab 样式传入 itemBuilder 和 childCount）
  • 3.现在就可以使用了
DefaultTabController(
	length: 10,
	child: SmartTabLayout(
		labels: ["1","2","3","4","5","6","7","8","9","10"],
	),
);


var controller = TabController(length: 10, vsync: this);

SmartTabLayout(
	controller: controller,
	itemBuilder: (context, index) {
		return Text(index.toString());
	},
	childCount: 10,
);

tab 样式

  • 1.以下代码演示自定义 tab 样式配置
DefaultTabController(
    length: 10,
	child: SmartTabLayout(
		width: 400,//tabLayout宽度
		height: 80,//tabLayout高度
		space: 20,//tab间隔
		background: Colors.lightBlue,//tabLayout背景
		margin: EdgeInsets.only(left: 10),//tabLayout外边距
		padding: EdgeInsets.only(left: 10, right: 10),//tabLayout内边距
		borderRadius: BorderRadius.circular(6),//tabLayout圆角
		border: Border.all(color: Colors.black, width: 1),//tabLayout边框
		direction: Axis.horizontal,//tabLayout 方向
		itemWidth: 60,//tab宽度
		itemHeight: 30,//tab高度
		itemBackground: Colors.indigoAccent,//tab背景
		itemBorderRadius: BorderRadius.circular(8),//tab圆角
		itemPadding: EdgeInsets.symmetric(horizontal: 6, vertical: 3),//tab内边距
		itemBorder: Border.all(color: Colors.black, width: 1),//tab边框
        isScrollable: true,//tab是否根据tabLayout宽度等分 or 是否滚动
		itemSelectedBackground: Colors.white,//tab选中背景
		itemSelectedBorder: Border.all(color: Colors.orange, width: 1),//tab选中边框
		itemSelectedBorderRadius: BorderRadius.zero,//tab选中圆角
		itemSelectedPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 1),//tab选中内边距
		itemTextStyle: TextStyle(//tab字体样式
			color: Colors.purple,
			fontSize: 16,
			fontWeight: FontWeight.normal,
		),
		itemSelectedTextStyle: TextStyle(//tab选中字体样式
			color: Colors.orange,
			fontSize: 16,
			fontWeight: FontWeight.normal,
		),
		childCount: 10,//自定义tab数量
		itemBuilder: (c, i) {//自定义tab
			return Text(i.toString());//不设置style会继承默认样式，带有动画过渡（推荐通过itemTextStyle配置）
		},
	),
);

指示器样式

  • 1.以下代码演示自定义指示器样式配置

SmartImageTabIndicator.load("assets/img/ic_search.png", Size(20, 20)).then((value) {
	_image = value;
	setState(() {});
});

DefaultTabController(
    length: 10,
	child: SmartTabLayout(
		labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
			indicator: SmartImageTabIndicator(
			image: _image,
      	),// 自定义图片指示器
		indicatorSize: TabBarIndicatorSize.tab,// tab:indicator宽度等于tab宽度，label:indicator宽度等于label宽度或自定义tab宽度
		indicatorBorderRadius: BorderRadius.vertical(top: Radius.circular(4)),// indicator设置圆角
		indicatorColor: Colors.blue,// indicator颜色
		indicatorWeight: 2,// indicator 高度
		indicatorPadding: EdgeInsets.only(bottom: 2),// indicator 位置
	),
);

Libraries

smart_tab_layout