huixiang_app/lib/view_widget/store_title_tab.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:huixiang/retrofit/data/brand.dart';
import 'package:huixiang/view_widget/icon_text.dart';

class StoreTitleTab extends StatefulWidget {
  final ScrollController scrollController;
  final List<Brand> brands;

  final List<GlobalKey> globaKeys;
  final bool isScroll;

  StoreTitleTab(this.brands,
      this.globaKeys,
      this.scrollController,
      {
      this.isScroll = false,
      });

  @override
  State<StatefulWidget> createState() {
    return _StoreTitleTab();
  }
}

class _StoreTitleTab extends State<StoreTitleTab> {
  int selectedIndex = -1;
  int selectedIndex1 = -1;
  bool isVisible = false;

  @override
  void initState() {
    super.initState();

    print("firstOffset: ${widget.globaKeys}");
    print("firstOffset: ${widget.brands}");
    if (widget.scrollController != null && widget.globaKeys != null && widget.globaKeys.length > 0) {
      widget.scrollController?.addListener(() {
        if (widget.globaKeys[0].currentContext == null) return;
        RenderBox firstRenderBox = widget.globaKeys[0].currentContext.findRenderObject();
        Offset first = firstRenderBox?.localToGlobal(Offset.zero);
        print("firstOffset: ${first.dy}");
        var top = 96.h;
        if (first.dy <= top) {
          if (!isVisible) {
            isVisible = true;
            setState(() {});
          }
        } else {
          var b = isVisible;
          isVisible = false;
          if (b) setState(() {});
          selectedIndex = -1;
        }

        widget.globaKeys.forEach((element) {
          if (widget.globaKeys.indexOf(element) < (widget.globaKeys.length - 1)) {
            if (element.currentContext == null) return;
            RenderBox renderBox = element.currentContext.findRenderObject();
            Offset offset = renderBox?.localToGlobal(Offset.zero);
            RenderBox nextRenderBox = element.currentContext.findRenderObject();
            Offset nextOffset = nextRenderBox?.localToGlobal(Offset.zero);
            if (offset.dy <= top && nextOffset.dy > top) {
              selectedIndex = widget.globaKeys.indexOf(element);
              if (selectedIndex1 != selectedIndex) {
                setState(() {
                  print("object：$selectedIndex");
                });
                selectedIndex1 = selectedIndex;
              }
              return;
            }
          } else {
            RenderBox lastRenderBox = element.currentContext.findRenderObject();
            Offset lastOffset = lastRenderBox?.localToGlobal(Offset.zero);
            if (lastOffset.dy <= top) {
              selectedIndex = widget.globaKeys.indexOf(element);
              if (selectedIndex1 != selectedIndex) {
                setState(() {
                  print("object：$selectedIndex");
                });
                selectedIndex1 = selectedIndex;
              }
              return;
            }
          }
        });

        // if (chiliOffset.dy <= top && breadOffset.dy > top) {
        //   selectedIndex = 0;
        //   if (selectedIndex1 != selectedIndex) {
        //     setState(() {
        //       print("object：$selectedIndex");
        //     });
        //     selectedIndex1 = selectedIndex;
        //   }
        // } else if (breadOffset.dy <= top && milkTeaOffset.dy > top) {
        //   selectedIndex = 1;
        //   if (selectedIndex1 != selectedIndex) {
        //     setState(() {
        //       print("object：$selectedIndex");
        //     });
        //     selectedIndex1 = selectedIndex;
        //   }
        // } else if (milkTeaOffset.dy <= top) {
        //   selectedIndex = 2;
        //   if (selectedIndex1 != selectedIndex) {
        //     setState(() {
        //       print("object：$selectedIndex");
        //     });
        //     selectedIndex1 = selectedIndex;
        //   }
        // }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: (!widget.isScroll) ? true : isVisible,
      child: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        scrollDirection: Axis.horizontal,
        child: Container(
          height: 52.h,
          constraints: BoxConstraints(minWidth: MediaQuery.of(context).size.width),
          color: Colors.white,
          padding: EdgeInsets.all(6),
          alignment: Alignment.center,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: (widget.brands == null || widget.brands.length == 0)
                ? []
                : (widget.brands.map((e) {
                    return item(e, selectedIndex == widget.brands.indexOf(e),
                        widget.brands.indexOf(e));
                  }).toList()),
          ),
        ),
      ),
    );
  }

  Widget item(Brand text, isSelected, index) {
    print("selectedIndex: $selectedIndex");
    return GestureDetector(
      onTap: () {
        FlexParentData parendData = widget.globaKeys[index].currentContext
            .findRenderObject()
            .parentData;
        double offset = parendData.offset.dy - 52.h + 20.h;
        widget.scrollController.animateTo(offset,
            duration: Duration(seconds: 1), curve: Curves.ease);
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        child: tabItem(text, isSelected, index),
      ),
    );
  }

  // List<String> images = [
  //   "assets/image/icon_chili.webp",
  //   "assets/image/icon_milk_tea.webp",
  //   "assets/image/icon_bread.webp",
  // ];

  Widget tabItem(Brand text, isSelected, index) {
    if (isSelected) {
      return IconText(
        text.name,
        isMax: false,
        rightImage: text.icon ?? "assets/image/icon_chili.webp",
        iconSize: 16,
        iconColor: Colors.red,
        textStyle: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.sp,
          color: Color(0xFF353535),
        ),
      );
    } else {
      return IconText(
        text.name,
        isMax: false,
        textStyle: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.sp,
          color: Color(0xFF353535),
        ),
      );
    }
  }
}