Responsive Layout

About 329 wordsAbout 1 min

2025-07-17

Introduction

Responsive layout container based on the CSS Flexbox model. Supports:

Auto wrap: wraps content on overflow while keeping alignment
Gap control: manage spacing between elements via gap
Alignment strategies: 12 combinations of main/cross-axis alignment
Flexible distribution: children fill available space proportionally

Suitable for UIs that adapt to different screen sizes, such as mobile lists and dashboard control groups.

Usage Example

tpFlexLayout *flexLayout = new TpFlexLayout();

/// @brief Set layout direction
flexLayout->setFlexDirection(TpFlexLayout::Row);
// flexLayout->setFlexDirection(TpFlexLayout::RowReverse);
// flexLayout->setFlexDirection(TpFlexLayout::Column);
// flexLayout->setFlexDirection(TpFlexLayout::ColumnReverse);

/// @brief Set main-axis alignment
// flexLayout->setJustifyContent(TpFlexLayout::MainFlexStart);   // Default: align from start of main axis
// flexLayout->setJustifyContent(TpFlexLayout::MainFlexEnd);     // Align from end of main axis
// flexLayout->setJustifyContent(TpFlexLayout::MainCenter);      // Center
flexLayout->setJustifyContent(TpFlexLayout::MainSpaceBetween); // Space-between; edges stick
// flexLayout->setJustifyContent(TpFlexLayout::MainSpaceEvenly); // Space evenly; equal gaps
// flexLayout->setJustifyContent(TpFlexLayout::MainSpaceAround); // Space around; side gaps half of middle

/// @brief Set cross-axis alignment
// flexLayout->setAlignItems(TpFlexLayout::CrossFlexStart); // Top
flexLayout->setAlignItems(TpFlexLayout::CrossFlexEnd);   // Bottom
// flexLayout->setAlignItems(TpFlexLayout::CrossCenter);   // Center

/// @brief Set multi-line cross-axis alignment; overrides single-line cross-axis alignment
// flexLayout->setAlignContent(TpFlexLayout::Stretch);      // Default: stretch to fill, align to cross axis
// flexLayout->setAlignContent(TpFlexLayout::FlexStart);    // Top
flexLayout->setAlignContent(TpFlexLayout::FlexEnd);      // Bottom
// flexLayout->setAlignContent(TpFlexLayout::Center);       // Center
// flexLayout->setAlignContent(TpFlexLayout::SpaceBetween); // Space-between; top/bottom stick to edges
// flexLayout->setAlignContent(TpFlexLayout::SpaceEvenly);  // Space evenly; top/middle/bottom equal
// flexLayout->setAlignContent(TpFlexLayout::SpaceAround);  // Space around; top/bottom half of middle

for (int i = 0; i < 8; ++i)
{
    TpButton *testButton = new TpButton("Test Button" + TpString::number(i));
    testButton->setSize(150, 60);
    flexLayout->addWidget(testButton);
}