7垂直布局

最新推荐文章于 2024-09-13 21:00:00 发布
最新推荐文章于 2024-09-13 21:00:00 发布
阅读量346 收藏 2
点赞数
分类专栏： DUILIB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/man_of_silly/article/details/52464756
版权

1.简介

CVerticalLayoutUI，其所有的直接子控件都是从上到下，垂直分布的，故称为垂直布局。垂直布局继承于 CContainerUI，其中大部分方法 CContainerUI 已经实现。

CContainerUI为所有容器类的基础类，其实现了 IContainerUI 接口中的所有方法。如果想要实现新的布局类型，可以继承此方法，并重写其中的 SetPos() 函数。

本节将介绍 IContainerUI 接口函数在 CContainerUI 中的实现 和 CVerticalLayoutUI 中 SetPos() 的实现。

2. IContainerUI 接口

class IContainerUI
{
public:
    virtual CControlUI* GetItemAt(int iIndex) const = 0;
    virtual int GetItemIndex(CControlUI* pControl) const  = 0;
    virtual bool SetItemIndex(CControlUI* pControl, int iIndex)  = 0;
    virtual int GetCount() const = 0;
    virtual bool Add(CControlUI* pControl) = 0;
    virtual bool AddAt(CControlUI* pControl, int iIndex)  = 0;
    virtual bool Remove(CControlUI* pControl) = 0;
    virtual bool RemoveAt(int iIndex)  = 0;
    virtual void RemoveAll() = 0;
};

3. CContainerUI 对 IContainerUI 接口的实现

3.1 获取第i个子控件:GetItemAt()

CControlUI* CContainerUI::GetItemAt(int iIndex) const
{
    if( iIndex < 0 || iIndex >= m_items.GetSize() ) 
        return NULL;
    return static_cast<CControlUI*>(m_items[iIndex]);
}

3.2 获取子控件的序号:GetItemIndex()

int CContainerUI::GetItemIndex(CControlUI* pControl) const
{
    for( int it = 0; it < m_items.GetSize(); it++ ) 
    {
        if( static_cast<CControlUI*>(m_items[it]) == pControl ) 
        {
            return it;
        }
    }

    //不存在返回-1
    return -1;
}

3.3 为子控件设置序号:SetItemIndex()

bool CContainerUI::SetItemIndex(CControlUI* pControl, int iIndex)
{
    for( int it = 0; it < m_items.GetSize(); it++ ) 
    {
        if( static_cast<CControlUI*>(m_items[it]) == pControl ) 
        {
            //重新排序的话需要更新子控件位置
            NeedUpdate(); 

            m_items.Remove(it);
            return m_items.InsertAt(iIndex, pControl);
        }
    }

    return false;
}

3.4 获取子控件个数:GetCount()

int CContainerUI::GetCount() const
{
    return m_items.GetSize();
}

3.5 添加子控件(尾部):Add()

bool CContainerUI::Add(CControlUI* pControl)
{
    if( pControl == NULL) return false;

    if( m_pManager != NULL ) 
    {
        //设pControl的父控件为this
        m_pManager->InitControls(pControl, this);
    }
    if( IsVisible() ) 
    {
        //位置需要更新
        NeedUpdate(); 
    }
    else 
    {
        pControl->SetInternVisible(false);
    }

    return m_items.Add(pControl);   
}

3.6 在特定位置添加子控件:AddAt()

bool CContainerUI::AddAt(CControlUI* pControl, int iIndex)
{
    if( pControl == NULL) return false;

    if( m_pManager != NULL ) 
    {
        //设pControl的父控件为this
        m_pManager->InitControls(pControl, this);
    }

    if( IsVisible() ) 
        NeedUpdate();
    else 
        pControl->SetInternVisible(false);

    return m_items.InsertAt(iIndex, pControl);
}

3.7 删除某个子控件:Remove()

默认情况下，删除的子控件会被 delete 掉。

bool CContainerUI::Remove(CControlUI* pControl)
{
    if( pControl == NULL) return false;

    for( int it = 0; it < m_items.GetSize(); it++ ) 
    {
        if( static_cast<CControlUI*>(m_items[it]) == pControl ) 
        {
            //位置需要更新
            NeedUpdate();

            if( m_bAutoDestroy ) //是否销毁，默认true
            {
                if( m_bDelayedDestroy && m_pManager ) 
                    m_pManager->AddDelayedCleanup(pControl);             
                else 
                    delete pControl;
            }
            return m_items.Remove(it);
        }
    }
    return false;
}

3.8 根据序号删除某个子控件:RemoveAt()

bool CContainerUI::RemoveAt(int iIndex)
{
    CControlUI* pControl = GetItemAt(iIndex);
    if (pControl != NULL) 
    {
        return CContainerUI::Remove(pControl); //
    }

    return false;
}

