dating_touchme_app/lib/pages/home/home_page.dart

import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/pages/home/all_timeline.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:dating_touchme_app/controller/home/home_controller.dart';
import 'package:dating_touchme_app/pages/home/recommend_tab.dart';
import 'package:dating_touchme_app/pages/home/nearby_tab.dart';

class HomePage extends StatefulWidget {
   const HomePage({super.key});
   
   @override
   State<HomePage> createState() => _HomePageState();
  }

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
    // 确保 HomeController 已注册
    if (!Get.isRegistered<HomeController>()) {
      Get.put(HomeController());
    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<HomeController>(
      builder: (controller) {
        return Stack(
          children: [
            // 背景图 - 覆盖整个屏幕包括状态栏和导航栏
            Image.asset(
              Assets.imagesBgInformation,
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            Positioned.fill(
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.transparent, // rgba(248, 242, 255, 1)
                      Color.fromRGBO(242, 242, 242, .2), // rgba(247, 247, 247, 1)
                    ],
                    stops: [0.0, 1.0],
                  ),
                ),
              ),
            ),
            Scaffold(
              backgroundColor: Colors.transparent,
              appBar: _buildAppBar(controller),
              body: Obx(() {
                // 使用 IndexedStack 保持两个列表的状态，根据当前选中的标签显示对应的列表
                return IndexedStack(
                  index: controller.selectedTabIndex.value,
                  children: const [
                    // 推荐列表
                    RecommendTab(),
                    // 同城列表
                    AllTimeline(),
                  ],
                );
              }),
            ),
          ],
        );
      },
    );
  }

  PreferredSizeWidget _buildAppBar(HomeController controller) {
    return AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      centerTitle: true,
      toolbarHeight: 56,
      titleSpacing: 0,
      title: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          _buildTabButton(title: '推荐', index: 0, controller: controller),
          const SizedBox(width: 28),
          _buildTabButton(title: '广场', index: 1, controller: controller),
        ],
      ),
      bottom: const PreferredSize(
        preferredSize: Size.fromHeight(4),
        child: SizedBox(height: 4),
      ),
    );
  }

  Widget _buildTabButton({
    required String title,
    required int index,
    required HomeController controller,
  }) {
    final bool selected = controller.selectedTabIndex.value == index;
    return GestureDetector(
      onTap: () {
        print('Tab $index clicked');
        if (controller.selectedTabIndex.value != index) {
          controller.setSelectedTabIndex(index);
          // 确保状态更新后刷新UI
          controller.update();
        }
      },
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: selected ? 19 : 17,
              fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
              color: selected
                  ? const Color(0xFF333333)
                  : const Color(0xFF999999),
            ),
          ),
          const SizedBox(height: 6),
          selected
              ? Image.asset(Assets.imagesTabChangeIcon, width: 32, height: 8)
              : const SizedBox(height: 8),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}