先看效果

Tabbar_01.mp4 (178.12KB)

实现代码

  2. class OptionsTab extends StatefulWidget {
  3.   const OptionsTab({
  4.     Key key,
  5.   }) : super(key: key);
  7.   @override
  8.   _OptionsTabState createState() => _OptionsTabState();
  9. }
  11. class _OptionsTabState extends State<OptionsTab> {
  12.   ScrollController scrollController;
  13.   List optionList;
  14.   int _currentSelectedIndex = 0;
  16.   @override
  17.   void initState() {
  18.     optionList = [
  19.       '全部',
  20.       '通知',
  21.       '作业',
  22.       '打卡',
  23.       '通知',
  24.       '作业',
  25.       '打卡',
  26.       '通知',
  27.       '作业',
  28.       '打卡',
  29.       '通知',
  30.       '作业',
  31.       '打卡',
  32.     ];
  33.     scrollController = ScrollController();
  34.     super.initState();
  35.   }
  37.   @override
  38.   Widget build(BuildContext context) {
  39.     return Container(
  40.       padding: EdgeInsets.symmetric(vertical: 5),
  41.       height: 30,
  42.       color: Colors.white,
  43.       child: ListView.builder(
  44.         scrollDirection: Axis.horizontal,
  45.         controller: scrollController,
  46.         itemBuilder: (BuildContext context, int index) {
  47.           bool selected = _currentSelectedIndex == index;
  48.           return GestureDetector(
  49.             behavior: HitTestBehavior.translucent,
  50.             onTap: () {
  51.               if (_currentSelectedIndex == index) {
  52.                 return;
  53.               }
  54.               ScrollPosition position = scrollController.position;
  55.               print(
  56.                   'position index:$index viewportDimension:${position.viewportDimension} minScrollExtent:${position.minScrollExtent} maxScrollExtent${position.maxScrollExtent}');
  57.               /// 计算当前选中的 Tab 的 offset
  58.               double currentOffset = 50 * index.toDouble();
  59.               /// 计算居中的 offset
  60.               double centerOffset = currentOffset + 25;
  61.               /// 计算最终滚动的 offset 距离
  62.               double absOffset = (centerOffset - position.viewportDimension / 2)
  63.                   .clamp(position.minScrollExtent, position.maxScrollExtent)
  64.                   .toDouble();
  65.               print(
  66.                   'currentOffset:$currentOffset centerOffset:$centerOffset absOffset:$absOffset');
  67.               /// 通过 controller 滚动到对于的距离
  68.               scrollController.animateTo(absOffset,
  69.                   duration: kTabScrollDuration, curve: Curves.ease);
  71.               _currentSelectedIndex = index;
  72.               setState(() {});
  73.             },
  74.             child: Container(
  75.               margin: EdgeInsets.symmetric(horizontal: 5),
  76.               decoration: BoxDecoration(
  77.                   color: selected ? Colors.white : Colors.grey[200],
  78.                   border: Border.all(
  79.                     color: selected ? Colors.blue : Colors.grey[300],
  80.                   ),
  81.                   borderRadius: BorderRadius.circular(4)),
  82.               child: Text(
  83.                 '${optionList[index]}',
  84.                 style: TextStyle(
  85.                   color: selected ? Colors.blue : Colors.grey[500],
  86.                   fontSize: 10,
  87.                 ),
  88.               ),
  89.               alignment: Alignment.center,
  90.               height: 30,
  91.               width: 50,
  92.             ),
  93.           );
  94.         },
  95.         itemCount: optionList?.length ?? 0,
  96.       ),
  97.     );
  98.   }
  99. }

使用上面的小算法就可以实现 listview 滚动到对应的 item

  1. ScrollPosition position = scrollController.position;
  2. print(
  3.   'position index:$index viewportDimension:${position.viewportDimension} minScrollExtent:${position.minScrollExtent} maxScrollExtent${position.maxScrollExtent}');
  4. /// 计算当前选中的 Tab 的 offset
  5. double currentOffset = 50 * index.toDouble();
  6. /// 计算居中的 offset
  7. double centerOffset = currentOffset + 25;
  8. /// 计算最终滚动的 offset 距离
  9. double absOffset = (centerOffset - position.viewportDimension / 2)
  10.   .clamp(position.minScrollExtent, position.maxScrollExtent)
  11.   .toDouble();
  12. print(
  13.   'currentOffset:$currentOffset centerOffset:$centerOffset absOffset:$absOffset');
  14. /// 通过 controller 滚动到对于的距离
  15. scrollController.animateTo(absOffset,
  16.                            duration: kTabScrollDuration, curve: Curves.ease);

参考链接