Flutter动态JSON构建组件时，Visibility组件等价实现方案咨询

针对json_dynamic_widget包，有两种主流方式实现类似Flutter原生Visibility组件的可见性控制功能：

方案一：利用内置条件渲染语法 #

无需自定义组件，直接使用包原生支持的if/then/else条件逻辑，通过动态变量控制组件是否渲染。

JSON配置示例 #

{
  "type": "column",
  "children": [
    // 仅在条件为true时渲染目标组件
    {
      "if": "\$showContent",
      "then": {
        "type": "card",
        "child": {
          "type": "text",
          "data": "仅当showContent为true时显示此卡片"
        }
      }
    },
    // 带替代组件的场景
    {
      "if": "\$showButton",
      "then": {
        "type": "elevated_button",
        "child": {
          "type": "text",
          "data": "提交"
        },
        "onPressed": "\$handleSubmit"
      },
      "else": {
        "type": "text",
        "data": "提交按钮已隐藏"
      }
    }
  ]
}

说明 #

• if字段绑定布尔类型的动态变量（如\$showContent，变量需提前注入到组件的data上下文）
• 当if条件为true时渲染then节点下的组件，否则渲染else节点内容（若省略else，该位置不渲染任何组件）

方案二：自定义Visibility组件解析器 #

如果需要完全对齐原生Visibility的API（比如支持maintainState、maintainAnimation等参数），可以自定义Widget解析器。

步骤1：实现自定义解析器 #

class JsonVisibilityParser extends JsonWidgetParser {
  @override
  String get type => 'visibility';

  @override
  Widget parse({
    required BuildContext context,
    required JsonWidgetData data,
    required Map<String, dynamic> json,
    required Widget parent,
  }) {
    final visible = json['visible'] as bool? ?? true;
    final maintainState = json['maintainState'] as bool? ?? false;
    final maintainAnimation = json['maintainAnimation'] as bool? ?? false;
    
    final child = json['child'] != null
        ? JsonWidgetData.fromDynamic(json['child'], context: context)
            ?.build(context: context, parent: parent)
        : const SizedBox.shrink();
    final replacement = json['replacement'] != null
        ? JsonWidgetData.fromDynamic(json['replacement'], context: context)
            ?.build(context: context, parent: parent)
        : const SizedBox.shrink();

    return Visibility(
      visible: visible,
      maintainState: maintainState,
      maintainAnimation: maintainAnimation,
      child: child,
      replacement: replacement,
    );
  }
}

步骤2：注册解析器 #

在应用初始化时注册自定义解析器：

void main() {
  JsonDynamicWidgetRegistry.instance
      .registerParser(JsonVisibilityParser());
  
  runApp(const MyApp());
}

步骤3：使用JSON配置 #

{
  "type": "visibility",
  "visible": "\$userIsLoggedIn",
  "maintainState": true,
  "child": {
    "type": "text",
    "data": "欢迎回来！"
  },
  "replacement": {
    "type": "text",
    "data": "请先登录"
  }
}

内容的提问来源于stack exchange，提问作者Janhvi Tiwari