Flutter学习4-基础组件

閱讀時間：全文 1804 字，預估用時 10 分鐘

創作日期：2019-03-11

文章標籤：

上篇文章：TypeScript学习笔记

下篇文章：Flutter学习3-调试

BEGIN

Container

属性

alignment

用于定位子(child)组件的显示位置, 值为Alignment对象;

Alignment

继承关系: Object > AlignmentGeometry > Alignment

方法定义: const Alignment(x, y)
快捷属性关系Alignment.center:

topLeft => const Alignment(-1.0, -1.0)
topCenter => const Alignment(0.0, -1.0)
topRight => const Alignment(1.0, -1.0)
centerLeft => const Alignment(-1.0, 0.0)
center => const Alignment(0.0, 0.0)
centerRight => const Alignment(1.0, 0.0)
bottomLeft => const Alignment(-1.0, 1.0)
bottomCenter => const Alignment(0.0, 1.0)
bottomRight => const Alignment(1.0, 1.0)

运算符对应操作, 以下A表示Alignment, other为double类型数值:

A(x, y) % other => A(x % other, y % other)
A(x, y) * other => A(x * other, y * other)
A(x, y) / other => A(x / other, y / other)
A(x1, y1) + A(x2, y2) => A(x1 + x2, y1 + y2)
A(x1, y1) - A(x2, y2) => A(x1 - x2, y1 - y2)
-A(x, y) => A(-x, -y)
A(x, y) ~/ other => A((x ~/ other).toDouble(), (y ~/ other).toDouble())

child

子Widget

constraints

用于对子组件的额外限制, 值为BoxConstraints对象;

BoxConstraints

满足如下条件才会起效果, Size.width表示子组件定义的宽度值

0.0 <= minWidth <= Size.width <= maxWidth <= double.infinity
0.0 <= minHeight <= Size.height <= maxHeight <= double.infinity

使用方法: BoxConstraints(minWidth: value, minHeight: value, maxWidth: value, maxHeight: value), 值即为对子组件的限定值;
属性, 以下B表示BoxConstraints:

expand: B.expand(width: x, height: y) => B(minWidth: x, minHeight: y, maxWidth: x, maxHeight: y)
loose: B.loose(Size size) => B(minWidth: 0.0, minHeight: 0.0, maxWidth: zise.width, maxHeight: size.height)
tight: B.tight(Size size) => B(minWidth: size.width, minHeight: size.height, maxWidth: zise.width, maxHeight: size.height)
tightFor: B.tightFor(width, height) => B(minWidth: width, minHeight: height, maxWidth: width, maxHeight: height)
tightForFinite: 带默认值的tightFor, 默认值为double.infinity, 使用: B.tightForFinite(width = double.infinity, height = double.infinity)

运算符对应操作, 含% * / == ~/, 与上方的Alignment相似, 不过计算的属性为minWidth, minHeight, maxWidth, maxHeight

decoration 和 foregroundDecoration

decoration用于子组件背景配置, foregroundDecoration用于子组件前景配置, 值都为Decoration对象

Decoration

继承关系如下: Object > Diagnosticable > Decoration 其实我不知道这个类到底怎么用, 不过官方文档里面有看到推荐用BoxDecoration的

BoxDecoration

继承关系如下: Object > Diagnosticable > Decoration > BoxDecoration

根据文档含义BoxDecoration组件用于渲染盒子(Box), 其渲染层级顺序如: color > gradient > image, border > boxShadow
属性及属性值类型:

BoxDecoration({
  Color color,
  DecorationImage image,
  BoxBorder border,
  BorderRadiusGeometry borderRadius,
  List<BoxShadow> boxShadow,
  Gradient gradient,
  BlendMode backgroundBlendMode,
  BoxShape shape: BoxShape.rectangle
})

属性如下:

color: Color

当gradient属性非空时才起作用, 用于填充Box, 前端css中颜色可以用RGBA()方式定义, 在Flutter中用8个16进制数表示ARGB, 其中A为透明度, 当A对应值为00时表示全透明(fully-transparent).

