文章目录

• 列表布局
• • singleChildScrollView
  • ListView
  • ListView.builder
  • ListView.separated
• 网格布局
• • GridView
  • GridView.count
  • GridView.extent
  • GridView.builder

列表布局

singleChildScrollView

类似Android中的ScrollView
- child 子组件
- padding 内边距
- scrollDirection 滚动方向
- Axis.horizontal
- Axis.vertical
- reverse 初始滚动位置
- false 头部
- true 尾部
- physics
- ClampingScrollPhysics
Android微光效果
- BouncingScrollPhysics
iOS弹簧效果

ListView

• 加载列表的组件
  • 加载所有widgets，使用widget较少的场景
  • ListTile
    leading、title、subtitle、trailing、selected

ListView.builder

按需加载widget，性能比默认构造函数高，适用于widget较多的场景

ListView.separated

比ListView.builder多了分割器

• itemCount
• itemBuilder
  • context
  • index
• separatorBuilder

网格布局

GridView

• children
• scrollDirection
• gridDelegate（以下组件二选一）
  • SliverGridDelegateWithFixedCrossAxisCount
    子组件宽度自适应
    • mainAxisSpacing
    • crossAxisSpacing
    • crossAxisCount
  • SliverGridDelegateWithFixedCrossAxisExtent
    列数自适应
    • maxCrossAxisExtent (指定子组件宽度)
    • mainAxisSpacing
    • crossAxisSpacing
      

GridView.count

列数固定

GridView.extent

子组件宽度固定

GridView.builder

动态网格布局

• gridDelegate 必填
• itemCount
• itemBuilder
• ScrollPhysics
  • BouncingScrollPhysics 反弹效果
  • ClampingScrollPhysics 防止超出边界
  • AlwaysScrollableScrollPhysics 始终响应滚动
  • NeverScrollableScrollPhysics 不响应滚动