trackoffical_app/lib/widget/page_frame.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../generated/assets.dart';
import '../route.dart';
import '../screen.dart';

class PageFrame extends GetView {
  // final List<Widget> children;
  final Widget child;
  const PageFrame({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    // final List<Widget> modifiedChildren = List.from(children);
    // modifiedChildren.insert(0, const PageTop());

    return Scaffold(
      body: Container(
      // color: Color(0xffffab00),
      width: 100.wp,
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage(Assets.commonPageBg), fit: BoxFit.cover)
      ),
      child: Column(
        children: [
          PageTop(),
          Expanded(
            child: child,
          )
        ],
      ),
    ));
  }
}

class PageTopController extends GetxController {
  var mapName = "".obs;
}

class PageTop extends GetView<PageTopController> {
  const PageTop({super.key});
  static TextStyle textStyle = TextStyle(color: Colors.white, fontSize: 11.rpx);

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

  @override
  Widget build(BuildContext context) {
    return Container(
        // color: Color(0xffffab00),
        width: 100.wp,
        height: 5.28.wp,
        decoration: BoxDecoration(
            image: const DecorationImage(
                image: AssetImage(Assets.commonPageBg),
                fit: BoxFit.cover,
                opacity: 0.9
            ),
            gradient: const LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [Color(0xff017dc7), Color(0xff005d94)]
                ),
            boxShadow: [
              BoxShadow(
                  color: const Color(0x33000000),
                  offset: Offset(0.wp, 0.28.wp),
                  blurRadius: 0.42.wp)
            ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 5,
              child: wNavList(),
            ),
            Expanded(
              flex: 4,
              child: wMapSpan(),
            ),
            wBroadcastSpan("广播")
          ],
        ));
  }

  Widget wNavList() {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
      wNavText('地图', RouteName.mapsList),
      wNavText('场控', RouteName.mapTO),
      wNavText('用户管理', RouteName.userAdmin),
      wNavText('个人排名', RouteName.personRank),
      wNavText('分组排名', RouteName.groupRank),
      wNavText('数据详情', RouteName.sportData),
      wNavText('设置', RouteName.setting),
      // const Spacer(),
    ]);
  }

  Widget wNavText(String text, String routeName) {
    final children = <Widget>[];
    children.add(Container());
    children.add(Text.rich(TextSpan(
      text: text,
      style: textStyle,
      // 设置点击事件
      // recognizer: TapGestureRecognizer()
      //   ..onTap = () {
      //     debugPrint("next Route == $routeName");
      //   },
    )));

    // if (true) {
    if (Get.currentRoute == routeName) {
      children.add(Align(
        alignment: Alignment.bottomCenter,
        child:
            SizedBox(height: 1.wp, child: Image.asset(Assets.imagesIcTopArrow)),
      ));
    }

    return Padding(
      padding: const EdgeInsets.only(left: 2, right: 2),
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          debugPrint("Get.currentRoute == ${Get.currentRoute}");
          debugPrint("next Route == $routeName");
        },
        child: Stack(
          alignment: Alignment.center,
          children: children,
        ),
      ),
    );
  }

  Widget wMapSpan() {
    final children = <Widget>[];
    if (controller.mapName.value.isNotEmpty) {
      children.add(Container(
        margin: const EdgeInsets.only(left: 15, right: 6),
        height: 2.36.wp,
        width: 0.69.wp,
        decoration: const BoxDecoration(
          color: Color(0xff52bfff),
          borderRadius: BorderRadius.all(Radius.circular(35.0)),
          // border: Border.all(width: 1, color: Colors.red),
        ),
      ));

      children.add(SizedBox(
          width: 35.wp,
          child: Obx(() => Text(
                controller.mapName.value,
                textAlign: TextAlign.left,
                softWrap: false,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: textStyle,
              ))));
    }

    return Row(children: children);
  }

  Widget wBroadcastSpan(String text) {
    return SizedBox(
      width: 11.wp,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: const EdgeInsets.only(right: 6),
            child: Image.asset(
              Assets.imagesIcBroadcast,
              height: 1.7.wp,
              fit: BoxFit.fitHeight,
            ),
          ),
          Text(
            text,
            textAlign: TextAlign.center,
            style: textStyle,
          )
        ],
      ),
    );
  }
}

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

  // runPreview(const Material(child: Column(children: [PageTop()])));
  // runPreview(const PageFrame(children: []));
  runPreview(const PageFrame(child: Spacer()));
}