Site-Tutorial

Layout-Folder

Un folder est un ViewContent dont type ∈ FolderBasic | NoHeight | Animated. Il ne peint pas ses enfants lui-même : pageFolder pose un moteur Flutter, folderChildren re-entre dans ViewPreView. Live : core/folder.dart.

Contrat enfants — table plate

folderView():
  uuid_page == parent.uuid_page
  uuid_folder == parent.uuid
  enable / desktop|mobile / theme / platform / locale / loc_text
  tri odr
  héritage link / uuid_link si vides

Chaque enfant = onion complète, maxWidth/Height = constraints parent. Jamais un tableau children dans le JSON.

Choisir le moteur

FolderBasic : sizeFolderDeco = Container(width/height flexible + customDecoration). Donc uuid_theme / uuid_gradient / uuid_shadow / border / radius sur le folder = chrome de la section. height: 0 = hug. width: 100% = pleine zone parent.

Wrap racine — JSON minimal

{
  "odr": 1,
  "uuid": "<W>",
  "uuid_page": "<P>",
  "uuid_folder": "",
  "layer": 1,
  "pop": 0,
  "type": "bca54f56-4e50-11ee-be56-0242ac120002",
  "type_m": "",
  "width": { "l": { "i": 100, "iT": "%" } },
  "height": { "l": { "i": 0 } },
  "axis_align": { "l": { "i": 2 } },
  "cross_align": { "l": { "i": 2 } },
  "enable": 1,
  "desktop": 1,
  "mobile": 1
}

inStack: false sur wrap/row/column — pos enfants ignoré. type_m: id_page_column si mobile doit empiler au lieu de wrap.

Column 60/90

{
  "type": "aee08b10-4e50-11ee-be56-0242ac120002",
  "width": { "l": { "i": 60, "iT": "%" }, "s": { "i": 90, "iT": "%" } },
  "height": { "l": { "i": 0 } },
  "axis_size": { "l": { "i": 0 } },
  "axis_align": { "l": { "i": 0 } },
  "cross_align": { "l": { "i": 2 } }
}

axis_align: 0 = start (haut). Défaut code 2 = center : poser 0 pour un article. Espace entre enfants : pad top/bottom sur chaque enfant.

Row spaceBetween

"type": "b47d0b2f-47c7-47bf-9ab6-cdc8c9e5f373",
"axis_size": { "l": { "i": 1 } },
"axis_align": { "l": { "i": 3 } },
"cross_align": { "l": { "i": 2 } }

Stack — seul folder où pos enfant est honoré

"type": "c7596da6-4e50-11ee-be56-0242ac120002",
"width": { "l": { "i": 100, "iT": "%" } },
"height": { "l": { "i": 1.777, "iT": "ratio" } },
"direction_align": { "l": { "i": 5 } }

Enfant image fill : 4 côtés pos 0 (init et enable). Sans pos, l’enfant est posé par direction_align (défaut center). Enfant height 0 et pos top+bottom 0 : stretch vertical OK. Enfant height 0 sans pos : hug au centre, peut collapser.