3.9 移除所有子控件:RemoveAll()

下面的实现方式比循环调用 RemoveAt() 更加高效。

void CContainerUI::RemoveAll()
{
    for( int it = 0; m_bAutoDestroy && it < m_items.GetSize(); it++ ) 
    {
        if( m_bDelayedDestroy && m_pManager ) 
            m_pManager->AddDelayedCleanup(static_cast<CControlUI*>(m_items[it]));             
        else 
            delete static_cast<CControlUI*>(m_items[it]);
    }
    m_items.Empty();
    NeedUpdate();
}

4. CVerticalLayoutUI 中 SetPos() 实现

void CVerticalLayoutUI::SetPos(RECT rc)
{
    CControlUI::SetPos(rc);
    rc = m_rcItem;

    // 为了内间距和垂直水平滑动条留出空间
    // 此时 rc 为用于显示子控件的空间位置及大小
    rc.left += m_rcInset.left;
    rc.top += m_rcInset.top;
    rc.right -= m_rcInset.right;
    rc.bottom -= m_rcInset.bottom;
    if( m_pVerticalScrollBar && m_pVerticalScrollBar->IsVisible() ) 
        rc.right -= m_pVerticalScrollBar->GetFixedWidth();
    if( m_pHorizontalScrollBar && m_pHorizontalScrollBar->IsVisible() ) 
        rc.bottom -= m_pHorizontalScrollBar->GetFixedHeight();

    // 没有子控件就没必须继续了
    if( m_items.GetSize() == 0) 
    {
        ProcessScrollBar(rc, 0, 0);
        return;
    }

    // 垂直布局的情况下，如果有水平滚动条，水平显示空间会相应增加
    SIZE szAvailable = { rc.right - rc.left, rc.bottom - rc.top };
    if( m_pHorizontalScrollBar && m_pHorizontalScrollBar->IsVisible() ) 
        szAvailable.cx += m_pHorizontalScrollBar->GetScrollRange();

    // 循环遍历子控件，计算所需总空间高度及可调整和显示元素个数
    int nAdjustables = 0; // 可调高度的子控件个数
    int cyFixed = 0;  // 总体需要的空间高度(未包含可调高度的子控件高度)
    int nEstimateNum = 0; // 显示且非float子控件个数
    for( int it1 = 0; it1 < m_items.GetSize(); it1++ ) 
    {
        CControlUI* pControl = static_cast<CControlUI*>(m_items[it1]);
        if( !pControl->IsVisible() ) continue;
        if( pControl->IsFloat() ) continue;
        SIZE sz = pControl->EstimateSize(szAvailable);
        if( sz.cy == 0 ) 
        {
            nAdjustables++;
        }
        else 
        {
            if( sz.cy < pControl->GetMinHeight() ) 
                sz.cy = pControl->GetMinHeight();
            if( sz.cy > pControl->GetMaxHeight() ) 
                sz.cy = pControl->GetMaxHeight();
        }
        cyFixed += sz.cy + pControl->GetPadding().top + pControl->GetPadding().bottom;
        nEstimateNum++;
    }
    cyFixed += (nEstimateNum - 1) * m_iChildPadding;

    // 计算可调高度的子控件的设置高度
    // 子控件的高度并不一定设置为此（当子控件设置了最小高度属性时）
    int cyExpand = 0;
    if( nAdjustables > 0 ) 
        cyExpand = MAX(0, (szAvailable.cy - cyFixed) / nAdjustables);

    // 设置画布的初始位置
    int iPosY = rc.top;
    if( m_pVerticalScrollBar && m_pVerticalScrollBar->IsVisible() ) 
    {
        iPosY -= m_pVerticalScrollBar->GetScrollPos();
    }
    int iPosX = rc.left;
    if( m_pHorizontalScrollBar && m_pHorizontalScrollBar->IsVisible() ) 
    {
        iPosX -= m_pHorizontalScrollBar->GetScrollPos();
    }

    // 循环为各个子控件设置位置及大小
    int cyNeeded = 0; //
    SIZE szRemaining = szAvailable; // 剩余空间大小
    int iAdjustable = 0; // 第几个可调高度子控件
    int cyFixedRemaining = cyFixed; // 仍需要的高度空间
    for( int it2 = 0; it2 < m_items.GetSize(); it2++ ) 
    {
        CControlUI* pControl = static_cast<CControlUI*>(m_items[it2]);
        if( !pControl->IsVisible() ) continue;
        if( pControl->IsFloat() ) 
        {
            SetFloatPos(it2);
            continue;
        }

        RECT rcPadding = pControl->GetPadding();
        szRemaining.cy -= rcPadding.top;
        SIZE sz = pControl->EstimateSize(szRemaining);

        // 设置子控件高度
        if( sz.cy == 0 ) 
        {
            // 设置可调高度子控件的高度
            iAdjustable++;
            sz.cy = cyExpand;
            if( iAdjustable == nAdjustables ) 
            {
                sz.cy = MAX(0, szRemaining.cy - rcPadding.bottom - cyFixedRemaining);
            } 
            if( sz.cy < pControl->GetMinHeight() ) 
                sz.cy = pControl->GetMinHeight();
            if( sz.cy > pControl->GetMaxHeight() ) 
                sz.cy = pControl->GetMaxHeight();

            // 由于在预估高度的时候未计算该高度，故不减去
            // cyFixedRemaining -= sz.cy;
        }
        else
        {
            // 设置不可调子控件的高度
            if( sz.cy < pControl->GetMinHeight() ) 
                sz.cy = pControl->GetMinHeight();
            if( sz.cy > pControl->GetMaxHeight() ) 
                sz.cy = pControl->GetMaxHeight();

            // 由于在预估高度的时候计算了该高度，在此减去
            cyFixedRemaining -= sz.cy + rcPadding.top + rcPadding.bottom;
        }

        // 设置子控件宽度
        sz.cx = pControl->GetFixedWidth();
        if( sz.cx == 0 ) 
            sz.cx = szAvailable.cx - rcPadding.left - rcPadding.right;
        if( sz.cx < 0 ) 
            sz.cx = 0;
        if( sz.cx < pControl->GetMinWidth() ) 
            sz.cx = pControl->GetMinWidth();
        if( sz.cx > pControl->GetMaxWidth() ) 
            sz.cx = pControl->GetMaxWidth();

        // 设置子控件的位置及大小
        RECT rcCtrl = { iPosX + rcPadding.left, 
                        iPosY + rcPadding.top, 
                        iPosX + rcPadding.left + sz.cx, 
                        iPosY + sz.cy + rcPadding.top + rcPadding.bottom };
        pControl->SetPos(rcCtrl);

        // 更新画布的 Y 坐标
        iPosY += sz.cy + m_iChildPadding + rcPadding.top + rcPadding.bottom;

        // 累计所需要的 Y 的空间高度
        cyNeeded += sz.cy + rcPadding.top + rcPadding.bottom;

        // 控件剩余可视控件大小
        szRemaining.cy -= sz.cy + m_iChildPadding + rcPadding.bottom;
    }
    cyNeeded += (nEstimateNum - 1) * m_iChildPadding;

    //刷新滚动条
    ProcessScrollBar(rc, 0, cyNeeded);
}

