【Unity】列表内容宽高自适应，多级列表布局的LayoutGroup与Content Size Fitter层级设置

        起因是做一个列表项大小会根据显示内容变化的通用列表页面，了解到unity有一个专门用于设置对象自适应尺寸的组件Content Size Fitter。

Content Size Fitter

        内容尺寸适应器，可以自动调节UI大小以适配其内容大小，可以设置宽度/高度适配。

        例如对于Text，我们需要固定宽度且高度根据文本长度动态变化，宽度直接在transform里设置，高度就可以在Text上添加这样一个组件，把垂直适配设为Preferred Size。

   --set-->  

Layout Group

        列表布局组件，有水平/垂直两种，可以根据设置自动调整子物体的排布和尺寸。

 

自动适配列表

• 运行时布局混乱

        结合这两个组件功能得到一个初步的实现思路：列表父节点添加LayoutGroup组件，在大小会变化的子物体上添加Content Size Fitter，使LayoutGroup计算子物体紧密排布的间隔时能拿到正确的内容尺寸。

        然而在结合列表的实际应用时出现问题：Scene里展示的好好的，运行起来元素都堆到一起去了，把列表隐藏显示刷新几回排布才正常，有时候刷一次就行有时候要刷新三四次。

        在搜索解决方案时看到了用代码强制刷新解决混乱的方法，但是由于在测试时刷新次数不确定，感觉容易出问题就没有尝试这种方法；后来找到了这篇文章，说明是Layout Group的子物体有Content Size Fitter组件的话会出现冲突。

解决Unity 各种LayoutGroup无法解决的 动态子成员位置不对 强制刷新布局问题_unity layout group-CSDN博客https://blog.csdn.net/weixin_42767868/article/details/125297035?ops_request_misc=&request_id=&biz_id=102&utm_term=layout%20group%E6%B7%B7%E4%B9%B1&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2-125297035.142%5Ev100%5Epc_search_result_base2&spm=1018.2226.3001.4187

• 多级列表布局设置

         结合上述文章最终实现了目标：

实现结构：

-- Panel 1 ： 列表总面板，Vertical Layout Group  + Content Size Fitter

        -- Panel 2： 控制一个模块（文字块 + 分割线）的布局，Vertical Layout Group

（不勾宽：分割线和文本块的宽不一样）

                -- Panel 3：控制文字块水平布局，Horizontal Layout Group

                        -- Text 1：小标题文字，Layout Element设置最小宽度（根据视觉效果设置）

                        -- Text 2：内容文字，Layout Element+ Content Size Fitter（就算黄标也要加）

                -- Img：分割线，Layout Element设置最小高度（父类Panel 2设置了控制子类高度，这里的高度需要这样才能指定）

        -- Panel 2……

        -- Panel 2……

核心思想：

首先是Content Size Fitter除了最高级的父类和要变化的文本块，其他的对象都不可以用；由此出现的布局问题，如宽高显示被LayoutGroup布局计算影响了的，通过Layout Element设置最小宽高

二编补充 >> 纵向列表设置结构

-- ScrollView：固定三层结构scrollView+viewport+content

        -- Viewport

                --Content：内容视图，Vertical Layout Group 

                        -- GameObject 1：块区域，包含title和item块，Vertical Layout Group 

                                -- title 1：Layout Element 设置高度

                                -- Scroll View 1：用于排列item，直接用Panel上LayoutGroup组件也可以，Vertical Layout Group  + Content Size Fitter

                                        -- Viewport 1:Vertical Layout Group 

                                                -- Content 1：Vertical Layout Group  + Content Size Fitter

                                                        -- item 1：Layout Element 设置高度

                                                        -- itrm 2...

                        -- GameObject 2...