flutter常用ui api功能介绍

259 阅读2分钟
  • safeArea: 让内容在安全区域显示,比如ios的刘海屏

image.png

  • expanded: 弹性布局,能将剩余空间灵活的分配

  • wrap: 能够自动换行,设置排列方式

  • animatedContainer: 类似过渡效果的改变动画,可用于:圆角、颜色、形状、宽高、padding等等各种场景

  • Opacity: 类似于css,让节点不可见(保留节点之前的位置),animationOpacity能够实现类似opacity过渡的效果

  • FutureBuilder: 能够从server获取状态,以此来加载不同的内容;确保使用connectionState来检查future状态

  • FadeTransition: 淡入淡出

  • FloatingAction: 嵌入效果,能够让FloatingActionButton嵌入到ButtomNavigationBar中

image.png

  • PageView: 页面的左右(上下)滑动切换

  • Table: 表格

  • SliverAppBar: 向下滚动消失,向上滚动出现的appBar

  • CustomScrollView: 提供了一个公共的 Scrollable 和 Viewport,让我们可以方便的操作滚动,平滑的在一个scolll切换到另一个scoll

  • SliverList & SliverGrid:

  • fadeInImage: 加载图片时显示加载中动画

  • SreamBuilder: 异步数据来动态更新UI,同FutureBuilder差不多

  • InheritedModel:

  • ClipRReact: 裁剪图片,将图片裁剪成圆角;可以实现其他形状

  • Hero: Hero过渡,创建如:页面1点击图片跳到页面2,图片呈现过渡效果到页面2相同图片的位置;

  • CustomPaint: 绘画,类似于canvas

  • Tooltip: 长按会以语音的形式读出按钮的功能(你写的text介绍,ui上不会显示)

  • FittedBox: (适应在外层盒子中)

  • LouyoutBuilder: 决定内容前获得部件的大小

  • AbsorbPointer: 禁用按钮点击、滚动等用户触发事件(可打开关闭)

  • Transform: transform功能

  • BackdropFilter: 对图片模糊或变换;对任何子widget进行高斯模糊

  • Align: 类似于css的text-align,能够确定文字的位置(可以是一个精确的位置)

  • Positioned: 定位