division

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

division-1

入门

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,则其他任何属性都将无效。
如果定义了horizontalvertical,则topbottomleftright将无效。

外边距

..margin({double all,
      double horizontal,
      double vertical,
      double top,
      double bottom,
      double left,
      double right})

如果定义了all,则其他任何属性都将无效。
如果定义了horizontalvertical,则topbottomleftright将无效。

背景颜色

..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()默认情况下不使用弧度作为startAngleendAngle。默认情况下,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})

allleftrighttopbottom之间进行选择。
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属性将其应用于所有角,或者使用topLefttopRightbottomLeftbottomRight
如果定义了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 子项

GitHub

https://github.com/ReinBentdal/division