Flutter 常用组件属性

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： 顶部居左对齐。

设置宽、高和颜色属性

• width 宽

• height 高

• color 颜色

• padding 内边距 EdgeInsets.fromLTRB 设置左上右下的参数

• margin 外边距

• decoration 容器装饰，主要的功能是设置背景和边框。Decoration 抽象类，具体实现类有

  BoxDecoration

  FlutterLogoDecoration

  ShapeDecoration

  UnderlineTabIndicator

  当然了各个实现类中的各种属性和各种实现方法也是不一样的，撸官方 api 才是王道

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 才是正道