trackoffical_app/lib/view/home/map/map_page.dart

import 'package:common_pub/model/distance.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:track_offical/service/api.dart' as api;
import 'package:track_offical/utils.dart';
import 'package:common_pub/model/position.dart' as m;
import '../../../generated/assets.dart';

typedef MapInfo = api.ToMapSimpleV2;

class MapPageController extends GetxController {
  @override
  void onInit() {
    super.onInit();
    mapGetMore();
  }

  Future<void> mapGetMore() async {
    if (isMapGetMoreLoading.value) {
      return;
    }
    isMapGetMoreLoading.value = true;
    await tryApi(() async {
      final r = await api.ApiService.to.stub.toMapListV2(api.MapListRequestV2()
        ..limit = 20
        ..offset = mapList.length);

      mapList.addAll(r.list);
      return;
    }, onFinally: () {
      isMapGetMoreLoading.value = false;
    });

    mapListScrollController.addListener(() {
      if (mapListScrollController.position.pixels ==
          mapListScrollController.position.maxScrollExtent) {
        //达到最大滚动位置
        mapGetMore();
      }
    });
  }

  final mapList = <MapInfo>[].obs;
  final isMapGetMoreLoading = false.obs;
  final mapListScrollController = ScrollController();
  final Rx<m.Position?> position = Rx(null);
}

class MapPage extends StatelessWidget {
  const MapPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: MapPageController(),
        builder: (c) {
          return Container(
            width: double.infinity,
            height: double.infinity,
            margin: const EdgeInsets.all(20),
            padding: const EdgeInsets.fromLTRB(58, 28, 58, 28),
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(16)),
            child: Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: 14,
                      height: 14,
                      decoration: const BoxDecoration(
                          shape: BoxShape.circle, color: Colors.blue),
                    ),
                    const Text('地图列表'),
                  ],
                ),
                Expanded(
                    child: Obx(() => GridView.builder(
                        itemCount: c.mapList.length,
                        controller: c.mapListScrollController,
                        scrollDirection: Axis.horizontal,
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                                //设置列数
                                crossAxisCount: 2,
                                //设置横向间距
                                crossAxisSpacing: 10,
                                //设置主轴间距
                                mainAxisSpacing: 10,
                                childAspectRatio: 0.66),
                        itemBuilder: (context, i) {
                          return GalleryCardWidget(data: c.mapList[i], position: c.position.value);
                        })))
              ],
            ),
          );
        });
  }
}

class GalleryCardWidget extends StatelessWidget {
  final MapInfo data;
  final m.Position? position;

  const GalleryCardWidget({
    super.key,
    required this.data,
    required this.position});

  void onTap() async {
  }

  @override
  Widget build(BuildContext context) {
    var distance = '--';

    if ( data.hasDistance()) {
      distance = Distance(m: data.distance).toString();
    }

    return GestureDetector(
      onTap: onTap,
      child: Card(
        color: Colors.white,
        surfaceTintColor: Colors.white,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(5.44))),
        clipBehavior: Clip.antiAlias,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(aspectRatio: 1, child: wImage()),
            Expanded(
                child: Padding(
                    padding: const EdgeInsets.all(6),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          data.name,
                          style: const TextStyle(
                            fontSize: 15.24,
                            fontWeight: FontWeight.w500,
                          ),
                          textAlign: TextAlign.start,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        Text(
                          data.description,
                          style: const TextStyle(
                            fontSize: 19,
                            color: Color(0xffc6c6c6),
                          ),
                          textAlign: TextAlign.start,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        const Spacer(),
                        DefaultTextStyle(
                            style: const TextStyle(
                                color: Colors.black, fontSize: 14),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Image.asset(Assets.imagesIcMapScale,
                                    height: 14),
                                Text(' 1:${data.mapScaleNumber}'),
                                const Spacer(),
                                Image.asset(Assets.imagesIcLocation,
                                    height: 14),
                                Text(' $distance'),
                              ],
                            ))
                      ],
                    ))),
          ],
        ),
      ),
    );
  }

  Widget wImage() {
    return Stack(
      children: [
        SizedBox(
            height: double.infinity,
            // child: AppNetImage(netImage: data.image, fit: BoxFit.fitHeight)
        ),
        Container(
                width: double.infinity,
                height: double.infinity,
                color: Colors.white.withAlpha(178),
                alignment: Alignment.center,
                child: const Text(
                  '待开放',
                  style: TextStyle(color: Color(0xffff6203), fontSize: 15.24),
                ),
              )
      ],
    );
  }
}