dating-touchme-app/lib/pages/live_page.dart

import 'package:dating_touchme_app/components/home_appbar.dart';
import 'package:dating_touchme_app/provide/user_info.dart';
import 'package:dating_touchme_app/router/route_paths.dart';
import 'package:dating_touchme_app/utils/storage.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

class LivePage extends StatefulWidget {
  const LivePage({super.key});

  @override
  State<LivePage> createState() => _LivePageState();
}

class _LivePageState extends State<LivePage> {


  List<String> topNav = ["相亲", "聚会脱单"];

  List<Map> liveList = [
    {"isNew": true},
    {"isNew": true},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
  ];

  List<String> tabList = [
    "全部", "同城", "相亲视频", "相亲语音"
  ];

  int active = 0;

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



  void changeNav(int active) {
    print("当前项: $active");
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,     // 对应 180deg，从上到下
          end: Alignment.bottomCenter,
          colors: [
            Color.fromRGBO(248, 242, 255, 1.0), // rgba(248, 242, 255, 1)
            Color.fromRGBO(247, 247, 247, 1.0), // rgba(247, 247, 247, 1)
          ],
          stops: [0.0, 1.0], // 对应 0% 和 100%
        ),
      ),
      child: Column(
        children: [
          HomeAppbar(topNav: topNav, changeNav: changeNav, right: InkWell(
            onTap: (){
              print("12121");
            },
            child: Container(
              width: 104.w,
              height: 40.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(40.w)),
                color: const Color.fromRGBO(108, 105, 244, 1)
              ),
              child: Center(
                child: Text(
                  "申请红娘",
                  style: TextStyle(
                    fontSize: 20.w,
                    color: Colors.white,
                    fontWeight: FontWeight.w500
                  ),
                ),
              ),
            ),
          ),),
          Container(
            width: 702.w,
            height: 91.w,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  ...tabList.asMap().entries.map((entry){
                    return Container(
                      margin: EdgeInsets.only(right: 55.w),
                      child: InkWell(
                        onTap: (){
                          active = entry.key;
                          setState(() {

                          });
                        },
                        child: Container(
                          height: 43.w,
                          padding: EdgeInsets.symmetric(horizontal: active == entry.key ? 30.w : 0),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(43.w)),
                            color: Color.fromRGBO(108, 105, 244, active == entry.key ? 1 : 0)
                          ),
                          child: Center(
                            child: Text(
                              entry.value,
                              style: TextStyle(
                                  fontSize: 24.w,
                                  color: active == entry.key ? Colors.white :const Color.fromRGBO(51, 51, 51, .7),
                                  fontWeight:  active == entry.key ? FontWeight.w700 : FontWeight.w500
                              ),
                            ),
                          ),
                        ),
                      ),
                    );
                  }),
                ],
              ),
            ),
          ),
          Wrap(
            spacing: 15.w,
            runSpacing: 15.w,
            children: [
              ...liveList.map((e){
                return LiveItem(item: e,);
              }),

            ],
          )
        ],
      ),
    );
  }
}

class LiveItem extends StatefulWidget {
  final Map item;
  const LiveItem({super.key, required this.item});

  @override
  State<LiveItem> createState() => _LiveItemState();
}

class _LiveItemState extends State<LiveItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        context.pushNamed(RouteNames.liveRoom, queryParameters: {"id" : "0"});
      },
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(20.w)),
        child: Stack(
          children: [
            Container(
              width: 343.w,
              height: 343.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(20.w))
              ),
              child: Image.network(
                "https://picsum.photos/400",
                width: 343.w,
                height: 343.w,
              ),
            ),
            Positioned(
              top: 0,
              left: 0,
              child: Stack(
                children: [
                  Image.asset(
                    "assets/subscript.png",
                    width: 113.w,
                    height: 32.w,
                  ),
                  SizedBox(
                    height: 32.w,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(width: 10.w,),
                        Image.asset(
                          "assets/location_icon.png",
                          width: 12.w,
                          height: 14.w,
                        ),
                        SizedBox(width: 6.w,),
                        Text(
                          "49.9km",
                          style: TextStyle(
                              fontSize: 16.w,
                              color: Colors.white,
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            if(widget.item["isNew"]) Positioned(
              top: 19.w,
              right: 17.w,
              child: Container(
                width: 79.w,
                height: 26.w,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(26.w)),
                    color: const Color.fromRGBO(0, 0, 0, .3)
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 10.w,
                      height: 10.w,
                      margin: EdgeInsets.only(right: 6.w),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(10.w)),
                          color: const Color.fromRGBO(255, 209, 43, 1)
                      ),
                    ),
                    Text(
                      "等待",
                      style: TextStyle(
                          fontSize: 16.w,
                          color: Colors.white,
                          fontWeight: FontWeight.w500
                      ),
                    )
                  ],
                ),
              ),
            ),
            Positioned(
              left: 18.w,
              bottom: 13.w,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 128.w,
                    child: Text(
                      "一直一直在等你一直一直在等你......",
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          fontSize: 16.w,
                          color: Colors.white,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  SizedBox(height: 5.w,),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "福州 | 28岁",
                        style: TextStyle(
                            fontSize: 22.w,
                            color: Colors.white,
                            fontWeight: FontWeight.w500
                        ),
                      ),
                      SizedBox(width: 11.w,),
                      if(widget.item["isNew"]) Container(
                        width: 65.w,
                        height: 21.w,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(21.w)),
                            color: const Color.fromRGBO(255, 206, 28, .8)
                        ),
                        child: Center(
                          child: Text(
                            "新人",
                            style: TextStyle(
                                fontSize: 16.w,
                                color: Colors.white,
                                fontWeight: FontWeight.w500
                            ),
                          ),
                        ),
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}