Flutter知识点总结一

一、设置图片的圆角

由于图片不能直接设置圆角，所以我们需要采用其它方式来设置：

1、使用ClipRRect进行设置

 ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child:Image.network(imgUrl),
            ),

2、使用Card的shape属性进行设置

Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadiusDirectional.circular(10.0),
              ),
              clipBehavior : Clip.antiAlias,
              child:Image.network(imgUrl),
            ),

效果如下图所示：

设置圆角

二、布局

Row/Column: 继承自Flex
Flex: CSS Flex布局, 直接使用的较少
Axis.vertical: Column 垂直
Axis.horizontal: Row 水平

Row特点:

 *  - 水平方向尽可能占据比较大的空间
 *    * 水平方向也是希望包裹内容, 那么设置mainAxisSize = min
 *  - 垂直方向包裹内容

MainAxisAlignment:

 *  - start: 主轴的开始位置挨个摆放元素(默认值)
 *  - end: 主轴的结束位置挨个摆放元素
 *  - center: 主轴的中心点对齐
 *  - spaceBetween: 左右两边的间距为0, 其它元素之间平分间距
 *  - spaceAround: 左右两边的间距是其它元素之间的间距的一半
 *  - spaceEvenly: 所有的间距平分空间

CrossAxisAlignment:

 *  - start: 交叉轴的起始位置对齐
 *  - end: 交叉轴的结束位置对齐
 *  - center: 中心点对齐(默认值)
 *  - baseline: 基线对齐(必须有文本的时候才起效果)
 *  - stretch: 先Row占据交叉轴尽可能大的空间, 将所有的子Widget交叉轴的高度, 拉伸到最大

三、动画

1.Animation: 抽象类

• 监听动画值的改变
• 监听动画状态的改变
• value
• status

2.AnimationController继承自Animation

• vsync: 同步信号(this -> with SingleTickerProviderStateMixin)
• forward(): 向前执行动画
• reverse(): 反转执行动画

3.CurvedAnimation:

• 作用: 设置动画执行的速率(速度曲线)

4.Tween: 设置动画执行的value范围

• begin: 开始值
• end: 结束值