Layout 小部件学习

• 这个是学习Flutter 中布局的小部件

单个子元素布局

1. Align

• 一个小部件，可将其子部件与其自身对齐
• 这个主要是可以设置子元素在自身的位置（比如右下、具体的位置）

2. AspectRatio

• 尝试将子级的大小调整为特定宽高比的小部件。
• 这是一个不注重尺寸，注重比例的一个组件，可以设置子元素在渲染时的宽高比。会把子组件放大或者缩小

3. Baseline

• 根据子项的基线定位其子项的容器。
• 将子元素按照指定的基线对齐。我们可以理解为 CSS 中的 vertical-align

4. Center

• 将其子项置于其自身中心的对齐块。
• 将子元素处于自身的中心位置

5. ConstrainedBox

• 对其子级施加额外约束的小部件。
• 这个其实可以理解为给子元素额外增加一层尺寸约束，可以给子元素设置最小宽高或者最大宽高，使其范围为动态范围

6. Container

• 一个方便的小部件，结合了常见的绘画、定位和大小调整小部件。
• 这个是设置一个容器，可以理解为HTML中的div

7. CustomSingleChildLayout

• 将其单个子级的布局推迟给委托的小部件。
• 它允许开发者自定义其子组件的布局方式.当你需要对单个子组件进行非常规或复杂的定位时，可以使用这个小部件.
  • 但是注意：CustomSingleChildLayout 需要配合一个 SingleChildLayoutDelegate 子类来实现具体的布局逻辑

8. Expanded

• 扩展 Row、Column 或 Flex 子级的小部件。
• 这个你就可以理解为这个小部件就是在自身上设置了 flex:1 这样它的效果就是占据了父元素的剩余位置

9. FittedBox

• 根据适合情况对其子级进行缩放和定位。
• 可以理解为类似于图片的裁切功能。可以对子元素宽度填充或者高度填充等等一切操作

10. FractionallySizedBox

• 一个将其子级调整为总可用空间的一小部分的小部件
• 就是说这个小部件宽高等一些尺寸可以使用 百分比来设置了(0 ~ 1);

11. IntrinsicHeight

• 一个将其子级的大小调整为子级的固有高度的小部件。
• 如果子元素是拉伸至填满整个父元素，如果此时父元素高度没有定义，那它就会无限大，填充到整个屏幕。设置了这个元素后 就会设置填充的高度为子元素的最高高度
  • 最常见的效果就是竖向的时间轴，一个区域左侧为轴, 右侧为内容。内容是动态的但是轴应该拉伸到多长合适呢？用这个小部件就可以把轴的高度填充到和右侧高度一致
• 这个类相对昂贵，因为它在最终布局阶段之前添加了推测布局过程。尽可能避免使用它。在最坏的情况下，这个小部件可能会导致树深度为 O(N²) 的布局。

12. IntrinsicWidth

• 一个将其子级的大小调整为子级的固有高度的小部件。
• 和 IntrinsicHeight 一样不过这个是限制 宽度
• 这个类相对昂贵，因为它在最终布局阶段之前添加了推测布局过程。尽可能避免使用它。在最坏的情况下，这个小部件可能会导致树深度为 O(N²) 的布局。

13. LimitedBox

• 仅当不受约束时才限制其大小的盒子。
• 可以限制子元素最大宽高，maxWidth、maxHeight
  • LimitedBox 和 ConstrainedBox 区别是啥？
    • LimitedBox 只用于限制子元素的最大尺寸
    • ConstrainedBox 限制子元素的活动尺寸(最小尺寸和最大尺寸)

14. Offstage

• 一个小部件，将子对象放置在树中，但不绘制任何内容，也不使子对象可被击中......
• 将子元素放置在树中，但不绘制任何内容。我的理解是 display:none。然后通过 offstage 参数来控制显示和隐藏

15. OverflowBox

• 一个小部件对其子部件施加的约束与从其父部件获得的约束不同，可能允许子部件溢出父部件。
• 它允许其子组件超出自身的边界限制。
  • 比如父组件限制了100， 子组件最大也只能是100
  • 但是如果子组件是 OverflowBox 那么它的宽度就可以设置任意大小

16. Padding

• 通过给定的填充插入其子级的小部件。
• 就是给元素设置内边距，但是注意这个内边距始终占据具体元素的内容。这句话就是css的box-sizing: border-box;的效果

17. SizedBox

• 具有指定尺寸的盒子。如果给定一个子组件，此小部件会强制其子组件具有特定的宽度和/或高度
• 这个跟 Container 很像。区别是：如果只是需要一个占位的元素(只有大小的尺寸要求)就使用 SizeBox，如果还有额外需求比如背景色等，则使用 Container

18. SizedOverflowBox

