liuxm/FlutterUnit
1
0
Fork 0
forked from lxm_flutter/FlutterUnit
Code Issues Pull Requests Projects Releases Wiki Activity

✨ 添加CustomMultiChildLayout、LayoutId组件

Browse Source
This commit is contained in:
toly
2020-06-07 07:39:18 +08:00
parent 88c7855226
commit b55f6182b3
8 changed files with 214 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/flutter.db
View File

Binary file not shown.

94
lib/views/widgets/MultiChildRenderObjectWidget/CustomMultiChildLayout/node1_base.dart Normal file
View File

@@ -0,0 +1,94 @@
import 'dart:io';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/6/6
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 341,
// "name": 'CustomMultiChildLayout基本使用',
// "priority": 1,
// "subtitle":
// "【children】 : 子组件集 【List<Widget>】\n"
// "【delegate】 : 布局代理 【MultiChildLayoutDelegate】",
// }
class CustomMultiChildLayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 150,
color: Colors.grey.withAlpha(33),
child: CustomMultiChildLayout(
delegate: CornerCustomMultiChildLayout(
padding:EdgeInsets.only(left: 10,top: 5,right: 10,bottom: 5),
),
children: [
LayoutId(id: CornerType.topLeft, child: Box50(Colors.red)),
LayoutId(id: CornerType.topRight, child: Box50(Colors.yellow)),
LayoutId(id: CornerType.bottomLeft, child: Box50(Colors.blue)),
LayoutId(id: CornerType.bottomRight, child: Box50(Colors.green)),
],
),
);
}
}
// 50 颜射盒
class Box50 extends StatelessWidget {
final Color color;
Box50(this.color);
@override
Widget build(BuildContext context) {
return Container(
width: 50,
height: 50,
color: color,
);
}
}
enum CornerType{
topLeft,
topRight,
bottomLeft,
bottomRight
}
class CornerCustomMultiChildLayout extends MultiChildLayoutDelegate{
final EdgeInsets padding;
CornerCustomMultiChildLayout({this.padding = EdgeInsets.zero});
@override
void performLayout(Size size) {
if (hasChild(CornerType.topLeft)) {
layoutChild(CornerType.topLeft, BoxConstraints.loose(size));
positionChild(CornerType.topLeft, Offset.zero.translate(padding.left, padding.top));
}
if (hasChild(CornerType.topRight)) {
var childSize = layoutChild(CornerType.topRight, BoxConstraints.loose(size));
positionChild(CornerType.topRight, Offset(size.width-childSize.width,0).translate(-padding.right, padding.top));
}
if (hasChild(CornerType.bottomLeft)) {
var childSize = layoutChild(CornerType.bottomLeft, BoxConstraints.loose(size));
positionChild(CornerType.bottomLeft, Offset(0,size.height-childSize.height).translate(padding.left, -padding.bottom));
}
if (hasChild(CornerType.bottomRight)) {
var childSize = layoutChild(CornerType.bottomRight, BoxConstraints.loose(size));
positionChild(CornerType.bottomRight, Offset(size.width-childSize.width,size.height-childSize.height).translate(-padding.right, -padding.bottom));
}
}
@override
bool shouldRelayout(CornerCustomMultiChildLayout oldDelegate) => oldDelegate.padding!=padding;
}

94
lib/views/widgets/ProxyWidget/LayoutId/node1_base.dart Normal file
View File

@@ -0,0 +1,94 @@
import 'dart:io';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/6/6
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 315,
// "name": 'LayoutId使用场景',
// "priority": 1,
// "subtitle":
// "【id】 : 标识id 【Object】\n"
// "【child】 : 子组件 【Widget】",
// }
class LayoutIdDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 150,
color: Colors.grey.withAlpha(33),
child: CustomMultiChildLayout(
delegate: CornerCustomMultiChildLayout(
padding:EdgeInsets.only(left: 10,top: 5,right: 10,bottom: 5),
),
children: [
LayoutId(id: CornerType.topLeft, child: Box50(Colors.red)),
LayoutId(id: CornerType.topRight, child: Box50(Colors.yellow)),
LayoutId(id: CornerType.bottomLeft, child: Box50(Colors.blue)),
LayoutId(id: CornerType.bottomRight, child: Box50(Colors.green)),
],
),
);
}
}
// 50 颜射盒
class Box50 extends StatelessWidget {
final Color color;
Box50(this.color);
@override
Widget build(BuildContext context) {
return Container(
width: 50,
height: 50,
color: color,
);
}
}
enum CornerType{
topLeft,
topRight,
bottomLeft,
bottomRight
}
class CornerCustomMultiChildLayout extends MultiChildLayoutDelegate{
final EdgeInsets padding;
CornerCustomMultiChildLayout({this.padding = EdgeInsets.zero});
@override
void performLayout(Size size) {
if (hasChild(CornerType.topLeft)) {
layoutChild(CornerType.topLeft, BoxConstraints.loose(size));
positionChild(CornerType.topLeft, Offset.zero.translate(padding.left, padding.top));
}
if (hasChild(CornerType.topRight)) {
var childSize = layoutChild(CornerType.topRight, BoxConstraints.loose(size));
positionChild(CornerType.topRight, Offset(size.width-childSize.width,0).translate(-padding.right, padding.top));
}
if (hasChild(CornerType.bottomLeft)) {
var childSize = layoutChild(CornerType.bottomLeft, BoxConstraints.loose(size));
positionChild(CornerType.bottomLeft, Offset(0,size.height-childSize.height).translate(padding.left, -padding.bottom));
}
if (hasChild(CornerType.bottomRight)) {
var childSize = layoutChild(CornerType.bottomRight, BoxConstraints.loose(size));
positionChild(CornerType.bottomRight, Offset(size.width-childSize.width,size.height-childSize.height).translate(-padding.right, -padding.bottom));
}
}
@override
bool shouldRelayout(CornerCustomMultiChildLayout oldDelegate) => oldDelegate.padding!=padding;
}

