Flutter插件xsdui的介绍与使用方法

Flutter插件xsdui概述

本文将展示如何在Flutter中使用插件xsdui。尽管插件的详细介绍尚未明确，但通过以下示例代码，您可以了解其基本用法。插件xsdui允许开发者通过JSON格式动态构建UI组件。

示例代码

以下是一个完整的示例代码，展示了如何使用xsdui插件动态生成UI界面。

示例代码

import 'package:flutter/material.dart';
import 'package:xsdui/xsdui.dart'; // 导入xsdui插件

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 定义一个包含JSON结构的变量
  Map<String, dynamic> jsonWidget = {
    "type": "wrap", // 使用Wrap布局
    "spacing": 10.0,
    "runSpacing": 10.0,
    "children": [
      {
        "type": "GestureDetector", // 手势检测器
        "index": 0,
        "onPressed": {
          "type": "customFunctionWithParameters",
          "functionName": "ontap",
          "parameter": 0,
        },
        "child": {
          "type": "container", // 容器
          "padding": {
            "paddingType": "symmetric",
            "vertical": 7.0,
            "horizontal": 18.0,
          },
          "borderRadius": {
            "borderRadiusType": "circular",
            "radius": 8.0,
          },
          "border": {
            "color": "DCDDE1",
          },
          "child": {
            "type": "image", // 图片
            "imageType": "network",
            "width": 125.0,
            "height": 35.0,
            "link":
                "https://d19izmiuoyzsz.cloudfront.net/certificate/TsJgla0AWmYsKpxBVIDohLwIsZzks1ECUYuI9rGt.png",
          }
        },
      },
      {
        "type": "GestureDetector", // 第二个手势检测器
        "index": 1,
        "onPressed": {
          "type": "customFunctionWithParameters",
          "functionName": "ontap",
          "parameter": 1,
        },
        "child": {
          "type": "container", // 容器
          "padding": {
            "paddingType": "symmetric",
            "vertical": 7.0,
            "horizontal": 18.0,
          },
          "borderRadius": {
            "borderRadiusType": "circular",
            "radius": 8.0,
          },
          "border": {
            "color": "DCDDE1",
          },
          "child": {
            "type": "image", // 图片
            "imageType": "network",
            "width": 125.0,
            "height": 35.0,
            "link":
                "https://d19izmiuoyzsz.cloudfront.net/certificate/q9jM8dLivyuNdAUbcBwQITGPnUV4ZYYv5788k4GS.png",
          }
        },
      }
    ]
  };

  final List<String> syaratMendaftar = [
    'WNI berusia 18 tahun keatas.',
    'Tidak sedang menempuh pendidikan formal.',
    'Sedang mencari kerja, pekerja/buruh yang terkena PHK, atau pekerja/buruh yang membutuhkan peningkatan kompetensi kerja, seperti pekerja/buruh yang dirumahkan dan pekerja bukan penerima upah, termasuk pelaku usaha mikro & kecil.',
    'Bukan penerima bantuan sosial lainnya selama pandemi COVID-19.',
    'Bukan Pejabat Negara, Pimpinan dan Anggota DPRD, ASN, Prajurit TNI, Anggota Polri, Kepala Desa dan perangkat desa dan Direksi/Komisaris/Dewan Pengawas pada BUMN atau BUMD.',
    'Maksimal 2 NIK dalam 1 KK yang menjadi Penerima Kartu Prakerja.',
  ];

  int index = 0;
  List<int> listIndex = [];
  Map<String, Function> functionMap = {};
  Map<String, Function(dynamic)> functionMapWithParameter = {};
  Map<String, int> indexJson = {};

  // 添加函数到插件
  void addFunction(Map<String, Function> newFunction) {
    functionMap.addEntries(newFunction.entries);
    XSdui.setFunctionMap(functionMap);
  }

  // 添加带参数的函数到插件
  void addFunctionParameter(Map<String, Function(dynamic)> newFunction) {
    functionMapWithParameter.addEntries(newFunction.entries);
    XSdui.setFunctionMapWithParameter(functionMapWithParameter);
  }

  // 改变索引并更新颜色
  void changeIndex() {
    setState(() {
      index++;
      jsonWidget["children"][0]["child"]["border"]["color"] = "#6e4e8e";
    });
  }

  // 从JSON中添加值
  void addedValueFromJson(int value) {
    setState(() {
      listIndex.add(value);
    });
  }

  [@override](/user/override)
  void initState() {
    // 初始化函数映射
    addFunctionParameter({
      'ontap': (data) {
        final List<Map<String, dynamic>> list =
            jsonWidget["children"] ?? [];
        setState(() {
          index = data as int;
          list[list.indexWhere((e) => e["onPressed"]["parameter"] == index)]
              ["child"]["border"]["color"] = "#6e4e8e";
          list[list.indexWhere((e) => e["onPressed"]["parameter"] != index)]
              ["child"]["border"]["color"] = "#DCDDE1";
        });
      }
    });

    // 初始化列表索引
    final leng = jsonWidget["children"]?.length ?? 0;
    for (int i = 0; i < leng; i++) {
      listIndex.add(i);
    }

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: XSdui.fromJson(
          context,
          json: jsonWidget,
        ),
      ),
    );
  }
}