trackoffical_app/lib/view/maplist/map_list_view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../model.dart';
import '../../generated/assets.dart';
import '../../screen.dart';
import '../../service/mock.dart';
import '../../widget/app_dialog.dart';
import '../../widget/app_net_image.dart';
import '../../widget/hard_level.dart';
import '../../widget/page_frame.dart';
import 'map_list_controller.dart';

class MapListView extends GetView<MapListController> {
  const MapListView({super.key});

  static Bindings bindings() {
    return BindingsBuilder(() {
      Get.lazyPut<MapListController>(() => MapListController());
    });
  }

  @override
  Widget build(BuildContext context) {
    // final PageTopController c = Get.find();
    return PageFrame(child: _wBody(context));
  }

  Widget _wBody(BuildContext context) {
    return Obx(() {
      final data = controller.mapList;
      return Container(
          margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 18),
          width: context.width,
          height: context.height,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(12.0)),
            // border: Border.all(width: 1, color: Colors.red),
          ),
          child: Column(children: [
            Padding(
              padding: const EdgeInsets.only(left: 30, top: 15),
              child: Row(
                children: [
                  const Icon(
                    Icons.circle,
                    size: 16,
                    color: Color(0xff1a82c0),
                  ),
                  const SizedBox(width: 6),
                  Text(
                    '地图列表  ( ${data.length} )',
                    style: const TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                      fontWeight: FontWeight.w500,
                    ),
                    textAlign: TextAlign.start,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  // Container(
                  //   margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 18),
                  //   width: 1.68.wp,
                  //   // child: Image.asset(Assets.imagesIcArrowLeft),
                  // ),
                  Expanded(
                    child: Container (
                      // color: Colors.blue,
                      margin: const EdgeInsets.only(
                          left: 30, right: 30, top: 10, bottom: 20),
                      child: _dataView(context, data,
                          controller.mapInfoListScrollController),
                    )
                  ),
                  // Container(
                  //   margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 18),
                  //   width: 1.68.wp,
                  //   // child: Image.asset(Assets.imagesIcArrowRight),
                  // ),
                ],
              ),
            )
          ]));
    });
  }

  Widget _dataView(BuildContext context, List<MapInfo> data,
      ScrollController scrollController) {
    return GridView.builder(
        padding: const EdgeInsets.all(0.0),
        itemCount: data.length,
        controller: scrollController,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            //设置列数
            crossAxisCount: 5,
            //设置横向间距
            crossAxisSpacing: 30,
            //设置主轴间距
            mainAxisSpacing: 30,
            //设置宽高比例
            childAspectRatio: 0.71),
        itemBuilder: (context, i) {
          return GalleryCardWidget(data: data[i]);
        });
  }
}

class GalleryCardWidget extends GetView<MapListController> {
  final MapInfo data;

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

  void onTap() async {
    var pin = '';
    var isCancel = false;
    if (data.needPin) {
      isCancel = true;
      await Get.dialog(AppDialog(
        title: const Text('请输入PIN码'),
        content: SizedBox(
            width: 50.0.wp,
            child: TextField(
              onChanged: (v) {
                pin = v;
              },
              maxLines: 1,
              maxLength: 8,
              style: const TextStyle(color: Colors.white),
            )),
        onCancel: () => Get.back(),
        onConfirm: () {
          isCancel = false;
          Get.back();
        },
      ));
    }
    // if (!isCancel) {
    //   Get.to(() => ActivityListView(
    //     mapName: data.name,
    //     mapId: data.id,
    //     pin: pin,
    //     isDirectIn: false,
    //   ));
    // }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: data.isOpen ? onTap : null,
      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.6),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          data.name,
                          style: const TextStyle(
                            fontSize: 13.6,
                            fontWeight: FontWeight.w500,
                          ),
                          textAlign: TextAlign.start,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        const Text(
                          "边走边打卡",
                          style: TextStyle(
                            color: Color(0xffc6c6c6),
                            fontSize: 11,
                            fontWeight: FontWeight.w500,
                          ),
                          textAlign: TextAlign.start,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        const SizedBox(height: 3),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Image.asset(Assets.imagesIcRuler,
                                    height: 1.0.wp),
                                const SizedBox(width: 1),
                                const Text('1:1000',
                                    style: TextStyle(
                                        color: Colors.black, fontSize: 10)),
                                const SizedBox(width: 6),
                              ],
                            ),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                const Icon(
                                  Icons.location_on,
                                  size: 13,
                                  color: Color(0xffaaaaaa),
                                ),
                                const SizedBox(width: 1),
                                getDistanceText(data),
                              ],
                            ),
                            // HardLevel(data.level),
                          ],
                        )
                      ],
                    ))),
          ],
        ),
      ),
    );
  }

  Widget wImage() {
    return Stack(
      children: [
        SizedBox(
            height: double.infinity,
            // height: 12.85.wp,
            child: AppNetImage(netImage: data.image, fit: BoxFit.fitHeight)),
        data.isOpen
            ? const SizedBox()
            : 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),
                ),
              )
      ],
    );
  }

  Widget getDistanceText(MapInfo data) {
    return Obx(() {
      final myPosition = controller.myPosition;
      var str = '--';
      if (myPosition != null) {
        final p = data.position;
        str = p.distance(myPosition).toString();
      }

      return Text(str,
          style: const TextStyle(color: Colors.black, fontSize: 10));
    });
  }
}

void main() {
  Mock.initServices();

  PageTopController pageTopController = Get.put(PageTopController());
  // pageTopController.mapName.value = "济南泉城公园";
  // pageTopController.mapName.value = "济南森林公园风景区定向运动济南森林公园风景区定向运动";
  Get.put(MapListController());

  runPreview(const MapListView());
}