• 具有特定大小的小部件，但将其原始约束传递给其子部件，这可能会溢出。
• 它类似于 SizedBox，可以用来设置其子组件的特定尺寸
  • SizedOverflowBox 和 SizeBox 区别是：
    • SizedOverflowBox 指定尺寸后，并不会剪裁子元素也不会要求子元素适应自身的大小限制。而是允许子元素内容溢出

19. Transform

• 在绘制其子级之前应用转换的小部件。
• 用于对于内容的转换过渡。

多个子元素布局

20. Column

• 在垂直方向布局子部件列表。
• 虽然浏览器的默认布局就是从上到下渲染，很多 Widget 只能放置一个子元素，Column Widget 就是可以添加多个子元素让其从上到下渲染
  • 比如 Center 小部件它的子组件就是在 child 这个参数，这个是一个子元素
  • Column 则是 children 这个参数，children是一个 <Widget>[] 集合所以可以在里面放置多个子元素

21. CustomMultiChildLayout

• 使用委托来调整多个子项的大小和位置的小部件。委托可以确定每个子项的布局约束，并可以决定每个子项的位置。委托还可以确定父级的大小，但父级的大小不能依赖于子级的大小。
• CustomMultiChildLayout 是在多个子组件之间存在复杂尺寸和位置关系时适用的一个布局类。
  • 当只需要控制单个子组件的布局时，使用 CustomSingleChildLayout 更为合适
  • 而对于简单的布局需求，例如将一个 widget 对齐到另一个边缘或者容器的某个位置，使用 Stack 小部件会更加便捷

22. Flow

• 实现流布局算法的小部件。
• Flow 是一个用于自定义复杂布局的Widget，它允许将一组子Widget以流的形式进行绘制。通过与FlowDelegate结合使用，可以实现诸如平铺、重叠、绕着特定路径排列等高级布局效果。
  • 比如一些手机上的菜单是主按钮四周围绕着那种效果

23. GridView

• 网格列表由以垂直和水平布局排列的重复单元格图案组成。GridView 小部件实现了此组件。
• 这个可以理解为 css 的 Grid 布局.

24. IndexedStack

• 显示子项列表中的单个子项的堆栈。
• 可以对子元素们在隐藏的时候不进行销毁处理(可以理解为保活)。
  • Flutter 中也有 KeepAlive 类用作于保活。

25. LayoutBuilder

• 构建一个依赖于父窗口部件大小的窗口部件树。
• 可以根据 父窗口 大小来判断渲染哪种内容或者布局。(有点css的媒体查询的意思)

26. ListBody

• 一个小部件，它沿着给定轴顺序排列其子级，强制它们在另一个轴上的父级尺寸。
• 它用于在垂直方向上排列一组子组件，与 Column 类似。
  • 注意：这个小部件需要确保在主轴方向上父节点对他没有约束。否则就会报错
    • 一般和 SingleChildScrollView 等这些在主轴方向没有大小限制的小部件组合使用

27. ListView

• 可滚动的线性小部件列表。ListView 是最常用的滚动小部件。
• 它是一个滚动列表，可以让子元素在内部滚动

28. Row

• 在水平方向布局子部件列表。
• Row和前面讲的 Column 很像，不过 Row 是把内部所有子元素按照 水平方向排列(即：默认 从左到右)
  • 你甚至可以把它理解为 设置了 display: flex; 属性。如果这个可以让你更好的记忆这个小部件的话。

29. Stack

• 如果您想以简单的方式重叠多个子项，例如将一些文本和图像覆盖...，则此类非常有用。
• 这个小部件可以让内部的子元素全部堆叠在一起
  • 可以理解为：在css的世界中把多个元素通过定位position 定到了同一个位置，然后通过z-index 来设置谁在上面谁在下面。 这样只是为了让你更加理解到这个元素的视觉效果。具体它是怎么实现的暂未可知

30. Table

• 按行和列显示子小部件。
• 一个设置行和列的表格小部件。
  • 只是这个和GridView很相似，
    • GridView可以滚动
    • 表格不可以滚动（可以理解为html 的表格如果能帮助你理解的话）

31. Wrap

• 在多个水平或垂直运行中显示其子级的小部件。
• 这个可以控制子元素是在 垂直 还是 水平 来排列。
  • 相较于 Row、Column 它还可以让元素当超过尺寸的时候可以自动换行而不至于出现警告

单个子元素布局

32. CupertinoSliverNavigationBar

• iOS 风格的导航栏，带有使用条子的 iOS-11 风格的大标题。
• 构建 iOS 风格导航栏的 Widget

33. CustomScrollView

• 使用条子创建自定义滚动效果的 ScrollView。
• 它允许开发者自由组合多种类型的滚动元素（如列表、网格和固定标题等），从而创建高度定制化的滚动体验。

