smart_tab_layout

Description:

smart tab layout

smart_tab_layout #
原生 TabBar 功能扩展、支持纵轴排列、更方便的样式配置、更多的样式过渡效果、预制的指示器
SmartTabLayout 使用 #
导入项目
dependencies:
smart_tab_layout: 1.0.7

copied to clipboard
创建 #

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,
);
copied to clipboard
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配置）
},
),
);
copied to clipboard
指示器样式 #

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 位置
),
);
copied to clipboard