trackoffical_app/lib/view/home/data_detail/data_detail.dart

import 'package:application/view/home/data_detail/data_detail_cp.dart';
import 'package:application/widget.dart';
import 'package:common_pub/ui/map_view/map_view.dart';
import 'package:common_pub/ui/map_view/view_map_image.dart';
import 'package:common_pub/ui/map_view/view_map_touch.dart';
import 'package:common_pub/ui/map_view/view_plug_loading.dart';
import 'data_detail_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: DataDetailController(),
        builder: (c) {
          return Container(
              height: double.infinity,
              width: double.infinity,
              color: const Color(0xffc9c0c0),
              alignment: Alignment.center,
              child: c.mapWatch != null
                  ? content(context, c.mapWatch!)
                  : noData());
        });
  }

  Widget noData() {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(Assets.imagesIcNoData, height: 64),
          const SizedBox(height: 25),
          const Text('没有数据, 请选择地图',
              style: TextStyle(color: Color(0xff707070), fontSize: 18.5)),
        ],
      ),
    );
  }

  Widget content(BuildContext context, MapWatchService map) {
    return Row(
      children: [
        Expanded(
            child: ViewMapStack(plug: map.plugMap, children: [
          ViewPlugLoading(map.plugMap),
          ViewMapImage(map.plugMap),
          ViewMapTouch(map.plugMap)
        ])),
        _UserListView(),
      ],
    );
  }
}

class _UserListView extends GetView<DataDetailController> {
  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return Container(
          width: 263,
          height: double.infinity,
          decoration: const BoxDecoration(color: Colors.white, boxShadow: [
            BoxShadow(color: Color(0x33000000), blurRadius: 4.3)
          ]),
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text('用户列表'),
                  IconButton(
                      onPressed: controller.selectedDetail.value != null
                          ? () => controller.showDetail.value =
                              !controller.showDetail.value
                          : null,
                      icon: const Icon(Icons.more_horiz)),
                ],
              ),
              Expanded(
                  child: ListView(
                children: controller.showDetail.value? _detailView(): controller.userList
                    .map((element) => _userElem(element))
                    .toList(),
              ))
            ],
          ));
    });
  }

  List<Widget> _detailView() {
    return [
      // DataDetailCP(cpList: controller.)
    ];
  }


  Widget _userElem(UserInfo data) {
    return Obx(() {
      final children = <Widget>[
        Container(
          width: double.infinity,
          height: 42,
          margin: const EdgeInsets.only(top: 8),
          padding: const EdgeInsets.only(left: 4),
          decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: const [
                BoxShadow(color: Color(0x29000000), blurRadius: 3)
              ],
              borderRadius: BorderRadius.circular(3.56)),
          child: Row(
            children: [
              Container(
                height: double.infinity,
                width: 3.56,
                margin: const EdgeInsets.only(top: 8, bottom: 8, right: 3.55),
                decoration: BoxDecoration(
                    color: data.data.oId == controller.selectedUserId.value
                        ? Colors.orange
                        : Colors.transparent,
                    borderRadius: BorderRadius.circular(2.1)),
              ),
              Text(data.data.oName),
              const Spacer(),
              IconButton(
                  onPressed: () {
                    data.isExpand.value = !data.isExpand.value;
                  },
                  icon: Icon(data.isExpand.value
                      ? Icons.arrow_drop_up
                      : Icons.arrow_drop_down))
            ],
          ),
        )
      ];
      if (data.isExpand.value) {
        children.add(Column(
          children: data.data.list
              .map((element) => GestureDetector(
                  onTap: () => controller.selectDetail(element, data),
                  child: detailElem(element)))
              .toList(),
        ));
      }

      return Column(
        children: children,
      );
    });
  }

  Widget detailElem(DetailSimple detail) {
    return Container(
      margin: const EdgeInsets.only(left: 12, top: 2, bottom: 4),
      width: double.infinity,
      height: 54,
      padding: const EdgeInsets.fromLTRB(4, 6, 4, 6),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(3.5),
          boxShadow: const [
            BoxShadow(color: Color(0x33000000), blurRadius: 1.3)
          ]),
      child: Row(
        children: [
          Container(
            height: double.infinity,
            width: 3.56,
            margin: const EdgeInsets.only(right: 3.55),
            decoration: BoxDecoration(
                color: detail.gameId ==
                        controller.selectedDetailSimple.value.gameId
                    ? Colors.orange
                    : Colors.transparent,
                borderRadius: BorderRadius.circular(2.1)),
          ),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(detail.courseName,
                  maxLines: 1, overflow: TextOverflow.ellipsis),
              Text(
                detail.actName,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          )),
          const SizedBox(width: 12),
          Text(detail.isComplete ? '完赛' : '未完赛')
        ],
      ),
    );
  }
}