28
lib/views/widgets/SingleChildRenderObjectWidget/CustomPaint/node2_bezier.dart
View File

@@ -36,14 +36,16 @@ class _PlayBezier3PageState extends State<PlayBezier3Page> {
_pos.add(Offset(-120, -40));
}
@override
Widget build(BuildContext context) {
return Container(
height: 200,
width: MediaQuery.of(context).size.width,
child: CustomPaint(
painter: BezierPainter(pos: _pos, selectPos: selectPos),
),
return Container(
height: 200,
width: MediaQuery.of(context).size.width,
child: CustomPaint(
painter: BezierPainter(pos: _pos, selectPos: selectPos),
),
);
}
}
@@ -83,12 +85,12 @@ class BezierPainter extends CustomPainter {
_drawGrid(canvas, size); //绘制格线
_drawAxis(canvas, size); //绘制轴线
_mainPath.moveTo(pos[0].dx, pos[0].dy);
_mainPath.cubicTo(
pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);
canvas.drawPath(_mainPath, _mainPaint);
_drawHelp(canvas);
_drawSelectPos(canvas);
_mainPath.moveTo(pos[0].dx, pos[0].dy);
_mainPath.cubicTo(pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);
canvas.drawPath(_mainPath, _mainPaint);
_drawHelp(canvas);
_drawSelectPos(canvas);
}
@override
@@ -168,4 +170,4 @@ class BezierPainter extends CustomPainter {
..color = Colors.green
..strokeWidth = 2);
}
}
}

38
lib/views/widgets/SingleChildRenderObjectWidget/Padding/node1_base.dart
View File

@@ -1,38 +0,0 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020-04-19
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 74,
// "name": 'Padding基本使用',
// "priority": 1,
// "subtitle":
// "【child】 : 孩子组件 【Widget】\n"
// "【padding】 : 内四边距 【EdgeInsetsGeometry】",
// }
class CustomPadding extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.grey.withAlpha(22),
width: 200,
height: 150,
child: Padding(
padding: EdgeInsets.all(20),
child: _buildChild(),
),
);
}
Widget _buildChild() {
return Container(
alignment: Alignment.center,
color: Colors.cyanAccent,
width: 100,
height: 100,
child: Text("孩子"),
);
}
}

3
lib/views/widgets/exp/proxy_unit.dart
View File

@@ -16,4 +16,5 @@ export '../ProxyWidget/DividerTheme/node1_base.dart';
export '../ProxyWidget/IconTheme/node1_base.dart';
export '../ProxyWidget/ScrollConfiguration/node1_base.dart';
export '../ProxyWidget/Expanded/node1_base.dart';
export '../ProxyWidget/Positioned/node1_base.dart';
export '../ProxyWidget/Positioned/node1_base.dart';
export '../ProxyWidget/LayoutId/node1_base.dart';

2
lib/views/widgets/exp/render_object_unit.dart
View File

@@ -21,7 +21,7 @@ export '../MultiChildRenderObjectWidget/Wrap/node5_verticalDirection.dart';
export '../MultiChildRenderObjectWidget/Column/node1_base.dart';
export '../MultiChildRenderObjectWidget/IndexedStack/node1_base.dart';
export '../MultiChildRenderObjectWidget/Row/node1_base.dart';
export '../MultiChildRenderObjectWidget/CustomMultiChildLayout/node1_base.dart';
export '../SingleChildRenderObjectWidget/Align/node1_base.dart';
export '../SingleChildRenderObjectWidget/Align/node2_other.dart';

8
lib/views/widgets/widgets_map.dart
View File

@@ -229,6 +229,14 @@ class WidgetsMap {
return [
CustomRadio(),
];
case "CustomMultiChildLayout":
return [
CustomMultiChildLayoutDemo(),
];
case "LayoutId":
return [
LayoutIdDemo(),
];
case "CircularProgressIndicator":
return [
CustomCircularProgressIndicator(),