三种实例化方式:

Color(int value), 示例: const Color(0xFF42A5F5), 当为6为16进制数时, 则A默认为00(透明, invisible)
Color.fromARGB(int a, int r, int g, int b), 示例: const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5)或const Color.fromARGB(255, 66, 165, 245)
Color.fromRGBO(int r, int g, int b, double opacity), 示例: const Color.fromRGBO(66, 165, 245, 1.0)

有如下属性: alpha, opacity, red, green, blue, hashCode, value

gradient: Gradient

定以后color属性无效, 用于对Box渐变填充颜色, 一般使用三个子继承类完成功能LinearGradient(线性渐变), RadialGradient(径向渐变), SweepGradient(扫描渐变)

LinearGradient

线性渐变, 线性方向的颜色渐变

LinearGradient(
  begin: Alignment.topLeft, // 渐变的开始方向
  end: Alignment.bottomRight, // 渐变的结束方向
  colors: [const Color(0xFFFFFFEE), const Color(0xFF999999)], // 从白到灰渐变
  tileMode: TileMode.repeated, // 渐变图形外的背景如何使用渐变效果, TileMode.repeated为循环, TileMode.mirror为逆向循环, TileMode.clamp为用最后一种颜色填充
)

RadialGradient

径向渐变

SweepGradient

扫描渐变, 围着中心的转的多种颜色渐变

SweepGradient(
  center: FractionalOffset.center, // 中心点坐标
  startAngle: 0.0, // 开始角度
  endAngle: math.pi * 2, // 结束角度
  colors: const <Color>[
    Color(0xFF4285F4), // blue
    Color(0xFF34A853), // green
    Color(0xFFFBBC05), // yellow
    Color(0xFFEA4335), // red
    Color(0xFF4285F4), // blue 和初始保持一致
  ],
  stops: const <double>[0.0, 0.25, 0.5, 0.75, 1.0], // 每种颜色的占比
 )

image: DecorationImage

将图片填充到背景或渐变中;
属性及属性值类型:

DecorationImage({
  @required ImageProvider image,
  ColorFilter colorFilter,
  BoxFit fit,
  AlignmentGeometry alignment: Alignment.center,
  Rect centerSlice,
  ImageRepeat repeat: ImageRepeat.noRepeat,
  bool matchTextDirection: false
})

其中alignment和repeat的值可以参考前面部分
其中centerSlice、colorFilter和matchTextDirection好像不常用

image: ImageProvider

提供多种获取图片的方式

从网络获取图片: NetworkImage(String url, { double scale: 1.0, Map<String, String> headers });
从本地读取图片: FileImage(File file, { double scale: 1.0 })
从内存流中读取图片: MemoryImage(Uint8List bytes, { double scale: 1.0 })
还有一个不知道干嘛的: AssetBundleImageProvider()

fit: BoxFit

用于控制图片的显示

BoxFit.contain: 保留图片比例, 尽可能大地显示, 宽高比例不变;
BoxFit.cover: 拉伸图片显示到整个容器, 宽高比例变;
BoxFit.Fill: 调整图片比例填充容器, 宽高比例不变;
BoxFit.fitHeight: 将高根据容器填充, 宽高比例变, 相当于横屏的contain;
BoxFit.fitWidth: 将宽根据容器填充, 宽高比例变, 相当与竖屏的contain;
BoxFit.none: 不控制图片宽高, 原图大小显示;
BoxFit.scaleDown: 与contain相似, 不过scaleDown只在图片过大时起作用;

shape: BoxShape

控制显示形状

BoxShape.circle: 显示成圆型, 奇怪的是, 背景确实是显示成了圆形, 但图片虽有变化, 却和背景的圆形未保持一致;
BoxShape.rectangle: 显示成长方形, 会显示全部内容;

padding: EdgeInsetsGeometry

