响应式布局 TpFlexLayout

2025-07-17

介绍

响应式布局是一个参考CSS Flexbox模型实现的动态布局容器，支持：

自动换行：内容溢出时自动折行并保持对齐
间距控制：通过gap属性统一管理元素间隔
对齐策略：内置12种主轴/交叉轴对齐组合
弹性分配：子元素按比例自动填充可用空间

适用于需要动态适应不同屏幕尺寸的界面布局场景，如移动端列表、仪表盘控件组等。

使用示例

tpFlexLayout *flexLayout = new TpFlexLayout();

/// @brief 设置布局方向
flexLayout->setFlexDirection(tpFlexLayout::Row);
// flexLayout->setFlexDirection(tpFlexLayout::RowReverse);
// flexLayout->setFlexDirection(tpFlexLayout::Column);
// flexLayout->setFlexDirection(tpFlexLayout::ColumnReverse);

/// @brief 设置主轴对齐方式
// flexLayout->setJustifyContent(tpFlexLayout::MainFlexStart);   // 默认, 从主轴 开始位置 开始
// flexLayout->setJustifyContent(tpFlexLayout::MainFlexEnd);      // 从主轴 结束位置 开始
// flexLayout->setJustifyContent(tpFlexLayout::MainCenter);       // 居中对齐
flexLayout->setJustifyContent(tpFlexLayout::MainSpaceBetween); // 两端对齐,两边贴着
// flexLayout->setJustifyContent(tpFlexLayout::MainSpaceEvenly);  // 分散对齐,间距相同
// flexLayout->setJustifyContent(tpFlexLayout::MainSpaceAround);   // 分散对齐,两边是中间的一半

/// @brief 设置交叉轴对齐方式
// flexLayout->setAlignItems(tpFlexLayout::CrossFlexStart); // 顶部对齐
flexLayout->setAlignItems(tpFlexLayout::CrossFlexEnd);   // 底部对齐
// flexLayout->setAlignItems(tpFlexLayout::CrossCenter);     // 居中对齐

/// @brief 设置多行交叉轴对齐方式，注意设置后会覆盖交叉轴对齐样式
// flexLayout->setAlignContent(tpFlexLayout::Stretch);      // 默认,拉伸，与交叉轴对齐
// flexLayout->setAlignContent(tpFlexLayout::FlexStart);    // 顶部对齐
flexLayout->setAlignContent(tpFlexLayout::FlexEnd);      // 底部对齐
// flexLayout->setAlignContent(tpFlexLayout::Center);       // 居中对齐
// flexLayout->setAlignContent(tpFlexLayout::SpaceBetween); // 分散对齐,上下贴着
// flexLayout->setAlignContent(tpFlexLayout::SpaceEvenly);  //  分散对齐,上中下平均
// flexLayout->setAlignContent(tpFlexLayout::SpaceAround);   // 分散对齐,上下是中一半

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

响应式布局 TpFlexLayout

介绍

使用示例

效果演示