Flutter的布局方式有哪些

 

1）常用布局
1、Row：行布局，将子控件水平排列。

2、Column：列布局，将子控件垂直排列。

3、Stack：层叠布局，将子控件叠加显示。

4、Expanded：扩展布局，占据剩余空间。

5、Flexible：灵活布局，根据子控件大小分配空间。

6、SizedBox：固定尺寸布局，设置宽高。

7、Positioned：绝对定位布局，通过设置相对于父控件的位置来定位。

8、Wrap：流式布局，根据子控件大小自动换行排列。

9、GridView：网格布局，将子控件按照网格形式排列。

10、ListView：列表布局，将子控件按照列表形式排列。

11、CustomMultiChildLayout：自定义多子控件布局，开发者可以自定义多个子控件的相对位置。

12、Flow：流式布局，根据子控件大小自动排列，并支持自定义布局策略。

13、Table：表格布局，将子控件按照表格形式排列，可以指定行列数、单元格宽高等属性。

14、CustomSingleChildLayout：自定义单子控件布局，开发者可以自定义一个子控件的位置和大小。

15、IndexedStack：索引堆叠布局，将多个子控件按照指定的顺序堆叠显示，通过指定索引来控制显示哪一个子控件。

16、Wrap：流式布局，和前面提到的 Wrap 布局类似，但是可以指定子控件的对齐方式和间距等属性。

17、Flow和Wrap的子类WrapAlignment、WrapCrossAlignment可以对其方向和对齐方式进行调整。

 

2）进阶的布局方式
1、Sliver：可滚动布局，支持灵活的滚动效果，可以实现复杂的滚动效果和吸顶效果等。

2、CustomPaint：自定义绘制布局，通过继承 CustomPainter 类，实现自定义的绘制逻辑，可以实现一些特殊的 UI 效果。

3、CustomScrollView：自定义滚动视图，可以自定义滚动行为，支持多种 Sliver 布局，灵活可扩展。

4、Flow和Wrap的子类FlowDelegate、WrapParentData可以实现更加复杂的布局逻辑。

 

3）辅助布局方式的组件和工具
1、MediaQuery：获取当前设备的屏幕尺寸和方向等信息，可以用于实现响应式布局。

2、FractionallySizedBox：按比例分配空间的布局，可以根据实际需求调整子控件的大小。

3、FittedBox：自适应缩放布局，可以根据子控件大小自动缩放，以适应父控件的大小。

4、Baseline：基准线布局，可以根据子控件的基线来进行对齐。

5、Spacer：空隙布局，可以在 Row 和 Column 布局中占据剩余的空间，类似于 Expanded。

6、LayoutBuilder：布局构建器，可以根据父控件的大小来动态构建子控件，适用于一些需要动态调整布局的场景。