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

更新Flutter 版本 2.5

Browse Source
This commit is contained in:
toly
2021-09-10 22:28:13 +08:00
parent eadc27b40a
commit 3cef86825f
6 changed files with 367 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
lib/views/widgets/ProxyWidget/PrimaryScrollController/node1_base.dart Normal file
View File

@@ -0,0 +1,36 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/3/31
/// contact me by email 1981462002@qq.com
///
/// 说明: 335 PrimaryScrollController 5 初始滑动控制器 它是 InheritedWidget 子类，通过 context 向子树中的可滑动视图提供默认的 ScrollController 对象。
// {
// "widgetId": 335,
// "name": 'PrimaryScrollController 介绍',
// "priority": 1,
// "subtitle":
// "【controller】 : 滑动控制器 【ScrollController】\n"
// "【child】 : 子组件 【Widget】",
// }
class PrimaryScrollControllerDemo extends StatelessWidget {
final String info =
'PrimaryScrollController 是 InheritedWidget 子类，也就说明它可以为子树组件提供某些默认数据，'
'子树可以通过 context 来获取上层该组件的提供 ScrollController 对象。\n'
'对于一些可滑动组件 ScrollView、SingleChildScrollView、NestedScrollView 等，'
'在使用者未提供 ScrollController 时，且 primary 属性为 true 时(默认true) ，'
'会使用上层 PrimaryScrollController 组件提供的滑动控制器。\n'
'使用 MaterialApp 组件，其已经内置 PrimaryScrollController，';
@override
Widget build(BuildContext context) {
ScrollController label = PrimaryScrollController.of(context);
return Container(
color: Colors.blue.withOpacity(0.1),
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
child: Text(info+"当前其持有的滑动控制器对象: $label"),
);
}
}

119
lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformFollower/node1_base.dart Normal file
View File

@@ -0,0 +1,119 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/3/31
/// contact me by email 1981462002@qq.com
///
/// 说明: 265 CompositedTransformFollower 2 合成变换跟随者，一般与 CompositedTransformTarget 组件联合使用，可以使 Overlay 伴随目标变换。
// {
// "widgetId": 265,
// "name": "基本使用",
// "name": "CompositedTransformFollower 使用",
// "priority": 1,
// "subtitle":
// "【child】 : 子组件 【Widget】\n"
// "【link】 : 链接 【LayerLink】\n"
// "【offset】 : 偏移 【Offset】\n"
// "【targetAnchor】 : 目标锚点 【Alignment】\n"
// "【followerAnchor】 : 伴随者锚点 【Alignment】\n"
// "【showWhenUnlinked】 : 为链接是否显示 【bool】",
// }
class CompositedTransformFollowerDemo extends StatelessWidget {
const CompositedTransformFollowerDemo();
static const List<Color> colors =[Colors.red,Colors.yellow,Colors.blue,Colors.green];
@override
Widget build(BuildContext context) {
return Container(
transform: Matrix4.rotationZ(-15/180*pi),
height: 250,
padding: const EdgeInsets.all(50.0),
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [_LogoTips(), const Text('点击图标\n显隐弹框')],
),
...colors.map((color) => Container(width: 80, color: color))
],
),
);
}
}
class _LogoTips extends StatefulWidget {
@override
_LogoTipsState createState() => _LogoTipsState();
}
class _LogoTipsState extends State<_LogoTips> {
OverlayEntry _overlayEntry;
final LayerLink _layerLink = LayerLink();
bool show = false;
OverlayEntry _createOverlayEntry() {
return OverlayEntry(
builder: (context) => Positioned(
width: 150,
child: CompositedTransformFollower(
link: this._layerLink,
showWhenUnlinked: false,
offset: Offset(0,-10),
targetAnchor: Alignment.topRight,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('我是一个 Overlay，目标组件为图标，当它变换时，我会伴随变换。'),
),
),
),
));
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _toggleOverlay,
child: CompositedTransformTarget(
link: this._layerLink,
child:
FlutterLogo(
size: 80,
),
));
}
void _toggleOverlay() {
if (!show) {
_showOverlay();
} else {
_hideOverlay();
}
show = !show;
}
void _showOverlay() {
_overlayEntry = _createOverlayEntry();
Overlay.of(context).insert(_overlayEntry);
}
void _hideOverlay() {
_overlayEntry?.remove();
}
@override
void dispose() {
_hideOverlay();
super.dispose();
}
}

112
lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformTarget/node1_base.dart Normal file
View File

