H5_Flutter/lib/view/home_social_list.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:link/view/preview.dart';
import 'package:url_launcher/url_launcher.dart';
import 'dart:js' as js;
import '../model/model.dart';
import '../utils/api.dart';
import '../utils/global.dart';
import '../utils/http_utils.dart';
import '../utils/size_fit.dart';
import '../utils/util.dart';
import 'component/button.dart';
import 'component/toast.dart';

class SocialList extends StatefulWidget {
  UserBean userBean;
  Map<String, dynamic> styles;
  GlobalKey? _itemkey;
  List socials;
  bool isMyPage;
  bool canDrag;
  double scale;
  SocialList(
      {Key? key,
      required this.userBean,
      required this.styles,
      required this.isMyPage,
      required this.socials,
      required this.canDrag,
      required this.scale,
      GlobalKey? itemkey})
      : super(key: key){
        if (itemkey!=null){
          _itemkey = itemkey;
        }
      }

  @override
  State<SocialList> createState() => _SocialListState();
}

class _SocialListState extends State<SocialList> {
  lauchURL(url) async {
    js.context.callMethod('open', [url,'_self']);
    // js.context.callMethod('aaa',['hisss']);
    // if (await canLaunch(url)) {
    //   await launch(url);
    // }

  //   if (!await launchUrl(url)) {
  //   throw 'Could not launch $url';
  // }
    // lauchURL(url);
    // Get.toNamed('web');
  }

  copy(url) async{
    Clipboard.setData(ClipboardData(text: url));
    Toast().showSuccessText('已复制到剪切板', context: context);
  }

