Flex Layout and Dynamic UI Development in JD Financial Application

The article introduces the MCube dynamic UI framework, which first checks template cache, fetches the latest template if needed, converts the product into a view‑tree, resolves expressions and events, and finally renders the view.

Dynamic UI development uses a language similar to Vue (jue) and adopts standard CSS Flex layout for view arrangement. List‑type views are provided through tags such as <scroll>, <slider>, <recycle-list>, <waterfall>, etc., allowing developers to configure layout by setting tag attributes.

When adapting to HarmonyOS, inconsistencies were found between its Flex implementation and the W3C standard. To ensure consistent rendering, the team abandoned Harmony's layout and integrated Facebook's Yoga layout engine, which parses CSS settings and directly sets view positions and sizes.

The article then details the core concepts of Flex layout:

Container (container) : a view with Flex enabled.

Item (item) : a child view of the container.

Key axes: main axis (direction of item flow) and cross axis (perpendicular direction).

Common container properties are described with examples:

flex-direction – sets main‑axis direction. Example values: flex-direction: row | row-reverse | column | column-reverse; flex-wrap – controls wrapping when items exceed the main axis. Example values: flex-wrap: nowrap | wrap | wrap-reverse; flex-flow – shorthand for flex-direction and flex‑wrap: flex-flow: column nowrap; justify-content – aligns items along the main axis:

justify-content: flex-start | center | space-between | space-around | space-evenly | flex-end;

align-items – aligns items along the cross axis (default stretch): align-items: flex-start | center | flex-end | stretch; align-content – aligns multiple lines on the cross axis:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Item‑level properties include:

flex-grow – proportion of remaining space an item occupies.

<div style="flex-direction: row;height: 60px;width: 300px; background-color: blue;">
  <div style="width:100px;flex-grow:1; height: 40px;background-color: red;"></div>
  <div style="width:50px;flex-grow:2; height: 40px;background-color: green;"></div>
</div>

flex-shrink – factor by which an item shrinks when space is insufficient.

<div style="flex-direction: row;height: 60px;width: 300px;background-color: blue;">
  <div style="width:300px;flex-shrink:1; height:40px;background-color: red;"></div>
  <div style="width:300px;flex-shrink:2; height:40px;background-color: green;"></div>
</div>

flex-basis – initial main‑axis size before free space distribution.

<div style="flex-direction: row;height: 60px;width: 300px; background-color: blue;padding-top: 10px;">
  <div style="width:150px;flex-grow:1; height:40px;background-color: red;"></div>
  <div style="width:150px;flex-grow:1; flex-basis: 50px; height:40px;background-color: green;"></div>
</div>

flex – shorthand for flex‑grow, flex‑shrink, and flex‑basis: flex: none | [ 'flex-grow' 'flex-shrink' 'flex-basis' ] align-self – overrides container's align‑items for a single item: align-self: auto | flex-start | flex-end | center | stretch List‑type layouts are implemented with tags such as <scroll>, <slider>, <recycle-list>, <waterfall>, <lego-container>, and <feed-container>, while page management uses <page-container> and <tab-bar>.

Absolute positioning is achieved with standard CSS:

.item {
    position: absolute;
    right:10px;
    bottom:20px;
    width:50px;
    height:50px;
}

Visibility control methods include: v-if="true|false" – removes the element from the DOM. display: flex|none – hides element but keeps it in the DOM. v-show – compiled to display:flex|none. visibility: visible|hidden – hides visually while preserving layout. opacity: 0|1 – makes element transparent; still participates in layout and interaction (except on iOS when opacity ≤ 0.1). overflow: hidden|visible – defines clipping behavior for overflow content.

The article concludes with a set of common layout questions and answers, such as why items acquire width without explicit settings, how flex‑grow and flex‑shrink affect dimensions, and how to allocate proportional space using flex-basis:0 and flex-grow. It emphasizes understanding the hierarchy of constraints (max‑width/height, explicit sizes, flex properties) to resolve layout issues.

Finally, it notes that the dynamic UI framework spans multiple technologies (JavaScript, iOS, Android, HarmonyOS, Java, Vue, Node, Webpack) and invites readers to explore deeper implementations.