Flutter 常用组件属性 (不定期更新 flutter 学习 ing)

Text Widget 文本组件

TextAlign 属性

TextAlign 属性就是文本的对齐方式,它的属性值有如下几个:

  • center: 文本以居中形式对齐, 这个也算比较常用的了。
  • left: 左对齐,经常使用,让文本居左进行对齐,效果和 start 一样。
  • right : 右对齐,使用频率也不算高。
  • start: 以开始位置进行对齐,类似于左对齐。
  • end: 以为本结尾处进行对齐,不常用。有点类似右对齐.

总结起来,也就算三个对齐方式,left(左对齐)、center(居中对齐)、right(右对齐)。

maxLines 属性

设置最多显示的行数

overflow 属性

overflow 属性是用来设置文本溢出时,如何处理, 它有下面几个常用的值供我们选择。

  • clip:直接切断,剩下的文字就没有了,感觉不太友好,体验性不好。

  • ellipsis: 在后边显示省略号,体验性较好,这个在工作中经常使用。

  • fade: 溢出的部分会进行一个渐变消失的效果,当然是上线的渐变,不是左右的哦。

style 属性

style 属性的内容比较多,详细的还是查看官方 api [TextStyle 类]

Container 容器组件

Alignment 属性

这个属性针对的是 Container 内 child 的对齐方式,也就是容器子内容的对齐方式,并不是容器本身的对齐方式。

  • bottomCenter: 下部居中对齐。
  • botomLeft: 下部左对齐。
  • bottomRight:下部右对齐。
  • center:纵横双向居中对齐。
  • centerLeft:纵向居中横向居左对齐。
  • centerRight:纵向居中横向居右对齐。
  • topLeft:顶部左侧对齐。
  • topCenter:顶部居中对齐。
  • topRight: 顶部居左对齐。

设置宽、高和颜色属性

Image 图片组件

加载图片的几种方式

  • Image.asset: 加载资源图片,就是加载项目资源目录中的图片, 加入图片后会增大打包的包体体积,用的是相对路径。
  • Image.network: 网络资源图片
  • Image.file: 加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
  • Image.memory: 加载 Uint8List 资源图片

fit 属性

​ fit 属性可以控制图片的拉伸和挤压

  • BoxFit.fill: 全图显示,图片会被拉伸,并充满父容器。
  • BoxFit.contain: 全图显示,显示原比例,可能会有空隙。
  • BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
  • BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
  • BoxFit.fitHeight :高度充满(竖向充满), 显示可能拉伸,可能裁切。
  • BoxFit.scaleDown:效果和 contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大

colorBlendMode 图片的混合

  • color:是要混合的颜色
  • colorBlendMode: 是混合模式

repeat 重复属性

  • ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。
  • ImageRepeat.repeatX: 横向重复,纵向不重复。
  • ImageRepeat.repeatY:纵向重复,横向不重复。

ListView 列表组件

body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    )
  ]
),

scrollDirection 属性

istView 组件的scrollDirection属性只有两个值,一个是横向滚动,一个是纵向滚动。默认的就是垂直滚动,所以如果是垂直滚动

  • Axis.horizontal: 横向滚动或者叫水平方向滚动。
  • Axis.vertical: 纵向滚动或者叫垂直方向滚动。

动态列表 ListView.builder()

GridView 网格列表组件

  • padding: 表示内边距,这个小伙伴们应该很熟悉。
  • crossAxisSpacing: 网格间的空当,相当于每个网格之间的间距。
  • crossAxisCount: 网格的列数,相当于一行放置的网格数量。
  • childAspectRatio: 宽高比

未完待续。。。。。。。再次强调撸官方 api 才是正道

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:PipeSoloSymWide 等,欢迎大家加入,贡献开源。

    2771 引用 • 4347 回帖 • 640 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    10 引用 • 3 回帖 • 7 关注
感谢    关注    收藏    赞同    反对    举报    分享