  socialListWidget({bool disable = false}) {
    var socialObj = widget.styles['social_item'];
    String strColor = socialObj['background_color'].substring(1, 9);
    int value = int.parse(strColor, radix: 16);
    double borderWidth = 0.0;
    String borderColor = '#00000000';
    if (socialObj['border_width'] != null) {
      borderWidth = double.parse(socialObj['border_width']);
      borderColor = socialObj['border_color'];
    }
    List<BoxShadow> shadows = [];
    if (socialObj['top_shadow'] != null) {
      String shadowColor =
          socialObj['top_shadow']['shadow_color'].substring(1, 9);
      int valueShadow = int.parse(shadowColor, radix: 16);
      shadows.add(BoxShadow(
          color: Color(valueShadow),
          blurRadius: double.parse(socialObj['top_shadow']['shadow_radius'])*widget.scale,
          offset: Offset(double.parse(socialObj['top_shadow']['offset_x'])*widget.scale,
              double.parse(socialObj['top_shadow']['offset_y'])*widget.scale)));
    }

    if (socialObj['bottom_shadow'] != null) {
      String shadowColor =
          socialObj['bottom_shadow']['shadow_color'].substring(1, 9);
      int valueShadow = int.parse(shadowColor, radix: 16);
      shadows.add(BoxShadow(
          color: Color(valueShadow),
          blurRadius: double.parse(socialObj['bottom_shadow']['shadow_radius'])*widget.scale,
          offset: Offset(double.parse(socialObj['bottom_shadow']['offset_x'])*widget.scale,
              double.parse(socialObj['bottom_shadow']['offset_y'])*widget.scale)));
    }

    Color copyColor = const Color(0xFF131314);
    Color qrColor = const Color(0xFF131314);
    if (socialObj['copylink_icon_color']!=null){
      copyColor = Util().stringToColor(socialObj['copylink_icon_color']);
    }
    if (socialObj['qr_icon_color']!=null){
      qrColor = Util().stringToColor(socialObj['qr_icon_color']);
    }
    return List<Widget>.generate(widget.userBean.socials!.length, (index) {
      SocialBean socialBean = widget.userBean.socials![index];
      return Button(
          // key: ValueKey(index),
          key: (index == 0 && disable == false)
              ? (widget._itemkey ?? ValueKey(index))
              : ValueKey(index),
          callback: (() {
            Global().eventBus!.fire('update');
            if (disable) {
              return;
            }
            if (socialBean.type == 'QR') {
              Toast().showText('长按图片识别或保存', context: context);
              showDialog(
                  context: context,
                  barrierDismissible: false,
                  barrierColor: Colors.transparent,
                  useSafeArea: false,
                  builder: (BuildContext context) {
                    return Preview(
                      url: socialBean.userUrl,
                    );
                  });
              return;
            }
            lauchURL(socialBean.userUrl);
          }),
          child: Container(
            width: double.parse(socialObj['width']).px*widget.scale + borderWidth.px * 2*widget.scale,
            height: double.parse(socialObj['height']).px*widget.scale + borderWidth.px * 2*widget.scale,
            margin: EdgeInsets.only(
                bottom: double.parse((socialObj['space_height'])).px*widget.scale),
            decoration: BoxDecoration(
                boxShadow: shadows,
                border: Border.all(
                    color: Util().stringToColor(borderColor),
                    width: borderWidth.px*widget.scale),
                borderRadius: BorderRadius.circular(
                    double.parse(socialObj['border_radius']).px*widget.scale +
                        borderWidth.px*widget.scale)),
            child: Container(
              width: double.parse(socialObj['width']).px*widget.scale,
              height: double.parse(socialObj['height']).px*widget.scale,
              padding: EdgeInsets.only(
                  left: double.parse(socialObj['padding_horizontal']).px*widget.scale,
                  right: double.parse(socialObj['padding_horizontal']).px*widget.scale),
              decoration: BoxDecoration(
                  color: Color(value),
                  borderRadius: BorderRadius.all(Radius.circular(
                      double.parse(socialObj['border_radius']).px*widget.scale))),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(6.px*widget.scale),
                    child: socialBean.logo == null
                        ? SvgPicture.asset(
                            'assets/icons/other_link.svg',
                            width: 24.px*widget.scale,
                            height: 24.px*widget.scale,
                          )
                        :
                        // ImageNetwork(image: socialBean.logo!, height: 24.px, width: 24.px)
                        // WebImage(url: 'assets/images/1.png', width: 24.px, height: 24.px)
                        Image.network(
                            socialBean.logo!,
                            width: 24.px*widget.scale,
                            height: 24.px*widget.scale,
                            fit: BoxFit.cover,
                          ),
                    // WebImage(
                    //     url: socialBean.logo!, width: 24.px, height: 24.px),
                  ),
                  SizedBox(
                    width: 10.px*widget.scale,
                  ),
                  Expanded(
                      child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            socialBean.userNick!.isEmpty
                                ? socialBean.name!
                                : socialBean.userNick!,
                            softWrap: true,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: TextStyle(
                                color: Util()
                                    .stringToColor(socialObj['text_color']),
                                fontSize:
                                    double.parse(socialObj['font_size']).px*widget.scale,
                                fontWeight: socialObj['font_weight'] == 'bold'
                                    ? FontWeight.bold
                                    : FontWeight.normal),
                          ),
                          SizedBox(
                            width: 2.px*widget.scale,
                          ),
                          if (!widget.isMyPage)
                            GestureDetector(
                              onTap: (){
                                Global().eventBus!.fire('update');
                                copy(socialBean.userNick!);
                              },
                              child: SvgPicture.asset(
                              'assets/icons/home_copy.svg',
                              width: 12.px*widget.scale,
                              height: 12.px*widget.scale,
                              color: copyColor,
                            ),
                            )
                        ],
                      ),
                      if (socialBean.description!.isNotEmpty)
                        Text(
                          socialBean.description!,
                          textAlign: TextAlign.left,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                              color: Util().stringToColor(socialObj['desc_color']), fontSize: 10.px*widget.scale),
                        )
                    ],
                  )),
                  if (widget.isMyPage)
                    GestureDetector(
                      onTap: () {
                        Global().eventBus!.fire('update');
                        // ignore: prefer_typing_uninitialized_variables
                        var obj;
                        for (int i = 0; i < widget.socials.length; i++) {
                          if (widget.socials[i]['id'] == socialBean.socialId) {
                            obj = widget.socials[i];
                          }
                        }

                        obj ??= {
                          "id": "",
                          "name": socialBean.name,
                          "logo": "",
                          "types": ["LINK", "QR"],
                          "description_example": "",
                          "url_example": ""
                        };

                        Get.toNamed('/edit_link', parameters: {
                          'id': socialBean.id!,
                          'social': jsonEncode(obj),
                        });
                      },
                      child: Container(
                        padding: EdgeInsets.all(5.px*widget.scale),
                        child: SvgPicture.asset(
                          'assets/icons/edit_link.svg',
                          width: 16.px*widget.scale,
                          height: 16.px*widget.scale,
                          color: Util().stringToColor(socialObj['arrow_color']),
                        ),
                      ),
                    ),
                  SizedBox(
                    width: 9.px,
                  ),
                  if (socialBean.type == 'QR')
                    Container(
                      color: Colors.transparent,
                      child: GestureDetector(
                        child: SvgPicture.asset(
                          'assets/icons/qrcode.svg',
                          width: 16.px*widget.scale,
                          height: 16.px*widget.scale,
                          color: qrColor,
                        ),
                      ),
                    ),
                  Container(
                      color: Colors.transparent,
                      child: SvgPicture.asset(
                        'assets/icons/arrow_right.svg',
                        width: 16.px*widget.scale,
                        height: 16.px*widget.scale,
                        color: Util().stringToColor(socialObj['arrow_color']),
                      ))
                ],
              ),
            ),
          ));
    });
  }

  Future updateSocialsOrder() async {
    List ids = [];
    for (int i = 0; i < widget.userBean.socials!.length; i++) {
      SocialBean bean = widget.userBean.socials![i];
      ids.add(bean.id!);
    }
    await HttpUtils.put(Api.userSocials, data: {'ids': ids});
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);

    if (widget.canDrag) {
      return ReorderableListView(
        // buildDefaultDragHandles: false,
        physics: const NeverScrollableScrollPhysics(),
        children: socialListWidget(),
        onReorderStart: (index) {
          print('aaaa');
        },
        onReorderEnd: (index) {
          Global().eventBus!.fire('update');
        },
        
        onReorder: (int oldIndex, int newIndex) {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          var child = widget.userBean.socials!.removeAt(oldIndex);
          widget.userBean.socials!.insert(newIndex, child);
          setState(() {});
          updateSocialsOrder();
        },
      );
    }

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