大致步骤如下：

1. 计算可用于显示子控件的空间位置及大小；
2. 循环遍历子控件，计算出所需整体空间高度、可调高度子控件个数；
3. 根据滚动条的位置，初始化画布的位置坐标；
4. 循环为各个子控件设置位置及大小：
    1. 如果为可调高度子控件：设置为 a.扩展后的高度 b.最小高度与最大高度之间
    2. 如果为不可调高度子控件：直接根据子控件的预设高度进行设置
5. 刷新滚动条的滚动范围。

5.介绍

当然水平布局跟垂直布局也很相似，不解释了。

shrit-T
关注
专栏目录
CSS——水平布局和垂直布局
surymy
11-17 3934
水平布局 子元素在其父元素中水平方向的位置由以下几个属性共同决定： 为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width <head> <meta charset="UTF-8"> <title>Surymy</title> <style> .box1{ width:280px; height:200px;
vue垂直布局_Vue 中 Flex布局
weixin_39919089的博客
12-22 2873
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。display: flex;display: inline-flex;注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。基本概念采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Fle...
Vaadin Web应用开发教程(29):UI布局-VerticalLayout和HorizontalLayout布局
mapdigit
08-24 477
VerticalLayout和HorizontalLayout 分别垂直和水平安排其中的UI组件。这是Vaadin框架中两个最为重要的布局方式。比如Window及其父类Panel 缺省的布局就为VerticalLayout。这两种布局的基本用法如下： VerticalLayout vertical = new VerticalLayout (); vertical.addComponent(n...
【一文读懂】Unity布局组件：Horizontal Layout Group(水平布局组)，Vertical Layout Group(垂直布局组),Grid Layout Group(网格布局组)
最新发布
grapefruit_lyy的博客
09-13 1717
本篇文章来学习一下Unity常用的布局组件，主要包括Horizontal Layout Group(水平布局组)，Vertical Layout Group(垂直布局组),Grid Layout Group(网格布局组)。这些布局组件常与、Layout Element组件一起使用。
垂直方向的布局
wxwmb11的博客
03-27 145
子元素大于父元素 ，子元素会溢出 使用overflow设置父元素如何处理溢出的子元素 overflow： visible，默认值，子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出的内容会被裁剪 scroll 会出现两个滚动条 auto 生成需要的滚动条 overflow-x overflow-y ...
006垂直布局
哔了狗的博客
03-28 186
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;垂直布局&lt;/title&gt; &lt;style&gt; #box1{ width: 33.33%; height: 600
两种垂直布局~详细
weixin_46370867的博客
10-19 711
垂直布局 第一种实现垂直布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一种实现垂直布局</title> <style> /
Android应用借助LinearLayout实现垂直水平居中布局
01-05
首先说的是LinearLayout布局下的居中一般是这样的： （注意：android:layout_width=”fill_parent” android:layout_height=”fill_parent” 属性中，若水平居中，至少在宽度上占全屏；若垂直居中，则在高度上占全屏...
swiper示例，横向布局，垂直布局，配色参数，Grid，Menu
01-29
在"swiper示例，横向布局，垂直布局，配色参数，Grid，Menu"这个项目中，我们可以深入理解Swiper 8.4.5版本的一些核心特性。 1. **Swiper 8.4.5 版本**： Swiper 8.4.5 是该库的一个稳定版本，提供了许多改进和新...
水平和垂直方向布局效果
04-03
2. **垂直布局**：将视图自上而下排列，同样可以控制视图间的垂直间距，或者让它们根据内容自动扩展。 3. **弹性布局**：支持视图的弹性伸缩，当内容改变或屏幕尺寸变化时，视图能自动适应新尺寸。 4. **响应式布局*...
垂直布局（QVBoxLayout）
10-14
在Qt中，垂直布局（`QVBoxLayout`）是一种常用的布局管理器，用于将窗口部件垂直排列。以下是如何使用垂直布局的基本步骤： + **创建垂直布局：** ```cpp #include QWidget *widget = new QWidget(); ...
PyQt6 垂直布局Vertical Layout (QVBoxLayout)
java1234的博客
12-09 1400
垂直布局Vertical Layout属与线性布局，线性布局是将放入其中的组件按照垂直或水平方向来布局，也就是控制放入其中的组件横向排列或纵向排列。其中，将纵向排列的称为垂直线性布局管理器。
GTK入门学习：布局容器之垂直布局
每天积累一点点
07-25 3383
垂直布局和水平布局的用法基本是一样，无非是新建垂直布局容器接口，还有控件摆放的方向不同。 垂直布局容器的创建： GtkWidget *gtk_vbox_new( gboolean homogeneous,   gint spacing ); 完整代码如下： #include i
DuiLib 之 UIVerticalLayout
不积跬步无以至千里不积小流无以成江海
07-10 2291
#ifndef __UIVERTICALLAYOUT_H__ #define __UIVERTICALLAYOUT_H__ #pragma once namespace DuiLib { class UILIB_API CVerticalLayoutUI : public CContainerUI { public: CVerticalLayoutUI(); LPCTSTR G
QWidget垂直布局显示
chenyijun的专栏
09-23 2399
QWidget  *mainWidget mainWidget 里设置一个垂直布局verticalLayout 往verticalLayout里添加Widget ui.verticalLayout->addWidget(widget); 当加一个或两个时，widget并不没显示在mainWidget的最上顶端，而是显示在整个mainWidget的中间区域， （Win平台显示在最顶端，Ma
Unity UGUI的VerticalLayoutGroup（垂直布局）组件的介绍及使用
alianblank的博客
07-21 2428
VerticalLayoutGroup是Unity UGUI中的一种布局组件，用于在垂直方向上自动排列子对象。它可以根据子对象的大小和布局设置，自动调整子对象的位置和大小，实现垂直布局效果。
QT入门Layouts之Vertical Layout、Horizontal Layout、QGridLayout
Littlehero_121的博客
02-07 5113
qt控件
【Qt学习】 垂直布局和水平布局
m0_56051805的博客
05-06 5667
【Qt学习】 垂直布局和水平布局
QT入门之布局 水平布局、垂直布局、表单布局、网格布局
热门推荐
llk15884975173的博客
09-17 1万+
1 简介 2 QVBoxLayout 垂直布局 QVBoxLayout 其中的 “V” 就是单词 vertical 的简写，垂直的意思，就是该布局中的组件都是垂直方向排列的。 简单示例： int main(int argc, char *argv[]) { QApplication a(argc, argv); Widget w; QVBoxLayout layout; QPushButton btn1("btn1",&w);//创建 3 个按钮 QPu
swing 垂直布局
05-09
垂直布局是其中的一种布局管理器。 垂直布局管理器（VerticalLayout）可以将组件按照竖直方向依次排列，如果组件大小不同，则会按照组件的最大宽度进行自适应调整。这种布局管理器通常使用在需要按照一定顺序排列多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值