PhysicalModel
裁剪组件
场景:UI 需要实现四个角的圆角,常规是需要最外层容器设置borderRadius,然后里层的组件也需要设置borderRadius。通过PhysicalModel,只需要设置外层容器的borderRadius,里层组件会被自动裁剪。有点类似overflow:hiden
2.1 Card
Card:一个 Material Design 卡片。拥有一个圆角和阴影
默认情况下 Card 是无限小的。
Card 可识别为单个包含的单元。
Card 可以独立存在,而不依赖于周围的元素作为上下文。
一个 Card 不能与另一个 Card 合并,也不能分成多个 Card 。
2.2 ListTile
这个已经被多次使用了,最经典的案例就是个人名片,因为这个自带 heading 放头像, title, subtitle, text 这种可以放不同层级内容的部分。
2.3
SingleChildScrollView
组件是负责滚动的,里面只能嵌套一个组件
Column布局超出屏幕后不能滚动,需要在外层嵌套SingleChildScrollView才可以
可以设置滚动方向,也可以通过reverse 属性设置阅读顺序
还可以解决TextField布局溢出问题
FittedBox 缩放
负责对组件进行缩放和位置调整
fit 缩放方式缩放本身占据FittedBox的大小,默认值BoxFit.contain
子组件的宽度或高度被缩放到父容器限定的值时,就会被停止缩放
2.4
CustomScrollView
两个组件结合起来形成一个滚动区域
AppBar -> SliverAppBar
GridView -> SliverGrid
ListView -> SliverFixedExtentList
转换后的组件都是以(
Sliver)开头的,其本身是不具备滚动特征的,但是当放在CustomScrollView中之后,则可以实现滚动的功能
2.5
PageView
实现类似轮播图的效果
数据量大可通过PageView.builder优化性能
2.6
GestureDetector
手势识别的组件,可以识别点击、双击、长按事件、拖动、缩放等手势
2.7
InkWell
作用跟GestureDetector类似。
GestureDetector使用点击无水波纹出现,InkWell可以实现水波纹效果
2.8
ClipRRect
裁剪圆角