Flutter JSON转表单带主题插件json_to_form_with_theme的使用

Flutter JSON转表单带主题插件json_to_form_with_theme的使用

本库旨在帮助开发者快速创建基于JSON的表单。

功能

  • JsonForm 可以根据用户交互更新，也可以从外部通知更新（参见示例中的流）。你还可以获取回传的JSON数据。

使用方法

你可以声明一个JSON对象，如下所示：

final Map<String, dynamic> json = {
  "widgets": [
    {
      "id": "1",
      "name": "Toggle",
      "type": "toggle",
      "values": ["On", "Off"],
      "default_value": "0",
      "chosen_value": 1
    },
    {
      "id": "2",
      "name": "Static text",
      "type": "static_text",
      "chosen_value": "value",
      "description": "(description..)",
    },
    {
      "id": "3",
      "name": "Edit text",
      "type": "edit_text",
      "chosen_value": "edit value",
      "description": "(edit description..)",
    },
    {"type": "header", "name": "Header", "id": "99"},
    {
      "id": "4",
      "name": "Drop down",
      "type": "drop_down",
      "values": ["Low-Intermediate", "Medium", "High"],
      "chosen_value": "Low-Intermediate"
    }
  ]
};

然后可以轻松使用基本主题（或对其进行编辑）：

[@override](/user/override)
Widget build(BuildContext context) {
  return Sizer(
    builder: (BuildContext context, Orientation orientation, DeviceType deviceType) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Floating Action Button'),
        ),
        body: RefreshIndicator(
          onRefresh: _refresh,
          child: JsonFormWithThemeBuilder(jsonWidgets: json)
              .setDateBuilderMethod(dateBuilder)
              .registerComponent(DropDownParser2Creator())
              .setStreamUpdates(onValueChangeStream)
              .setOnValueChanged((String d, dynamic s) async {
            print("Update id $d to value $s");
            await Future.delayed(const Duration(seconds: 1));
            return Future.value(true);
          })
              .setTheme(const DefaultTheme()).build(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counter++;
            if (counter % 4 == 1) {
              toggle++;
              _onUserController.add({}..["1"] = toggleList[toggle % 2]); // toggle
            }
            if (counter % 4 == 2) {
              _onUserController.add({}..["2"] = "updated" + Random().nextInt(10).toString()); // toggle
            }
            if (counter % 4 == 3) {
              _onUserController.add({}..["3"] = "Val" + Random().nextInt(100000).toString()); // toggle
            }
            if (counter % 4 == 0) {
              _onUserController.add({}..["4"] = list[toggle % 2]); // toggle
            }
          },
          child: const Icon(Icons.navigation),
          backgroundColor: Colors.green,
        ),
      );
    },
  );
}

更多关于Flutter JSON转表单带主题插件json_to_form_with_theme的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JSON转表单带主题插件json_to_form_with_theme的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


json_to_form_with_theme 是一个 Flutter 插件，它允许你通过 JSON 数据动态生成表单，并且支持自定义主题。这个插件非常适合在需要动态生成表单的场景中使用，例如根据后端返回的 JSON 数据生成不同的表单。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 json_to_form_with_theme 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  json_to_form_with_theme: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用插件

1. 导入插件

import 'package:json_to_form_with_theme/json_to_form_with_theme.dart';

2. 定义 JSON 数据

你需要定义一个 JSON 数据来描述表单的结构。例如：

final jsonForm = '''
{
  "fields": [
    {
      "type": "text",
      "label": "Username",
      "name": "username",
      "placeholder": "Enter your username"
    },
    {
      "type": "password",
      "label": "Password",
      "name": "password",
      "placeholder": "Enter your password"
    },
    {
      "type": "email",
      "label": "Email",
      "name": "email",
      "placeholder": "Enter your email"
    },
    {
      "type": "checkbox",
      "label": "Agree to terms",
      "name": "terms",
      "value": false
    },
    {
      "type": "dropdown",
      "label": "Country",
      "name": "country",
      "options": [
        {"label": "USA", "value": "us"},
        {"label": "Canada", "value": "ca"},
        {"label": "Mexico", "value": "mx"}
      ]
    }
  ]
}
''';

3. 使用 JsonToForm 组件

你可以使用 JsonToForm 组件来渲染表单：

class MyFormPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Form'),
      ),
      body: JsonToForm(
        form: jsonForm,
        onChanged: (dynamic response) {
          print("Form changed: $response");
        },
        actionSave: (dynamic response) {
          print("Form submitted: $response");
        },
        buttonSave: Container(
          height: 40.0,
          color: Colors.blueAccent,
          child: Center(
            child: Text("Save", style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }
}

4. 自定义主题

你可以在 JsonToForm 组件中传递一个 theme 参数来自定义表单的主题：

class MyFormPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Form'),
      ),
      body: JsonToForm(
        form: jsonForm,
        onChanged: (dynamic response) {
          print("Form changed: $response");
        },
        actionSave: (dynamic response) {
          print("Form submitted: $response");
        },
        buttonSave: Container(
          height: 40.0,
          color: Colors.blueAccent,
          child: Center(
            child: Text("Save", style: TextStyle(color: Colors.white)),
          ),
        ),
        theme: FormTheme(
          labelStyle: TextStyle(color: Colors.blue, fontSize: 16),
          inputDecorationTheme: InputDecorationTheme(
            border: OutlineInputBorder(),
            filled: true,
            fillColor: Colors.grey[200],
          ),
        ),
      ),
    );
  }
}
回到顶部