Flutter布局组件

布局组件

线性布局

  • Align：指定组件位于父组件的位置，左上、右下等方位。
  • Column：列布局，可以指定主轴和交叉轴的排列方式。
  • Row：行布局，可以指定主轴和交叉轴的排列方式。

流式布局

  • Wrap：从左到右、从上到下，溢出自动换行。
  • Flow：类似Wrap，但是提供更灵活的布局方法。

列表布局

  • GridView：网格布局
  • ListView：线性列表布局

滚动布局

  • SliverList：滚动列表布局。
  • SliverGrid：滚动网格布局
  • CustomScrollView：用于创建自定义滚动效果的滚动视图，内部包裹Sliver类型组件，外面通常被Expanded、SizedBox等组件包裹，以便避免超出界限。
  • SliverToBoxAdapter：一种特殊组件，通常用于将基于盒结构的组件（例如Container）“转变”为Sliver组件，以便被CustomScrollView这类组件使用，

重叠布局

  • Stack：允许子孙组件重叠。
  • Positioned：给定具体的坐标进行定位，类似于css的绝对定位

容器布局

  • Container：盒子容器，可以指定宽高，内外边距和边框。
  • SizeBox：给定宽高，强制将子组件宽高改为设定值，除非父组件不支持该宽高。
  • Padding：设定内边距，padding必填。
  • Center：将子元素居中。
  • LimitedBox：限制子元素的最大宽高。
  • ConstrainedBox：类似于LimitedBox，但是还可以限制子元素的最小宽高。
  • OverflowBox：用于子组件溢出父组件。

弹性布局

  • Expanded：用于扩展Column、Row或者Flex的子项。
  • Flex：用于控制子组件在父组件中的布局方式和占用空间的比例。