字面意思是内边距, 没试出来干嘛的, 留待观察

border: BoxBorder

继承关系: Object > ShapeBorder > BoxBorder 一般使用子类完成功能: Border

Border

继承关系: Object > ShapeBorder > BoxBorder > Border

使用构造函数生成Border():

bottom, top, left, right: 分别控制四边的边框线样式, 值为BorderSide对象, 使用: BorderSide(width: 16.0, color: Color(0xFF42A5F5));
属性dimensions和isUniform好像并没有什么用;

使用all方法生成四边宽度一致的边框:

Border.all({
  Color color: const Color(0xFF000000),
  double width: 1.0,
  BorderStyle style: BorderStyle.solid
})

backgroundBlendMode: BlendMode

字面量意思是混合模式背景, 及当图片加载进来后, 用另一图片或者背景色集成显示

好像没有看出来有什么软用

borderRadius: BorderRadiusGeometry

控制边框线圆角显示

BorderRadius.all(Radius radius): 四个角统一用Radius设置圆角;
BorderRadius.circular(double radius): 用实际数值设置圆角;
BorderRadius.horizontal({Radius left: Radius.zero, Radius right: Radius.zero }); 横向默认值设为0;
BorderRadius.only({Radius topLeft: Radius.zero, Radius topRight: Radius.zero, Radius bottomLeft: Radius.zero, Radius bottomRight: Radius.zero }): 所有角的圆角都设为0;
BorderRadius.vertical({Radius top: Radius.zero, Radius bottom: Radius.zero }): 竖向默认值设为0;

Radius

Radius.circular(double radius): 构造圆形;
Radius.elliptical(double x, double y): 构造椭圆;
Radius.zero => Radius.circular(0);

boxShadow: List

设置阴影, 这个阴影非前端的盒阴影, 而像是ui框架的弹出框弹出来后, 在下面一层的背景阴影, 且好像只对前景图片设置有效

boxShadow: [
  BoxShadow(
    color: Color(0xFFFF0000),
    offset: Offset(10, 10),
  ),
]

margin: EdgeInsetsGeometry 和 padding: EdgeInsetsGeometry

应用与decoration和child的内边距与外边距.

一般使用EdgeInsets控制边距

EdgeInsets

继承关系: Object > EdgeInsetsGeometry > EdgeInsets

四边全部控制: EdgeInsets.fromLTRB(double left, double top, double right, double bottom)
四边独立控制: EdgeInsets.only({double left: 0.0, double top: 0.0, double right: 0.0, double bottom: 0.0 })
横竖方向控制: EdgeInsets.symmetric({double vertical: 0.0, double horizontal: 0.0 })
四边统一控制: EdgeInsets.all(double value)

transform: Matrix4

控制子组件的4D显示效果

使用构造函数构造:

Matrix4(
  double arg0,
  double arg1,
  double arg2,
  double arg3,
  double arg4,
  double arg5,
  double arg6,
  double arg7,
  double arg8,
  double arg9,
  double arg10,
  double arg11,
  double arg12,
  double arg13,
  double arg14,
  double arg15
)

比较常用的几个方法:

Matrix4.translationValues(double x, double y, double z): 根据值翻转child;
Matrix4.translation(Vector3 translation): 利用3D矢量控制作为参数翻转child显示;
Matrix4.skew(double alpha, double beta): 根据X轴与Y轴倾斜child;
Matrix4.skewX(double alpha): 根据X轴倾斜child;
Matrix4.skewY(double beta): 根据Y轴倾斜child;
Matrix4.rotationX(double radians): 按照X轴旋转对应弧度的child;
Matrix4.rotationY(double radians): 按照Y轴旋转对应弧度的child;
Matrix4.rotationZ(double radians): 按照Z轴旋转对应弧度的child;
Matrix4.inverted(Matrix4 other): 翻转其它Matrix4类型变量;

FINISH

上篇文章：TypeScript学习笔记

下篇文章：Flutter学习3-调试