@@ -0,0 +1,112 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/3/31
/// contact me by email 1981462002@qq.com
///
/// 说明: 266 CompositedTransformTarget 2 合成变换目标，一般与 CompositedTransformFollower 组件联合使用，可以使 Overlay 伴随目标变换。
// {
// "widgetId": 266,
// "name": "CompositedTransformTarget 使用",
// "priority": 1,
// "subtitle":
// "【child】 : 子组件 【Widget】\n"
// "【link】 : 链接 【LayerLink】",
// }
class CompositedTransformTargetDemo extends StatelessWidget {
const CompositedTransformTargetDemo();
static const List<Color> colors =[Colors.red,Colors.yellow,Colors.blue,Colors.green];
@override
Widget build(BuildContext context) {
return Container(
transform: Matrix4.rotationZ(-15/180*pi),
height: 250,
padding: const EdgeInsets.all(50.0),
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [_LogoTips(), const Text('点击图标\n显隐弹框')],
),
...colors.map((color) => Container(width: 80, color: color))
],
),
);
}
}
class _LogoTips extends StatefulWidget {
@override
_LogoTipsState createState() => _LogoTipsState();
}
class _LogoTipsState extends State<_LogoTips> {
OverlayEntry _overlayEntry;
final LayerLink _layerLink = LayerLink();
bool show = false;
OverlayEntry _createOverlayEntry() {
return OverlayEntry(
builder: (context) => Positioned(
width: 150,
child: CompositedTransformFollower(
link: this._layerLink,
showWhenUnlinked: false,
targetAnchor: Alignment.topRight,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('我是一个 Overlay，目标组件为图标，当它变换时，我会伴随变换。'),
),
),
),
));
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _toggleOverlay,
child: CompositedTransformTarget(
link: this._layerLink,
child:
FlutterLogo(
size: 80,
),
));
}
void _toggleOverlay() {
if (!show) {
_showOverlay();
} else {
_hideOverlay();
}
show = !show;
}
void _showOverlay() {
_overlayEntry = _createOverlayEntry();
Overlay.of(context).insert(_overlayEntry);
}
void _hideOverlay() {
_overlayEntry?.remove();
}
@override
void dispose() {
_hideOverlay();
super.dispose();
}
}

35
lib/views/widgets/StatelessWidget/CupertinoFullscreenDialogTransition/node1_base.dart Normal file
View File

@@ -0,0 +1,35 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/4/11
/// contact me by email 1981462002@qq.com
///
/// 说明: 219 CupertinoFullscreenDialogTransition 0 全页面过渡变换 创建一个 iOS 风格的转换，用于唤出全屏对话框。link 216
// {
// "widgetId": 219,
// "name": '组件介绍',
// "priority": 1,
// "subtitle":
// "【child】 : 子组件 【Widget】\n"
// "【linearTransition】 : 是否线性转换 【bool】\n"
// "【primaryRouteAnimation】 : 初始路由动画 【Animation<double>】\n"
// "【secondaryRouteAnimation】 : 第二路由动画 【Animation<double>】",
// }
class CupertinoFullscreenDialogTransitionDemo extends StatelessWidget {
final String info =
'和 CupertinoPageTransition 一样，该组件底层基于 SlideTransition 组件实现，'
'主要用途是模仿 iOS 风格，用于唤出全屏对话框动画过渡效果。'
'源码中唯一的使用处是 CupertinoPageRoute 处理路由跳转动画时，一般不会单独使用。'
'当【route.fullscreenDialog】为 true 时，会使用 CupertinoFullscreenDialogTransition 组件，否则使用 CupertinoPageTransition 组件。'
'其中个属性信息和 CupertinoPageTransition 组件一致，详见之。';
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue.withOpacity(0.1),
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
child: Text(info),
);
}
}

35
lib/views/widgets/StatelessWidget/CupertinoPageTransition/node1_base.dart Normal file
View File

@@ -0,0 +1,35 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/4/11
/// contact me by email 1981462002@qq.com
///
/// 说明: 216 CupertinoPageTransition 0 风格的页面过渡动画变换 提供一个 iOS 风格的页面过渡动画。 link 219
// {
// "widgetId": 216,
// "name": 'CupertinoPageTransition 介绍',
// "priority": 1,
// "subtitle":
// "【child】 : 子组件 【Widget】\n"
// "【linearTransition】 : 是否线性转换 【bool】\n"
// "【primaryRouteAnimation】 : 初始路由动画 【Animation<double>】\n"
// "【secondaryRouteAnimation】 : 第二路由动画 【Animation<double>】",
// }
class CupertinoPageTransitionDemo extends StatelessWidget {
final String info =
'该组件底层基于 SlideTransition 组件实现，主要用途是模仿 iOS 风格，处理页面间跳转的过渡动画。'
'源码中唯一的使用处是 CupertinoPageRoute 处理路由跳转动画时，一般不会单独使用。'
'如 A 跳转到 B， primaryRouteAnimation 和 secondaryRouteAnimation 都是一个 0.0->1.0 的动画，'
'前者用于处理 B 界面进入过渡动画；后者用于处理 A 界面被覆盖的过渡动画。'
;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue.withOpacity(0.1),
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
child: Text(info ),
);
}
}

30
lib/views/widgets/StatelessWidget/HtmlElementView/node1_base.dart Normal file
View File

@@ -0,0 +1,30 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/4/11
/// contact me by email 1981462002@qq.com
///
/// 说明: 213 HtmlElementView 0 在 Flutter Web 的 Widget 层次结构中嵌入一个 HTML 元素。
// {
// "widgetId": 213,
// "name": 'HtmlElementView 介绍',
// "priority": 1,
// "subtitle":
// "【child】 : 子组件 【child】\n"
// "【viewType】 : html元素唯一表识 【String】",
// }
class HtmlElementViewDemo extends StatelessWidget {
final String info =
'该组件只能用于 Flutter Web 中，嵌入 Html 元素的较为昂贵。'
'内部基于 PlatformViewLink 和 PlatformViewSurface 组件实现。';
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue.withOpacity(0.1),
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
child: Text(info),
);
}
}