思路:flutter的布局嵌套層次太多薯蝎,改成鏈式調(diào)用會簡單一些
原來的例子
import 'package:flutter/material.dart';
import 'package:flutter_easy/common/util/common.dart';
void main() {
runApp(
new MaterialApp(
title: '',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new TestPage(),
),
);
}
///author:chentong
///date:4/10/19
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('demo'),
),
body: new Align(
alignment: FractionalOffset.centerRight,
child: new Padding(
padding: CommonUtil.padding(left: 10), child: new Text("我是測試黨"))),
);
}
}
假如再加上click事件,那么簡直是太TMD的了
設計模式中有建造者模式,可以用鏈式調(diào)用眉尸,解決多層嵌套問題
調(diào)用如下谈息,我還特意加上click事件
WidgetDecoration(new Text("我是測試黨"))
.padding(left: 10)
.align(alignment: FractionalOffset.centerRight)
.onTap((){
Fluttertoast.showToast(msg: "你看我還能點擊呢!")
}).build(),
這樣寫法你說優(yōu)秀不優(yōu)秀
不用擔心括號一層一層的問題
完整建造者代碼缘屹,已應用于項目
import 'package:flutter/material.dart';
///widget裝飾器
///
/// author:chentong
/// 層級調(diào)用改為鏈式調(diào)用,方便查看
/// 4/11/19
///
class WidgetDecoration {
Widget _widget;
WidgetDecoration(Widget widget) {
this._widget = widget;
}
Function _onTapFunc;
Function _onDoubleTapFunc;
Function _onLongPressFunc;
///add padding屬性
WidgetDecoration padding(
{Key key, double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0}) {
var padding = EdgeInsets.only(left: left, top: top, right: right, bottom: bottom);
_widget = new Padding(key: key, padding: padding, child: _widget);
return this;
}
///增加padingall
WidgetDecoration paddAll({Key key, double all = 0.0}) {
var padding = EdgeInsets.all(all);
_widget = new Padding(key: key, padding: padding, child: _widget);
return this;
}
///增加align 當前布局相對位置
///FractionalOffset.centerRight
WidgetDecoration align({Key key, AlignmentGeometry alignment = Alignment.center}) {
_widget = new Align(key: key, alignment: alignment, child: _widget);
return this;
}
///位置
WidgetDecoration positioned(
{Key key,
double left,
double top,
double right,
double bottom,
double width,
double height}) {
_widget = new Positioned(
key: key,
left: left,
top: top,
right: right,
bottom: bottom,
width: width,
height: height,
child: _widget);
return this;
}
///stack 相當于frameLayout布局
///填充布局
WidgetDecoration expanded({Key key, int flex = 1}) {
_widget = new Expanded(key: key, flex: flex, child: _widget);
return this;
}
///是否顯示布局 true為不顯示 false為顯示
WidgetDecoration offstage({Key key, bool offstage = true}) {
_widget = new Offstage(key: key, offstage: offstage, child: _widget);
return this;
}
///透明度 0 是完全透明 1 完全不透明
WidgetDecoration opacity({Key key, @required double opacity, alwaysIncludeSemantics = false}) {
_widget = new Opacity(
key: key, opacity: opacity, alwaysIncludeSemantics: alwaysIncludeSemantics, child: _widget);
return this;
}
///基準線布局
WidgetDecoration baseline({
Key key,
@required double baseline,
@required TextBaseline baselineType,
}) {
_widget =
new Baseline(key: key, baseline: baseline, baselineType: baselineType, child: _widget);
return this;
}
///設置寬高比
WidgetDecoration aspectRatio({Key key, @required double aspectRatio}) {
_widget = new AspectRatio(key: key, aspectRatio: aspectRatio, child: _widget);
return this;
}
///矩陣轉(zhuǎn)換
WidgetDecoration transform({
Key key,
@required Matrix4 transform,
origin,
alignment,
transformHitTests = true,
}) {
_widget = new Transform(
key: key,
transform: transform,
origin: origin,
alignment: alignment,
transformHitTests: transformHitTests,
child: _widget);
return this;
}
///居中 todo: center
WidgetDecoration center({Key key, double widthFactor, double heightFactor}) {
_widget =
new Center(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: _widget);
return this;
}
///布局容器
WidgetDecoration container({
Key key,
alignment,
padding,
Color color,
Decoration decoration,
foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
margin,
transform,
}) {
_widget = new Container(
key: key,
alignment: alignment,
padding: padding,
color: color,
decoration: decoration,
foregroundDecoration: foregroundDecoration,
width: width,
height: height,
constraints: constraints,
margin: margin,
transform: transform,
child: _widget);
return this;
}
///設置具體尺寸
WidgetDecoration sizedBox({Key key, double width, double height}) {
_widget = new SizedBox(key: key, width: width, height: height, child: _widget);
return this;
}
///設置最大最小寬高布局
WidgetDecoration constrainedBox({
Key key,
minWidth = 0.0,
maxWidth = double.infinity,
minHeight = 0.0,
maxHeight = double.infinity,
}) {
BoxConstraints constraints = new BoxConstraints(
minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight);
_widget = new ConstrainedBox(key: key, constraints: constraints, child: _widget);
return this;
}
///限定最大寬高布局
WidgetDecoration limitedBox({
Key key,
maxWidth = double.infinity,
maxHeight = double.infinity,
}) {
_widget = new LimitedBox(key: key, maxWidth: maxWidth, maxHeight: maxHeight, child: _widget);
return this;
}
///百分比布局
WidgetDecoration fractionallySizedBox(
{Key key, alignment = Alignment.center, double widthFactor, double heightFactor}) {
_widget = new FractionallySizedBox(
key: key,
alignment: alignment,
widthFactor: widthFactor,
heightFactor: heightFactor,
child: _widget);
return this;
}
///縮放布局
WidgetDecoration fittedBox({Key key, fit = BoxFit.contain, alignment = Alignment.center}) {
_widget = new FittedBox(key: key, fit: fit, alignment: alignment, child: _widget);
return this;
}
///旋轉(zhuǎn)盒子 1次是90度
WidgetDecoration rotatedBox({
Key key,
@required int quarterTurns,
}) {
_widget = new RotatedBox(key: key, quarterTurns: quarterTurns, child: _widget);
return this;
}
///裝飾盒子 細節(jié)往外拋 decoration 編寫放在外面
WidgetDecoration decoratedBox({
Key key,
@required Decoration decoration,
position = DecorationPosition.background,
}) {
_widget =
new DecoratedBox(key: key, decoration: decoration, position: position, child: _widget);
return this;
}
///圓形剪裁
WidgetDecoration clipOval(
{Key key, CustomClipper<Rect> clipper, Clip clipBehavior = Clip.antiAlias}) {
_widget = new ClipOval(key: key, clipper: clipper, clipBehavior: clipBehavior, child: _widget);
return this;
}
///圓角矩形剪裁
WidgetDecoration clipRRect(
{Key key,
@required BorderRadius borderRadius,
CustomClipper<RRect> clipper,
Clip clipBehavior = Clip.antiAlias}) {
_widget = new ClipRRect(
key: key,
borderRadius: borderRadius,
clipper: clipper,
clipBehavior: clipBehavior,
child: _widget);
return this;
}
///矩形剪裁 todo: 需要自定義clipper 否則無效果
WidgetDecoration clipRect(
{Key key, @required CustomClipper<Rect> clipper, Clip clipBehavior = Clip.hardEdge}) {
_widget = new ClipRect(key: key, clipper: clipper, clipBehavior: clipBehavior, child: _widget);
return this;
}
///路徑剪裁 todo: 需要自定義clipper 否則無效果
WidgetDecoration clipPath(
{Key key, @required CustomClipper<Path> clipper, Clip clipBehavior = Clip.antiAlias}) {
_widget = new ClipPath(key: key, clipper: clipper, clipBehavior: clipBehavior, child: _widget);
return this;
}
///animatedOpacity 淡入淡出
WidgetDecoration animatedOpacity({
Key key,
@required double opacity,
Curve curve = Curves.linear,
@required Duration duration,
}) {
_widget = new AnimatedOpacity(
key: key, opacity: opacity, curve: curve, duration: duration, child: _widget);
return this;
}
///頁面簡單切換效果
WidgetDecoration hero({Key key, @required Object tag}) {
_widget = new Hero(key: key, tag: tag, child: _widget);
return this;
}
///點擊事件
WidgetDecoration onClick({Key key, onTap, onDoubleTap, onLongPress}) {
_widget = new GestureDetector(
key: key,
child: _widget,
onTap: onTap ?? _onTapFunc,
onDoubleTap: onDoubleTap ?? _onDoubleTapFunc,
onLongPress: onLongPress ?? _onLongPressFunc,
);
return this;
}
///添加點擊事件
WidgetDecoration onTap(Function func, {Key key}) {
_onTapFunc = func;
_widget = new GestureDetector(
key: key,
child: _widget,
onTap: _onTapFunc,
onDoubleTap: _onDoubleTapFunc,
onLongPress: _onLongPressFunc,
);
return this;
}
///雙擊
WidgetDecoration onDoubleTap(Function func, {Key key}) {
_onDoubleTapFunc = func;
_widget = new GestureDetector(
key: key,
child: _widget,
onTap: _onTapFunc,
onDoubleTap: _onDoubleTapFunc,
onLongPress: _onLongPressFunc,
);
return this;
}
///長按
WidgetDecoration onLongPress(Function func, {Key key}) {
_onLongPressFunc = func;
_widget = new GestureDetector(
key: key,
child: _widget,
onTap: _onTapFunc,
onDoubleTap: _onDoubleTapFunc,
onLongPress: _onLongPressFunc,
);
return this;
}
Widget build() {
return _widget;
}
}