34. SliverAppBar

• 与 CustomScrollView 集成的材料设计应用栏。
• 这个是一个 在滚动中用来做一个花哨的的导航栏。通常与 CustomScrollView 结合使用
  • 比如很常见的效果是：当一个列表在向下滑动的时候顶部显示的内容缓慢隐藏，或者换成小的标题栏固定在顶部。这种就是可以通过 SliverAppBar 这个小部件来实现

35. SliverChildBuilderDelegate

• 使用构建器回调为子级提供子级的委托。
• 是一个构建器类。主要用于在 CustomScrollView 或其他支持 RenderSliver 的 Widget 中动态创建子元素。它接受一个生成子 Widget 的函数，并根据需要为每个子项调用该函数。

36. SliverChildListDelegate

• 使用显式列表为子级提供条子的委托。
• 它与 SliverChildBuilderDelegate 类似，但用于提供一个固定的子 Widget 列表，而不是通过回调函数动态生成。
  • SliverChildListDelegate 和 SliverChildBuilderDelegate 区别
    • SliverChildListDelegate
      • 它是一个拥有具体的内容，当你已经知道所有子 Widget 的确切列表时使用。
      • 你在使用的时候需要传入一个预先构造好的 Widget 列表到其构造函数中
    • SliverChildBuilderDelegate
      • 它拥有动态内容。用于动态创建子 Widget
      • 当你有一个数据源，并且根据这个数据源需要动态地为每个索引生成不同的 Widget 时使用。

37. SliverFixedExtentList

• 将具有相同主轴范围的多个盒子子项放置在线性阵列中的条子
• 创建具有固定大小子项的列表。与 SliverList 不同的是，SliverFixedExtentList 中的所有子 Widget 具有相同的预定义高度（或宽度，取决于滚动方向）。
  • 一个用于构建具有固定尺寸子项的滚动列表的 Sliver 类型

38. SliverGrid

• 将多个盒子子项放置在二维排列中的条子。
• SliverGrid 是一个用于构建网格布局的 Sliver 类型组件，适用于滚动视图（如 CustomScrollView）中。
  • 这个和 GridView 不同的是，如果你想要单独控制滑动 表格可以使用 GridView 但是如果你想要 GridView 和 ListView 表格和列表都可以滚动，就需要使用 SliverGrid 和 SliverList

39. SliverList

• 将多个盒子子项放置在沿主轴的线性阵列中的条子。
• 它与常规的 ListView 类似，但在滚动视图的上下文中提供了更好的性能和更灵活的布局控制。
  • 如果你想要 GridView 和 ListView 表格和列表都可以滚动，就需要使用 SliverGrid 和 SliverList

40. SliverPadding

• 在另一条棉条的每一侧都施加衬垫的棉条。
• 用于给其他 Sliver 类型的组件添加内边距。

41. SliverPersistentHeader

• 当条子滚动到与条子的 GrowthDirection 相对的视口边缘时，条子的大小会发生变化。
• 它用于在自定义滚动视图（如 CustomScrollView）中创建一个持久化的头部区域。这个头部可以随着滚动而变化其大小和外观，并且在某些滚动位置时保持固定。
  • SliverAppBar 和 SliverPersistentHeader 区别？
    • 它们在功能上有一定的重叠，但各自侧重点和使用场景有所不同
    • SliverAppBar
      • 是专门为实现 Material Design 样式的可滚动应用栏设计的。
      • 直接提供了一系列便捷的属性供开发者快速设置，无需从零开始创建复杂的动画逻辑。
      • 内置了许多常见的特性，例如：
        • 显示或隐藏标题（largeTitle）
        • 自动展开和收缩的效果
        • 固定在顶部（pinned）、浮动效果等
        • 可以包含工具栏、TabBar 等其他内置组件
        • 支持添加背景图像、阴影等样式
    • SliverPersistentHeader
      • 更通用且基础的组件，提供了更灵活的设计空间。
      • 开发者需要通过实现 SliverPersistentHeaderDelegate 来定制其行为和外观。
      • 虽然也可以用来实现类似 SliverAppBar 的吸顶效果和高度变化，但它并不直接支持 Material Design 的特定样式和内置组件
      • 当需要实现非常规布局或者对细节控制要求较高的头部时，通常会用到这个组件

42. SliverToBoxAdapter

• 包含单个框小部件的条子。
• 它用于在自定义滚动视图（如 CustomScrollView）中将普通的 Widget 转换为一个可以嵌入到滚动视图中的 Sliver 类型。由于自定义滚动视图通常需要其子组件是 Sliver 类型的，但有些情况下我们可能希望插入非 Sliver 类型的 Widget，这时就可以使用 SliverToBoxAdapter。