TabBar

样式可以完全自己定义单个配置想怎么显示都可以。

这样就可以不用局限于

完成页面布局相对简单主要实现底部

controller.position.viewportDimension

可以移动的最大范围position.minScrollExtent

Row

下面是我实现的大致效果第一个元素左对齐最后一个元素右对齐我这边是直接写死的你们封装一下

代码如下

package:game/const/app_textStyle.dart;

import

package:game/utils/app_widget.dart;

import

package:game/wrap/extension/extension.dart;class

PageTabBar

initStatesuper.initState();WidgetsBinding.instance.addPostFrameCallback((_)

_printSize());//

print(_controller.offset:${_controller.offset});//

});}overridevoid

dispose_controller.dispose();super.dispose();}void

_printSize()

element[key].currentContext.findRenderObject();element[width]

_listMap[0][width];_selectItem(0);}overrideWidget

build(BuildContext

AlwaysScrollableScrollPhysics(),),controller:

Stack(children:

MapEntry(key,AppWidget.inkWellEffectNone(onTap:

Container(padding:

EdgeInsets.symmetric(horizontal:

25.cale),key:

AppTextStyle.textStyle_34_FD3949_Bold:

AppTextStyle.textStyle_30_1A1A1A,),),),),),).values.toList(),),AnimatedPositioned(bottom:

0.cale,left:

EdgeInsets.symmetric(horizontal:

25.cale),width:

Colors.green,),),)],),),),),);}void

_selectItem(int

_controller.position;setState(()

{_selectIndex

_listMap[index][width];});_positionX

(itemIndex)

_listMap[itemIndex][width];});//当前展示的元素位置

中心点位置用户确定

position.maxScrollExtent);_controller.animateTo(movePosition,duration:

const