division
一个 Flutter 小部件,旨在简化样式和减少嵌套,灵感来自 CSS

入门
Division 小部件有3个属性。一个style属性,一个gesture属性和一个child属性。就这么简单!
Division(style: StyleClass, gesture: GestureClass, child, Widget);
简单示例
导入
import 'package:division/division.dart';
简单用法
Division(
style: StyleClass()
..width(200)
..height(100)
..backgroundColor('#eeeeee')
..borderRadius(all: 30.0)
..elevation(30)
..align('center')
..alignChild('center'),
gesture: GestureClass()
..onTap(() => print('Widget pressed')),
child: Text('Some text'),
)
结果
Style属性
style属性需要一个StyleClass,它是一个包含小部件所有样式的类。
StyleClass
要向StyleClass添加样式,请使用..[style]语法。两个点用于返回StyleClass,而不是[style]。
Align
..align(dynamic alignment)
align参数支持[String]值('center'、'left'、'bottomRight'…),[List<double>]值([dx, dy]),[double]值(dx和dy的值相同)和[Alignment]。
对齐子项
..alignChild(dynamic alignment)
align参数支持[String]值('center'、'left'、'bottomRight'…),[List<double>]值([dx, dy]),[double]值(dx和dy的值相同)和[Alignment]。
Padding
..padding({double all,
double horizontal,
double vertical,
double top,
double bottom,
double left,
double right})
如果定义了all,则其他任何属性都将无效。
如果定义了horizontal和vertical,则top、bottom、left和right将无效。
外边距
..margin({double all,
double horizontal,
double vertical,
double top,
double bottom,
double left,
double right})
如果定义了all,则其他任何属性都将无效。
如果定义了horizontal和vertical,则top、bottom、left和right将无效。
背景颜色
..backgroundColor(dynamic color)
color参数支持HEX('#xxxxxx')、RGB([int, int, int])、RGBA([int, int, int, double])和[Color]。
渐变
..linearGradient({dynamic beginAlign = 'left',
dynamic endAlign = 'right',
@required List<dynamic> colors,
TileMode tileMode = TileMode.clamp,
List<double> stops})
..radialGradient(
{dynamic centerAlign = 'center',
double radius = 0.5,
@required List<dynamic> colors,
TileMode tileMode = TileMode.clamp,
List<double> stops})
..sweepGradient(
{dynamic centerAlign = 'center',
double startAngle = 0.0,
double endAngle,
@required List<dynamic> colors,
TileMode tileMode = TileMode.clamp,
List<double> stops})
在3种渐变变体中选择。
sweepGradient()默认情况下不使用弧度作为startAngle和endAngle。默认情况下,0.25等于45度,1等于完整的一圈等。
要更改为使用弧度,请执行:StyleClass(useRadians: true)..。
color参数支持HEX('#xxxxxx')、RGB([int, int, int])、RGBA([int, int, int, double])和[Color]。
align参数支持[String]值('center'、'left'、'bottomRight'…),[List<double>]值([dx, dy]),[double]值(dx和dy的值相同)和[Alignment]。
Border
..border(
{double all,
double left,
double right,
double top,
double bottom,
dynamic color = const Color(0xFF000000),
BorderStyle style = BorderStyle.solid})
在all或left、right、top和bottom之间进行选择。
color参数支持HEX('#xxxxxx')、RGB([int, int, int])、RGBA([int, int, int, double])和[Color]。
圆角
..borderRadius(
{double all,
double topLeft,
double topRight,
double bottomLeft,
double bottomRight})
可以使用all属性将其应用于所有角,或者使用topLeft、topRight、bottomLeft和bottomRight。
如果定义了all属性,则其他属性将无效。
盒阴影
..boxShadow(
{dynamic color = const Color(0x33000000),
double blur,
List<double> offset,
double spread})
color参数支持HEX('#xxxxxx')、RGB([int, int, int])、RGBA([int, int, int, double])和[Color]。
如果同时定义了elevation属性,则最后定义的将是应用的样式。
offset的格式为[double dx, double dy]
高程
..elevation(
double elevation,
{bool angled = false,
dynamic color = const Color(0x33000000)})
使用boxShadow提升小部件。
如果同时使用elevation属性和boxShadow属性,则最后定义的
样式将被应用。
color参数支持HEX('#xxxxxx')、RGB([int, int, int])、RGBA([int, int, int, double])和[Color]。
如果angled属性为true,则阴影将在45度角。
缩放
..scale(double scale)
缩放小部件
偏移量
..offset([double dx, double dy])
偏移小部件
旋转
..rotate(double rotate)
旋转小部件。
默认情况下,一圈等于1。要更改为弧度:StyleClass(useRadians: true)..
涟漪
Material涟漪效果
..ripple({bool enable = false, dynamic splashColor, dynamic highlightColor})
仍为[beta]功能,存在已知问题。
动画
..animate([int duration, Curve curve = Curves.linear])
当小部件的样式属性发生变化时,动画化该小部件。
duration以毫秒为单位。
我正在考虑实现一个only参数来选择仅动画某些属性。
添加
..add(StyleClass styleClass, {bool override = false})
将StyleClass添加到StyleClass。
默认情况下,添加的StyleClass不会覆盖已设置的样式。将override设置为true,以覆盖已设置的样式。
宽度、最小宽度、最大宽度、高度、最小高度、最大高度
..[type](double length)
Gesture属性
gesture属性需要一个GestureClass,它是一个包含小部件所有手势的类。
GestureClass
要向GestureClass添加样式,请使用..[gesture]语法。两个点用于返回GestureClass,而不是[gesture]。
GestureClass接受与GestureDetector小部件相同的参数。
..[gesture](function)
Child属性
Widget 子项