flutter基础组件2

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

裁剪圆角

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容