Flutter入门(三)------常用组件

一.容器组件

   容器组件( Container )包含一个子 widget ,自身具备如 alignment padding 等基础属性,方便布局过程中摆放 child。

Flutter入门(三)------常用组件_第1张图片

二.图片组件

图片组件( Image )是显示图像的组件, Image 组件有种构造函数

new Image:从 ImageProvider 获取图像

new Image.asset :加载资源图片  

new Image.file :加载本地图片文件 

new Image.network :加载网络图片 

new Image.memory :加载 Uint8List 资源图片

Flutter入门(三)------常用组件_第2张图片

Flutter入门(三)------常用组件_第3张图片

三.文本组件

文本组件( text )负责显示文本和定义显示样式

Flutter入门(三)------常用组件_第4张图片

四.图标及按钮组件

   1.图标组件

  图标组件( Icon )为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用 IconButton组件。

 IconButton :可交互的 Icon .

 Icons :框架自带 Icon 集合

 IconThemeIcon 主题

 Imagelcon :通过 Assetlmages 或者其他图片显示 Icon

Flutter入门(三)------常用组件_第5张图片

     2.图标按钮组件

    图标按钮组件( IconButton )是基于 Material Design 风格的组 ,它可 以响应按下事件, 并且按下时会带一个水波纹的效果。 如果它的 onPressed 回调函数为 null ,那么这个 按钮处于禁用状态,并且不可以按下。

Flutter入门(三)------常用组件_第6张图片

Flutter入门(三)------常用组件_第7张图片

 3.凸起按钮组件

凸起按钮组件( RaisedButton )是 Material Design 中的 button ,一个凸起的材质矩形按 钮,它可以响应按下事件,并且按下时会带一个触摸的效果。

Flutter入门(三)------常用组件_第8张图片

五.列表组件

1.基础列表组件

Flutter入门(三)------常用组件_第9张图片

2.长列表组件

当列表的数据项非常多时, 需要使用长列表,比如淘 宝后台订单列表、手机通讯录等,这些列表项数据很多。 长列表也是使用 ListView 为基础组件,只不过需要添一个列表项构造器 itemBuilder

3.网格列表组件

  数据量很大时用矩阵方式排列比较清晰,此时用网格列表组件,即为 Grid View 组件,可以实现多行多列的应用场景, 使用 GridView创建网格列表有多种方式:

    GridView.count 通过单行展示个数 创建GridView。

    GridView. extent 通过最大宽度创建 GridView 。

Flutter入门(三)------常用组件_第10张图片

你可能感兴趣的:(Flutter,Dart)