mirror of
https://github.com/divkit/divkit.git
synced 2026-05-07 20:02:32 +00:00
Prepare Flutter samples
d906eb96d8dd4664e4e79148c7a6cfd1af9fc1eb
This commit is contained in:
man-y
@@ -0,0 +1,138 @@
|
||||
{
|
||||
"templates": {
|
||||
"circle_button": {
|
||||
"type": "text",
|
||||
"font_size": 40,
|
||||
"text_color": "#fff",
|
||||
"text_alignment_horizontal": "center",
|
||||
"text_alignment_vertical": "center",
|
||||
"border": {
|
||||
"corner_radius": 50
|
||||
},
|
||||
"width": {
|
||||
"type": "fixed",
|
||||
"value": 100
|
||||
},
|
||||
"height": {
|
||||
"type": "fixed",
|
||||
"value": 100
|
||||
},
|
||||
"background": [
|
||||
{
|
||||
"type": "solid",
|
||||
"$color": "bg_color"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"log_id": "main_screen",
|
||||
"variables": [
|
||||
{
|
||||
"type": "integer",
|
||||
"name": "count",
|
||||
"value": 0
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "alpha",
|
||||
"value": 0.5
|
||||
}
|
||||
],
|
||||
"states": [
|
||||
{
|
||||
"state_id": 0,
|
||||
"div": {
|
||||
"type": "container",
|
||||
"width": {
|
||||
"type": "match_parent"
|
||||
},
|
||||
"height": {
|
||||
"type": "match_parent"
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"type": "container",
|
||||
"width": {
|
||||
"type": "match_parent"
|
||||
},
|
||||
"height": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"type": "text",
|
||||
"font_size": 100,
|
||||
"alpha": "@{min(1.0, max(alpha, 0.0))}",
|
||||
"width": {
|
||||
"type": "wrap_content",
|
||||
"constrained": true
|
||||
},
|
||||
"text_alignment_horizontal": "center",
|
||||
"alignment_horizontal": "center",
|
||||
"alignment_vertical": "center",
|
||||
"text": "@{count}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "container",
|
||||
"width": {
|
||||
"type": "match_parent"
|
||||
},
|
||||
"height": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"alignment_horizontal": "left",
|
||||
"alignment_vertical": "bottom",
|
||||
"items": [
|
||||
{
|
||||
"type": "circle_button",
|
||||
"text": "−",
|
||||
"bg_color": "#8c0000",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "action_id",
|
||||
"url": "div-action://set_variable?name=count&value=@{count - 1}"
|
||||
},
|
||||
{
|
||||
"log_id": "action_id",
|
||||
"url": "div-action://set_variable?name=alpha&value=@{alpha - 0.1}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "container",
|
||||
"width": {
|
||||
"type": "fixed",
|
||||
"value": 32
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "circle_button",
|
||||
"text": "+",
|
||||
"bg_color": "#038c00",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "action_id",
|
||||
"url": "div-action://set_variable?name=count&value=@{count + 1}"
|
||||
},
|
||||
{
|
||||
"log_id": "action_id",
|
||||
"url": "div-action://set_variable?name=alpha&value=@{alpha + 0.1}"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"orientation": "horizontal",
|
||||
"content_alignment_horizontal": "center",
|
||||
"content_alignment_vertical": "center"
|
||||
}
|
||||
],
|
||||
"content_alignment_horizontal": "center",
|
||||
"content_alignment_vertical": "center"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
{
|
||||
"templates": {
|
||||
"title": {
|
||||
"type": "text",
|
||||
"font_size": 20,
|
||||
"line_height": 24,
|
||||
"font_weight": "bold",
|
||||
"paddings": {
|
||||
"left": 24,
|
||||
"right": 24,
|
||||
"bottom": 16
|
||||
}
|
||||
},
|
||||
"subtitle": {
|
||||
"font_size": 15,
|
||||
"line_height": 20,
|
||||
"type": "text",
|
||||
"paddings": {
|
||||
"left": 24,
|
||||
"right": 24,
|
||||
"bottom": 16
|
||||
}
|
||||
},
|
||||
"logo": {
|
||||
"type": "image",
|
||||
"alignment_horizontal": "center",
|
||||
"width": {
|
||||
"type": "fixed",
|
||||
"value": 172
|
||||
},
|
||||
"height": {
|
||||
"type": "fixed",
|
||||
"value": 44
|
||||
},
|
||||
"placeholder_color": "#00000000"
|
||||
},
|
||||
"description": {
|
||||
"type": "text",
|
||||
"font_size": 20,
|
||||
"line_height": 24,
|
||||
"text_alignment_vertical": "center",
|
||||
"text_alignment_horizontal": "center",
|
||||
"text_color": "#000000",
|
||||
"margins": {
|
||||
"top": 24,
|
||||
"left": 8,
|
||||
"right": 8
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"type": "text",
|
||||
"paddings": {
|
||||
"left": 16,
|
||||
"top": 16,
|
||||
"right": 16,
|
||||
"bottom": 16
|
||||
},
|
||||
"margins": {
|
||||
"left": 24,
|
||||
"right": 24
|
||||
},
|
||||
"border": {
|
||||
"corner_radius": 8
|
||||
},
|
||||
"background": [
|
||||
{
|
||||
"type": "solid",
|
||||
"color": "#0E000000"
|
||||
}
|
||||
],
|
||||
"font_size": 14,
|
||||
"font_weight": "medium",
|
||||
"text_alignment_vertical": "center",
|
||||
"text_alignment_horizontal": "center",
|
||||
"text_color": "#000000"
|
||||
},
|
||||
"block": {
|
||||
"type": "container",
|
||||
"content_alignment_vertical": "center",
|
||||
"height": {
|
||||
"type": "fixed",
|
||||
"value": 240
|
||||
},
|
||||
"margins": {
|
||||
"left": 24,
|
||||
"right": 24,
|
||||
"bottom": 8
|
||||
},
|
||||
"border": {
|
||||
"corner_radius": 16
|
||||
},
|
||||
"background": [
|
||||
{
|
||||
"type": "solid",
|
||||
"color": "#0E000000"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"variables": [
|
||||
{
|
||||
"name": "change_state",
|
||||
"type": "string",
|
||||
"value": "none"
|
||||
},
|
||||
{
|
||||
"name": "block_state",
|
||||
"type": "string",
|
||||
"value": "divkit"
|
||||
}
|
||||
],
|
||||
"variable_triggers": [
|
||||
{
|
||||
"condition": "@{change_state == 'block' && block_state == 'divkit'}",
|
||||
"mode": "on_variable",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "update change_state",
|
||||
"url": "div-action://set_variable?name=change_state&value=none"
|
||||
},
|
||||
{
|
||||
"log_id": "update block_state",
|
||||
"url": "div-action://set_variable?name=block_state&value=flutter"
|
||||
},
|
||||
{
|
||||
"log_id": "update state",
|
||||
"url": "div-action://set_state?state_id=0/sample/flutter"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"condition": "@{change_state == 'block' && block_state == 'flutter'}",
|
||||
"mode": "on_variable",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "update change_state",
|
||||
"url": "div-action://set_variable?name=change_state&value=none"
|
||||
},
|
||||
{
|
||||
"log_id": "update block_state",
|
||||
"url": "div-action://set_variable?name=block_state&value=divkit"
|
||||
},
|
||||
{
|
||||
"log_id": "update state",
|
||||
"url": "div-action://set_state?state_id=0/sample/divkit"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"log_id": "sample_card",
|
||||
"states": [
|
||||
{
|
||||
"state_id": 0,
|
||||
"div": {
|
||||
"type": "container",
|
||||
"orientation": "vertical",
|
||||
"margins": {
|
||||
"top": 24,
|
||||
"bottom": 24
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"type": "title",
|
||||
"text": "State and Triggers"
|
||||
},
|
||||
{
|
||||
"type": "subtitle",
|
||||
"text": "Here description!"
|
||||
},
|
||||
{
|
||||
"type": "state",
|
||||
"div_id": "sample",
|
||||
"states": [
|
||||
{
|
||||
"state_id": "divkit",
|
||||
"div": {
|
||||
"type": "block",
|
||||
"background": [
|
||||
{
|
||||
"type": "solid",
|
||||
"color": "#3Eff7b00"
|
||||
}
|
||||
],
|
||||
"items": [
|
||||
{
|
||||
"type": "logo",
|
||||
"image_url": "https://raw.githubusercontent.com/divkit/divkit/f69a934fffb17abe2b7d4113860a777586586839/client/android/divkit-demo-app/src/main/assets/application/images/DivKit.png"
|
||||
},
|
||||
{
|
||||
"type": "description",
|
||||
"text": "Modern SDUI layout technology"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"state_id": "flutter",
|
||||
"div": {
|
||||
"type": "block",
|
||||
"background": [
|
||||
{
|
||||
"type": "solid",
|
||||
"color": "#0E0000ff"
|
||||
}
|
||||
],
|
||||
"items": [
|
||||
{
|
||||
"type": "logo",
|
||||
"image_url": "https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png"
|
||||
},
|
||||
{
|
||||
"type": "description",
|
||||
"text": "Now also on Flutter 😎"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"alignment_horizontal": "center",
|
||||
"text": "Change state",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "set_state",
|
||||
"url": "div-action://set_variable?name=change_state&value=block"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
{
|
||||
"templates": {
|
||||
"field": {
|
||||
"type": "container",
|
||||
"orientation": "horizontal",
|
||||
"width": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"height": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"paddings": {
|
||||
"left": 8,
|
||||
"top": 8,
|
||||
"right": 8,
|
||||
"bottom": 8
|
||||
},
|
||||
"content_alignment_horizontal": "center",
|
||||
"content_alignment_vertical": "center",
|
||||
"items": [
|
||||
{
|
||||
"type": "text",
|
||||
"$text": "title",
|
||||
"width": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"height": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"text_alignment_vertical": "center",
|
||||
"text_alignment_horizontal": "center",
|
||||
"font_size": 24,
|
||||
"ranges": [
|
||||
{
|
||||
"start": 0,
|
||||
"$end": "title_end",
|
||||
"font_weight": "bold"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"button": {
|
||||
"type": "text",
|
||||
"width": {
|
||||
"type": "fixed",
|
||||
"value": 150
|
||||
},
|
||||
"height": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"paddings": {
|
||||
"left": 16,
|
||||
"top": 16,
|
||||
"right": 16,
|
||||
"bottom": 16
|
||||
},
|
||||
"margins": {
|
||||
"left": 8,
|
||||
"top": 8,
|
||||
"right": 8,
|
||||
"bottom": 8
|
||||
},
|
||||
"border": {
|
||||
"corner_radius": 8
|
||||
},
|
||||
"background": [
|
||||
{
|
||||
"type": "solid",
|
||||
"color": "#0E000000"
|
||||
}
|
||||
],
|
||||
"font_size": 16,
|
||||
"font_weight": "medium",
|
||||
"text_alignment_vertical": "center",
|
||||
"text_alignment_horizontal": "center",
|
||||
"text_color": "#000000",
|
||||
"alignment_horizontal": "center",
|
||||
"alignment_vertical": "center"
|
||||
},
|
||||
"controller_button": {
|
||||
"type": "text",
|
||||
"width": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"height": {
|
||||
"type": "wrap_content"
|
||||
},
|
||||
"border": {
|
||||
"corner_radius": 8
|
||||
},
|
||||
"paddings": {
|
||||
"left": 8,
|
||||
"top": 8,
|
||||
"right": 8,
|
||||
"bottom": 8
|
||||
},
|
||||
"margins": {
|
||||
"left": 4,
|
||||
"top": 4,
|
||||
"right": 4,
|
||||
"bottom": 4
|
||||
},
|
||||
"background": [
|
||||
{
|
||||
"type": "solid",
|
||||
"color": "#0E000000"
|
||||
}
|
||||
],
|
||||
"font_size": 12,
|
||||
"font_weight": "medium",
|
||||
"text_alignment_vertical": "center",
|
||||
"text_alignment_horizontal": "center",
|
||||
"text_color": "#000000",
|
||||
"alignment_horizontal": "center",
|
||||
"alignment_vertical": "center"
|
||||
},
|
||||
"value_controller": {
|
||||
"type": "container",
|
||||
"orientation": "horizontal",
|
||||
"content_alignment_horizontal": "center",
|
||||
"content_alignment_vertical": "center",
|
||||
"items": [
|
||||
{
|
||||
"type": "controller_button",
|
||||
"text": "<<<",
|
||||
"action": {
|
||||
"log_id": "major_decrement",
|
||||
"$url": "major_decrement_url"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "controller_button",
|
||||
"text": "<<",
|
||||
"action": {
|
||||
"log_id": "moderate_decrement",
|
||||
"$url": "moderate_decrement_url"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "controller_button",
|
||||
"text": "<",
|
||||
"action": {
|
||||
"log_id": "minor_decrement",
|
||||
"$url": "minor_decrement_url"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"$text": "variable",
|
||||
"margins": {
|
||||
"left": 8,
|
||||
"top": 8,
|
||||
"right": 8,
|
||||
"bottom": 8
|
||||
},
|
||||
"font_size": 16,
|
||||
"font_weight": "medium",
|
||||
"width": {
|
||||
"type": "wrap_content"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "controller_button",
|
||||
"text": ">",
|
||||
"action": {
|
||||
"log_id": "minor_increment",
|
||||
"$url": "minor_increment_url"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "controller_button",
|
||||
"text": ">>",
|
||||
"action": {
|
||||
"log_id": "moderate_increment",
|
||||
"$url": "moderate_increment_url"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "controller_button",
|
||||
"text": ">>>",
|
||||
"action": {
|
||||
"log_id": "major_increment",
|
||||
"$url": "major_increment_url"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"log_id": "div2_sample_card",
|
||||
"variables": [
|
||||
{
|
||||
"name": "timer_value",
|
||||
"type": "integer",
|
||||
"value": 0
|
||||
},
|
||||
{
|
||||
"name": "timer_state",
|
||||
"type": "string",
|
||||
"value": "initial"
|
||||
},
|
||||
{
|
||||
"name": "tick_count_value",
|
||||
"type": "integer",
|
||||
"value": 0
|
||||
},
|
||||
{
|
||||
"name": "timer_duration",
|
||||
"type": "integer",
|
||||
"value": 5000
|
||||
},
|
||||
{
|
||||
"name": "timer_interval",
|
||||
"type": "integer",
|
||||
"value": 1000
|
||||
}
|
||||
],
|
||||
"timers": [
|
||||
{
|
||||
"id": "ticker",
|
||||
"duration": "@{timer_duration}",
|
||||
"tick_interval": "@{timer_interval}",
|
||||
"value_variable": "timer_value",
|
||||
"tick_actions": [
|
||||
{
|
||||
"log_id": "tick",
|
||||
"url": "div-action://set_variable?name=timer_state&value=ticking"
|
||||
},
|
||||
{
|
||||
"log_id": "tick",
|
||||
"url": "div-action://set_variable?name=tick_count_value&value=@{tick_count_value+1}"
|
||||
}
|
||||
],
|
||||
"end_actions": [
|
||||
{
|
||||
"log_id": "end",
|
||||
"url": "div-action://set_variable?name=timer_state&value=ended"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"states": [
|
||||
{
|
||||
"state_id": 0,
|
||||
"div": {
|
||||
"type": "container",
|
||||
"orientation": "vertical",
|
||||
"content_alignment_horizontal": "center",
|
||||
"content_alignment_vertical": "center",
|
||||
"width": {
|
||||
"type": "match_parent"
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"type": "field",
|
||||
"title": "Value: @{timer_value}",
|
||||
"title_end": 6
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"title": "Tick count: @{tick_count_value}",
|
||||
"title_end": 11
|
||||
},
|
||||
{
|
||||
"type": "grid",
|
||||
"orientation": "horizontal",
|
||||
"width": {
|
||||
"type": "match_parent"
|
||||
},
|
||||
"column_count": 2,
|
||||
"content_alignment_horizontal": "center",
|
||||
"items": [
|
||||
{
|
||||
"type": "button",
|
||||
"text": "Start",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "Start timer",
|
||||
"url": "div-action://timer?id=ticker&action=start"
|
||||
},
|
||||
{
|
||||
"log_id": "tick",
|
||||
"url": "div-action://set_variable?name=tick_count_value&value=0"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"text": "Pause",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "Pause timer",
|
||||
"url": "div-action://timer?id=ticker&action=pause"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"text": "Resume",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "Resume timer",
|
||||
"url": "div-action://timer?id=ticker&action=resume"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"text": "Stop",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "Stop timer",
|
||||
"url": "div-action://timer?id=ticker&action=stop"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"text": "Cancel",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "Stop timer",
|
||||
"url": "div-action://timer?id=ticker&action=cancel"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"text": "Reset",
|
||||
"actions": [
|
||||
{
|
||||
"log_id": "Stop timer",
|
||||
"url": "div-action://timer?id=ticker&action=reset"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "value_controller",
|
||||
"variable": "@{timer_duration}",
|
||||
"major_decrement_url": "div-action://set_variable?name=timer_duration&value=@{timer_duration - 5000}",
|
||||
"moderate_decrement_url": "div-action://set_variable?name=timer_duration&value=@{timer_duration - 1000}",
|
||||
"minor_decrement_url": "div-action://set_variable?name=timer_duration&value=@{timer_duration - 100}",
|
||||
"minor_increment_url": "div-action://set_variable?name=timer_duration&value=@{timer_duration + 100}",
|
||||
"moderate_increment_url": "div-action://set_variable?name=timer_duration&value=@{timer_duration + 1000}",
|
||||
"major_increment_url": "div-action://set_variable?name=timer_duration&value=@{timer_duration + 5000}"
|
||||
},
|
||||
{
|
||||
"type": "value_controller",
|
||||
"variable": "@{timer_interval}",
|
||||
"major_decrement_url": "div-action://set_variable?name=timer_interval&value=@{timer_interval - 1000}",
|
||||
"moderate_decrement_url": "div-action://set_variable?name=timer_interval&value=@{timer_interval - 250}",
|
||||
"minor_decrement_url": "div-action://set_variable?name=timer_interval&value=@{timer_interval - 50}",
|
||||
"minor_increment_url": "div-action://set_variable?name=timer_interval&value=@{timer_interval + 50}",
|
||||
"moderate_increment_url": "div-action://set_variable?name=timer_interval&value=@{timer_interval + 250}",
|
||||
"major_increment_url": "div-action://set_variable?name=timer_interval&value=@{timer_interval + 1000}"
|
||||
}
|
||||
],
|
||||
"margins": {
|
||||
"top": 8,
|
||||
"bottom": 8,
|
||||
"left": 8,
|
||||
"right": 8
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user