H5_Flutter/lib/view/my_page.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:link/view/component/button.dart';
import 'package:link/view/component/link_btn.dart';
import 'package:link/view/component/menu.dart';
import 'package:link/view/guide.dart';

import '../constants.dart';
import '../utils/size_fit.dart';
import 'component/top_container.dart';

class MyIndex extends StatefulWidget {
  const MyIndex({Key? key}) : super(key: key);

  @override
  State<MyIndex> createState() => _MyIndexState();
}

class _MyIndexState extends State<MyIndex> {
  GlobalKey addLinkkey = GlobalKey();
  GlobalKey itemkey = GlobalKey();
  bool showGuide = false;
  Offset itemOffset = const Offset(0, 0);
  Offset guideOffset = const Offset(0, 0);
  int guideStep = 1;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(const Duration(seconds: 2), () {
      // getSize();
    });
  }

  getSize() {
    RenderBox widget2 =
        addLinkkey.currentContext!.findRenderObject() as RenderBox;
    RenderBox widget = itemkey.currentContext!.findRenderObject() as RenderBox;
    var offset = widget.localToGlobal(Offset.zero);
    setState(() {
      showGuide = true;
      itemOffset = offset;
      guideOffset = widget2.localToGlobal(Offset.zero);
    });
  }

  Widget guideItem() {
    String title = '开始探索 2/4';
    if (guideStep==2){
      title = '开始探索 3/4';
    }
    else if (guideStep==3){
      title = '开始探索 4/4';
    }
    else if (guideStep==4){
      title = '完成';
    }
    if (showGuide) {
      return Container(
        color: const Color(0xBF000000),
        child: Column(
          children: [
            Container(
              height: guideStep==1?itemOffset.dy:guideOffset.dy,
              alignment: Alignment.bottomCenter,
              child: Column(
                children: [
                  Expanded(child: Container()),
                  GuideTip(
                      content: '这是我刚添加的第1个链接，点击跳转查看；如需调整，仍可继续编辑',
                      direction: 2,
                      width: 316.px),
                  SvgPicture.asset(
                    'assets/icons/arrow_corner.svg',
                    width: 28.px,
                    height: 14.px,
                    color: const Color(0xFF0000FF),
                  )
                ],
              ),
            ),
            Container(
              width: 295.px,
              height: 52.px,
              padding: EdgeInsets.only(left: 16.px, right: 16.px),
              decoration: BoxDecoration(
                  color: kThemeColor,
                  border:
                      Border.all(color: const Color(0xFF131314), width: 4.px),
                  borderRadius: BorderRadius.circular(26.px)),
              child: Row(
                children: [
                  SvgPicture.asset('assets/icons/link.svg'),
                  SizedBox(
                    width: 10.px,
                  ),
                  Expanded(
                      child: Text(
                    '添加链接',
                    style: TextStyle(
                        color: const Color(0xFF131314), fontSize: 14.px),
                  )),
                  SvgPicture.asset('assets/icons/arrow_right.svg')
                ],
              ),
            ),
            Expanded(child: Container()),
            LinkButton(
                title: title,
                btnWidth: 172.px,
                disable: false,
                isBlack: false,
                callback: () {
                  setState(() {
                    guideStep = guideStep+1;
                    // showGuide = false;
                  });
                }),
            SizedBox(
              height: 64.px,
            )
          ],
        ),
      );
    }
    return Container();
  }

  Widget guideAddLink() {
    if (showGuide) {
      return Container(
        color: const Color(0xBF000000),
        child: Column(
          children: [
            Container(
              height: guideOffset.dy,
              alignment: Alignment.bottomCenter,
              child: Column(
                children: [
                  Expanded(child: Container()),
                  GuideTip(
                      content: '这是我刚添加的第1个链接，点击跳转查看；如需调整，仍可继续编辑',
                      direction: 2,
                      width: 316.px),
                  SvgPicture.asset(
                    'assets/icons/arrow_corner.svg',
                    width: 28.px,
                    height: 14.px,
                    color: const Color(0xFF0000FF),
                  )
                ],
              ),
            ),
            Container(
              width: 295.px,
              height: 52.px,
              padding: EdgeInsets.only(left: 16.px, right: 16.px),
              decoration: BoxDecoration(
                  color: kThemeColor,
                  border:
                      Border.all(color: const Color(0xFF131314), width: 4.px),
                  borderRadius: BorderRadius.circular(26.px)),
              child: Row(
                children: [
                  SvgPicture.asset('assets/icons/link.svg'),
                  SizedBox(
                    width: 10.px,
                  ),
                  Expanded(
                      child: Text(
                    '添加链接',
                    style: TextStyle(
                        color: const Color(0xFF131314), fontSize: 14.px),
                  )),
                  SvgPicture.asset('assets/icons/arrow_right.svg')
                ],
              ),
            ),
            Expanded(child: Container()),
            LinkButton(
                title: '完成',
                btnWidth: 172.px,
                disable: false,
                isBlack: false,
                callback: () {
                  setState(() {
                    showGuide = false;
                  });
                }),
            SizedBox(
              height: 64.px,
            )
          ],
        ),
      );
    }
    return Container();
  }

  Widget userCenter() {
    return Stack(
      children: [
        Column(
          children: [
            SizedBox(
              height: 92.px,
            ),
            Container(
              width: 120.px,
              height: 120.px,
              decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: AssetImage('assets/images/6.png'),
                  ),
                  border: Border.all(color: Colors.black, width: 4.px),
                  borderRadius: BorderRadius.circular(60.px)),
            ),
            SizedBox(
              height: 10.px,
            ),
            Text(
              'Leon 123',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 32.px,
                  fontWeight: FontWeight.bold),
            ),
            Container(
              margin: EdgeInsets.only(left: 62.px, right: 62.px, bottom: 24.px),
              child: Text(
                '时尚感的营造和女性的年龄、身材并没有直接的关联，而是与她们对时尚的理解、态度息而是与她们对时尚的理解、而是',
                style:
                    TextStyle(color: const Color(0x99131314), fontSize: 13.px),
              ),
            ),
            Button(
                key: itemkey,
                child: Container(
                    width: 295.px,
                    height: 52.px,
                    padding: EdgeInsets.only(left: 16.px, right: 16.px),
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color(0xFF131314), width: 4.px),
                        borderRadius: BorderRadius.circular(26.px)),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SvgPicture.asset('assets/icons/link.svg'),
                        SizedBox(
                          width: 10.px,
                        ),
                        Expanded(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Leon',
                              style: TextStyle(
                                  color: const Color(0xFF131314),
                                  fontSize: 14.px),
                            ),
                            Text(
                              '描述文字描述文字描述文字描述文字...',
                              style: TextStyle(
                                  color: const Color(0x99131314),
                                  fontSize: 10.px),
                            )
                          ],
                        )),
                        SvgPicture.asset('assets/icons/arrow_right.svg')
                      ],
                    )),
                callback: () {}),
            SizedBox(
              height: 20.px,
            ),
            Button(
                key: addLinkkey,
                child: Container(
                  width: 295.px,
                  height: 52.px,
                  padding: EdgeInsets.only(left: 16.px, right: 16.px),
                  decoration: BoxDecoration(
                      border: Border.all(
                          color: const Color(0xFF131314), width: 4.px),
                      borderRadius: BorderRadius.circular(26.px)),
                  child: Row(
                    children: [
                      SvgPicture.asset('assets/icons/link.svg'),
                      SizedBox(
                        width: 10.px,
                      ),
                      Expanded(
                          child: Text(
                        '添加链接',
                        style: TextStyle(
                            color: const Color(0xFF131314), fontSize: 14.px),
                      )),
                      SvgPicture.asset('assets/icons/arrow_right.svg')
                    ],
                  ),
                ),
                callback: () {}),
          ],
        ),
        // Positioned(left: 0, right: 0, bottom: 0, top: 0, child: guideItem()),
        // Positioned(left: 0, right: 0, bottom: 0, top: 0, child: guideAddLink()),
  
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return Material(
        color: kThemeColor,
        child: TopContainer(child: //userCenter()
              Stack(children: [
            Positioned(
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                child: Container(
                  color: const Color(0xBF000000),
                  child: Stack(
                    children: [
                      Container(
                        width: 375.px,
                        height: 72.px,
                        decoration: const BoxDecoration(
                          gradient: LinearGradient(
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                              colors: [
                                Color(0x00FFF700),
                                Color(0x00FFF700),
                                Color(0xFFFFF700),
                              ],
                              stops: [0,0.25,1]
                              ),

                        ),
                      ),
                    ],
                  ),
                )),
              Positioned(left: 0,
                width: 120.px,
                top: 0,
                bottom: 0,child: Menu())  
              ])
            // Positioned(
            //     left: 0,
            //     top: 0,
            //     right: 0,
            //     bottom: 0,
            //     child: Container(
            //       color: kThemeColor,
            //       alignment: Alignment.center,
            //       child: Column(children: [
            //         SizedBox(
            //           height: 100.px,
            //         ),
            //         GuideTip(
            //             content: '这是我刚添加的第1个链接，点击跳转查看；如需调整，仍可继续编辑',
            //             direction: 2,
            //             width: 316.px),
            //         SvgPicture.asset('assets/icons/arrow_corner.svg',width: 28.px,height: 14.px,color: const Color(0xFF0000FF),)

            //       ]),
            //     )),

            // Positioned(
            //     left: 0,
            //     top: 0,
            //     right: 0,
            //     bottom: 0,
            //     child: Container(
            //       color: kThemeColor,
            //       alignment: Alignment.center,
            //       child: Column(children: [
            //         const IndexWelcome(),

            //       ]),
            //     )),
            // Container(
            //   width: 375.px,
            //   height: 72.px,
            //   decoration:const  BoxDecoration(
            //     gradient: LinearGradient(
            //                       begin: Alignment.centerLeft,
            //                       end: Alignment.centerRight,
            //                       colors: [
            //                     Color(0x00FFF700),
            //                     Color(0x00FFF700),
            //                     kThemeColor
            //                   ]),
            //   ),
            // ),

            // const IndexWelcome(),
            // ]
            // )
            ));
  }
}