diff --git a/assets/flutter.db b/assets/flutter.db index 36c48aa..f970057 100644 Binary files a/assets/flutter.db and b/assets/flutter.db differ diff --git a/lib/views/widgets/Other/ListWheelViewport/node1_base.dart b/lib/views/widgets/Other/ListWheelViewport/node1_base.dart new file mode 100644 index 0000000..a5a7390 --- /dev/null +++ b/lib/views/widgets/Other/ListWheelViewport/node1_base.dart @@ -0,0 +1,58 @@ +import 'package:flutter/gestures.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 291 ListWheelViewport 列表滚轮视口 一个将孩子列表显示在柱状滚轮上的视口，是 ListWheelScrollView、CupertinoPicker 的底层依赖。 +/// link 179,139,137,253 +/// +// { +// "widgetId": 291, +// "name": 'ListWheelViewport 简单使用', +// "priority": 1, +// "subtitle": +// "【itemExtent】 : 轴向item尺寸 【double】\n" +// "【offset】 : 视口偏移 【ViewportOffset】\n" +// "【childDelegate】 : 孩子代理构造器 【ListWheelChildDelegate】", +// } + +class ListWheelViewportDemo extends StatelessWidget { + final List data = [ + Colors.blue[50], Colors.blue[100], Colors.blue[200], + Colors.blue[300], Colors.blue[400], Colors.blue[500], + Colors.blue[600], Colors.blue[700], Colors.blue[800], + Colors.blue[900], Colors.blue[800], Colors.blue[700], + Colors.blue[600], Colors.blue[500], Colors.blue[400], + Colors.blue[300], Colors.blue[200], Colors.blue[100], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 250, + width: 320, + child: Scrollable( + axisDirection: AxisDirection.down, + physics: BouncingScrollPhysics(), + dragStartBehavior: DragStartBehavior.start, + viewportBuilder: (ctx, position) => ListWheelViewport( + itemExtent: 100, + offset: position, + childDelegate: ListWheelChildLoopingListDelegate( + children: data.map((e) => _buildItem(e)).toList()), + )), + ); + } + + Widget _buildItem(Color color) => Container( + alignment: Alignment.center, + color: color, + child: Text(colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2) + ])), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Other/ListWheelViewport/node2_perspective.dart b/lib/views/widgets/Other/ListWheelViewport/node2_perspective.dart new file mode 100644 index 0000000..120ee55 --- /dev/null +++ b/lib/views/widgets/Other/ListWheelViewport/node2_perspective.dart @@ -0,0 +1,61 @@ +import 'dart:math'; + +import 'package:flutter/gestures.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 291, +// "name": 'ListWheelViewport 透视效果', +// "priority": 2, +// "subtitle": +// "【perspective】 : 透视参数 【double】\n" +// "【squeeze】 : 挤压值 【double】\n" +// "【diameterRatio】 : 直径分率 【double】", +// } + +class ListWheelViewportDemo2 extends StatelessWidget { + final List data = [ + Colors.blue[50], Colors.blue[100], Colors.blue[200], + Colors.blue[300], Colors.blue[400], Colors.blue[500], + Colors.blue[600], Colors.blue[700], Colors.blue[800], + Colors.blue[900], Colors.blue[800], Colors.blue[700], + Colors.blue[600], Colors.blue[500], Colors.blue[400], + Colors.blue[300], Colors.blue[200], Colors.blue[100], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 250, + width: 320, + child: Scrollable( + axisDirection: AxisDirection.down, + physics: BouncingScrollPhysics(), + dragStartBehavior: DragStartBehavior.start, + viewportBuilder: (ctx, position) => ListWheelViewport( + perspective: 0.008, + squeeze: 1, + diameterRatio: 2, + itemExtent: 50, + offset: position, + childDelegate: ListWheelChildLoopingListDelegate( + children: data.map((e) => _buildItem(e)).toList()), + )), + ); + } + + Widget _buildItem(Color color) => Container( + alignment: Alignment.center, + color: color, + child: Text(colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2) + ])), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Other/ListWheelViewport/node3_magnifier.dart b/lib/views/widgets/Other/ListWheelViewport/node3_magnifier.dart new file mode 100644 index 0000000..1a3d377 --- /dev/null +++ b/lib/views/widgets/Other/ListWheelViewport/node3_magnifier.dart @@ -0,0 +1,68 @@ +import 'dart:math'; + +import 'package:flutter/gestures.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: +/// +// { +// "widgetId": 291, +// "name": 'ListWheelViewport 放大', +// "priority": 3, +// "subtitle": +// "【useMagnifier】 : 是否放大 【bool】\n" +// "【magnification】 : 放大比例 【double】\n" +// "【clipBehavior】 : 剪裁行为 【Clip】\n" +// "【renderChildrenOutsideViewport】 : 出视野是否渲染 【bool】", +// } + +class ListWheelViewportDemo3 extends StatelessWidget { + final List data = [ + Colors.blue[50], Colors.blue[100], Colors.blue[200], + Colors.blue[300], Colors.blue[400], Colors.blue[500], + Colors.blue[600], Colors.blue[700], Colors.blue[800], + Colors.blue[900], Colors.blue[800], Colors.blue[700], + Colors.blue[600], Colors.blue[500], Colors.blue[400], + Colors.blue[300], Colors.blue[200], Colors.blue[100], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 250, + width: 320, + // color: Colors.red, + child: Scrollable( + axisDirection: AxisDirection.down, + physics: BouncingScrollPhysics(), + dragStartBehavior: DragStartBehavior.start, + viewportBuilder: (ctx, position) => ListWheelViewport( + perspective: 0.008, + squeeze: 1, + diameterRatio: 2, + itemExtent: 50, + useMagnifier: true, + magnification: 2, + renderChildrenOutsideViewport: true, + clipBehavior: Clip.none, + offset: position, + childDelegate: ListWheelChildLoopingListDelegate( + children: data.map((e) => _buildItem(e)).toList()), + )), + ); + } + + Widget _buildItem(Color color) => Container( + alignment: Alignment.center, + color: color, + child: Text(colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2) + ])), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Other/ListWheelViewport/node4_opacity.dart b/lib/views/widgets/Other/ListWheelViewport/node4_opacity.dart new file mode 100644 index 0000000..620e7b2 --- /dev/null +++ b/lib/views/widgets/Other/ListWheelViewport/node4_opacity.dart @@ -0,0 +1,64 @@ +import 'dart:math'; + +import 'package:flutter/gestures.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: +/// +// { +// "widgetId": 291, +// "name": '偏移和透明度', +// "priority": 4, +// "subtitle": +// "【offAxisFraction】 : 轴中心偏移比 【double】\n" +// "【overAndUnderCenterOpacity】 : 放大器之外的透明度 【double】", +// } + +class ListWheelViewportDemo4 extends StatelessWidget { + final List data = [ + Colors.blue[50], Colors.blue[100], Colors.blue[200], + Colors.blue[300], Colors.blue[400], Colors.blue[500], + Colors.blue[600], Colors.blue[700], Colors.blue[800], + Colors.blue[900], Colors.blue[800], Colors.blue[700], + Colors.blue[600], Colors.blue[500], Colors.blue[400], + Colors.blue[300], Colors.blue[200], Colors.blue[100], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 250, + width: 320, + // color: Colors.red, + child: Scrollable( + axisDirection: AxisDirection.down, + physics: BouncingScrollPhysics(), + dragStartBehavior: DragStartBehavior.start, + viewportBuilder: (ctx, position) => ListWheelViewport( + perspective: 0.008, + squeeze: 1, + diameterRatio: 2, + offAxisFraction: 0.2, + overAndUnderCenterOpacity: 0.4, + itemExtent: 50, + offset: position, + childDelegate: ListWheelChildLoopingListDelegate( + children: data.map((e) => _buildItem(e)).toList()), + )), + ); + } + + Widget _buildItem(Color color) => Container( + alignment: Alignment.center, + color: color, + child: Text(colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2) + ])), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/ProxyWidget/CupertinoUserInterfaceLevel/node1_base.dart b/lib/views/widgets/ProxyWidget/CupertinoUserInterfaceLevel/node1_base.dart new file mode 100644 index 0000000..c34a93f --- /dev/null +++ b/lib/views/widgets/ProxyWidget/CupertinoUserInterfaceLevel/node1_base.dart @@ -0,0 +1,42 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-29 +/// contact me by email 1981462002@qq.com +/// 说明: 337 CupertinoUserInterfaceLevel 用户接口等级 +/// ios 中的概念，内容可视级别 UIUserInterfaceLevel ，分为 base 和 elevated。作为一个 InheritedWidget ，主要就是共享该数据。 + +// { +// "widgetId": 337, +// "name": 'CupertinoUserInterfaceLevel 介绍', +// "priority": 1, +// "subtitle": +// "CupertinoUserInterfaceLevel.of(context) 可以获取 CupertinoUserInterfaceLevelData 数据。也可以使用该组件设置该数据与子树共享。关于数据原图详见: https://developer.apple.com/documentation/uikit/uiuserinterfacelevel", +// } + +class CupertinoUserInterfaceLevelDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + + return CupertinoUserInterfaceLevel( + data: CupertinoUserInterfaceLevelData.elevated, + child: LevelShower() + ); + } + +} + +class LevelShower extends StatelessWidget { + @override + Widget build(BuildContext context) { + CupertinoUserInterfaceLevelData data = CupertinoUserInterfaceLevel.of(context); + return Container( + height: 150, + alignment: Alignment.center, + color: Theme.of(context).primaryColor.withOpacity(0.1), + child: Text(data.toString()), + ); + } +} + + diff --git a/lib/views/widgets/ProxyWidget/InheritedTheme/node1_base.dart b/lib/views/widgets/ProxyWidget/InheritedTheme/node1_base.dart new file mode 100644 index 0000000..6ff4199 --- /dev/null +++ b/lib/views/widgets/ProxyWidget/InheritedTheme/node1_base.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 345 InheritedTheme 传承主题 +/// 它是抽象类，有非常多的 XXXTheme 相关子类，用于定义颜色、文字样式等属性，在子树中共享这些属性。 +/// link 324,326,328,329 +/// +// { +// "widgetId": 345, +// "name": 'InheritedTheme 介绍', +// "priority": 1, +// "subtitle": +// "InheritedTheme.capture 可以抓取上层主题，获取 CapturedThemes 对象，通过该对象 wrap 方法可以跨路由使用抓到的主题。", +// } + +class InheritedThemeDemo extends StatelessWidget { + + @override + Widget build(BuildContext context) { + return DefaultTextStyle( + style: TextStyle(fontSize: 24, color: Colors.blue), + child: TestBody(), + ); + } +} + +class TestBody extends StatelessWidget { + @override + Widget build(BuildContext context) { + + return GestureDetector( + onTap: () => _toNextPage(context), + child: Container( + height: 60, + margin: EdgeInsets.only(left: 40,right: 40), + alignment: Alignment.center, + color: Theme.of(context).primaryColor.withOpacity(0.1), + child: Text('点我进入下页'))); + } + + void _toNextPage(BuildContext context) { + // final NavigatorState navigator = Navigator.of(context); + // final CapturedThemes themes = + // InheritedTheme.capture(from: context, to: navigator.context); + // + // + // Navigator.of(context).push( + // MaterialPageRoute( + // builder: (BuildContext _) { + // return themes.wrap(Container( + // alignment: Alignment.center, + // color: Colors.white, + // child: Text('Flutter Unit'), + // )); + // }, + // ), + // ); + } +} diff --git a/lib/views/widgets/ProxyWidget/KeepAlive/node1_base.dart b/lib/views/widgets/ProxyWidget/KeepAlive/node1_base.dart new file mode 100644 index 0000000..135d896 --- /dev/null +++ b/lib/views/widgets/ProxyWidget/KeepAlive/node1_base.dart @@ -0,0 +1,119 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 316 KeepAlive 保活 在懒加载的列表中，孩子的状态是否需要保活。是 AutomaticKeepAlive 的底层实现，一般不单独使用。 +/// link 239 +/// +// { +// "widgetId": 316, +// "name": 'KeepAlive 介绍', +// "priority": 1, +// "subtitle": +// "【child】 : *子组件 【Widget】\n" +// "【keepAlive】 : *是否保活 【bool】\n" +// "在 flutter 框架层中，只用于 AutomaticKeepAlive 中，源码中也说很少单独使用它。该示例展示出 ListView 条目的状态保活。", +// } + +class KeepAliveDemo extends StatelessWidget { + + final List data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + Colors.red[50], + Colors.red[100], + Colors.red[200], + Colors.red[300], + Colors.red[400], + Colors.red[500], + Colors.red[600], + Colors.red[700], + Colors.red[800], + Colors.red[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: ListView.builder( + itemCount: data.length, + itemBuilder: (_, index) => ColorBox( + color: data[index], + index: index, + ), + ), + ); + } +} + +class ColorBox extends StatefulWidget { + final Color color; + final int index; + + ColorBox({Key key, this.color, this.index}) : super(key: key); + + @override + _ColorBoxState createState() => _ColorBoxState(); +} + +class _ColorBoxState extends State with AutomaticKeepAliveClientMixin { + bool _checked = false; + + @override + void initState() { + super.initState(); + _checked = false; + print('-----_ColorBoxState#initState---${widget.index}-------'); + } + + @override + void dispose() { + print('-----_ColorBoxState#dispose---${widget.index}-------'); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + super.build(context); + + return Container( + alignment: Alignment.center, + height: 50, + color: widget.color, + child: Row( + children: [ + SizedBox(width: 60,), + Checkbox( + value: _checked, + onChanged: (v) { + setState(() { + _checked = v; + }); + }, + ), + Text( + "index ${widget.index}: ${colorString(widget.color)}", + style: TextStyle(color: Colors.white, shadows: [ + Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2) + ]), + ), + ], + ), + ); + } + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + @override + bool get wantKeepAlive => true; +} diff --git a/lib/views/widgets/Sliver/CustomScrollView/node1_base.dart b/lib/views/widgets/Sliver/CustomScrollView/node1_base.dart index e4a1af3..2ff09ea 100644 --- a/lib/views/widgets/Sliver/CustomScrollView/node1_base.dart +++ b/lib/views/widgets/Sliver/CustomScrollView/node1_base.dart @@ -14,7 +14,7 @@ import 'package:flutter/material.dart'; // "【controller】 : 控制器 【ScrollController】", // } class CustomScrollViewDemo extends StatelessWidget { - final data = [ + final List data = [ Colors.purple[50], Colors.purple[100], Colors.purple[200], diff --git a/lib/views/widgets/Sliver/SliverWithKeepAliveWidget/node1_base.dart b/lib/views/widgets/Sliver/SliverWithKeepAliveWidget/node1_base.dart new file mode 100644 index 0000000..cd3d8a7 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverWithKeepAliveWidget/node1_base.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 348 SliverWithKeepAliveWidget Sliver保活容器 +/// 它是抽象类，不能单独使用。只有其子类才可以容纳 KeepAlive 的孩子。 +/// link 316,239,188,185,314,186 +/// +// { +// "widgetId": 348, +// "name": 'SliverWithKeepAliveWidget 介绍', +// "priority": 1, +// "subtitle": +// "【key】 : 键 【Key】", +// } + + +class SliverWithKeepAliveWidgetDemo extends StatelessWidget { + final String info = + '只有 SliverWithKeepAliveWidget 之下才可以包含 KeepAlive 组件, 由于其为抽象类，不能直接使用。其子类 SliverMultiBoxAdaptorWidget 也说抽象类，' + '用于容纳多个孩子，帮助它的子类使用 SliverChildDelegate 构建懒加载 children。' + '最终实现类为 SliverGrid、SliverList、SliverPrototypeExtentList、SliverFixedExtentList，表示他们都可以支持 item 的状态保持。' + '除此之外还有 _SliverFillViewportRenderObjectWidget 的私有实现类，这是 PageView 的底层实现，这也是为什么 PageView 也支持保活的原因。'; + + @override + Widget build(BuildContext context) { + + return Container( + color: Theme.of(context).primaryColor.withOpacity(0.1), + padding: EdgeInsets.all(10), + margin: EdgeInsets.all(10), + child: Text(info), + ); + } +} \ No newline at end of file diff --git a/lib/views/widgets/StatefulWidget/AutomaticKeepAlive/node1_base.dart b/lib/views/widgets/StatefulWidget/AutomaticKeepAlive/node1_base.dart new file mode 100644 index 0000000..fe187be --- /dev/null +++ b/lib/views/widgets/StatefulWidget/AutomaticKeepAlive/node1_base.dart @@ -0,0 +1,118 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 239 AutomaticKeepAlive 自动保活 在懒加载的列表中，允许子树请求保持状态，单独使用无效果，需要配合 KeepAliveNotification 使用。 +/// link 59,162,163,165,185,188 +/// +// { +// "widgetId": 239, +// "name": 'AutomaticKeepAlive 介绍', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "在 ListView、SliverList、GridView、SliverGrid、PageView、TabBarView 等列表、切页组件源码中都有使用到 AutomaticKeepAlive 组件。在保活某个 State 时，可以使用 AutomaticKeepAliveClientMixin 进行操作，它是对 KeepAliveNotification 使用的一个简易封装。该示例展示出 ListView 条目的状态保活。", +// } + +class AutomaticKeepAliveDemo extends StatelessWidget { + + final List data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + Colors.red[50], + Colors.red[100], + Colors.red[200], + Colors.red[300], + Colors.red[400], + Colors.red[500], + Colors.red[600], + Colors.red[700], + Colors.red[800], + Colors.red[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: ListView.builder( + itemCount: data.length, + itemBuilder: (_, index) => ColorBox( + color: data[index], + index: index, + ), + ), + ); + } +} + +class ColorBox extends StatefulWidget { + final Color color; + final int index; + + ColorBox({Key key, this.color, this.index}) : super(key: key); + + @override + _ColorBoxState createState() => _ColorBoxState(); +} + +class _ColorBoxState extends State with AutomaticKeepAliveClientMixin { + bool _checked = false; + + @override + void initState() { + super.initState(); + _checked = false; + print('-----_ColorBoxState#initState---${widget.index}-------'); + } + + @override + void dispose() { + print('-----_ColorBoxState#dispose---${widget.index}-------'); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + super.build(context); + + return Container( + alignment: Alignment.center, + height: 50, + color: widget.color, + child: Row( + children: [ + SizedBox(width: 60,), + Checkbox( + value: _checked, + onChanged: (v) { + setState(() { + _checked = v; + }); + }, + ), + Text( + "index ${widget.index}: ${colorString(widget.color)}", + style: TextStyle(color: Colors.white, shadows: [ + Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2) + ]), + ), + ], + ), + ); + } + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + @override + bool get wantKeepAlive => true; +} diff --git a/lib/views/widgets/StatelessWidget/BoxScrollView/node1_base.dart b/lib/views/widgets/StatelessWidget/BoxScrollView/node1_base.dart new file mode 100644 index 0000000..1170546 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/BoxScrollView/node1_base.dart @@ -0,0 +1,86 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 350 BoxScrollView 盒滑动视图 +/// BoxScrollView 类是一个继承自 ScrollView 的抽象类，所以无法直接使用，它的子类有 ListView、GridView。一般不自己实现子类使用它。 +/// link 183,162,163 +/// +// { +// "widgetId": 350, +// "name": 'BoxScrollView 介绍', +// "priority": 1, +// "subtitle": +// "【reverse】 : 是否反向 【bool】\n" +// "【scrollDirection】 : 滑动方向 【Axis】\n" +// "【cacheExtent】 : 缓存长 【double】\n" +// "【dragStartBehavior】 : 拖动行为 【DragStartBehavior】\n" +// "【clipBehavior】 : 裁剪行为 【ClipBehavior】\n" +// "【controller】 : 控制器 【ScrollController】", +// } + +class BoxScrollViewDemo extends StatelessWidget { + + final String info = + 'BoxScrollView 是 ScrollView 的子类，实现了它的抽象方法，且暴露出另一个抽象方法 buildChildLayout，返回 Sliver 家族 Widget，' + '其子类有 ListView 和 GridView，分别使用 Sliver 家族相关List、Gird列表组件实现的。'; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: Column( + children: [ + Container( + color: Colors.blue.withOpacity(0.1), + padding: EdgeInsets.all(10), + margin: EdgeInsets.all(10), + child: Text(info), + ), + Expanded(child: MyBoxScrollView()), + ], + ), + ); + } +} + +class MyBoxScrollView extends BoxScrollView { + + final List data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + @override + Widget buildChildLayout(BuildContext context)=> SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); +} diff --git a/lib/views/widgets/StatelessWidget/ScrollView/node1_base.dart b/lib/views/widgets/StatelessWidget/ScrollView/node1_base.dart new file mode 100644 index 0000000..09e8ed6 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/ScrollView/node1_base.dart @@ -0,0 +1,115 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 349 ScrollView 滑动视图 +/// 该组件用于滑动的支持，该类是一个抽象类，所以无法直接使用，它有很多实现类，如 CustomScrollView、BoxScrollView、ListView、GridView。 +/// link 183,162,163,253,340 +/// +// { +// "widgetId": 349, +// "name": 'ScrollView 介绍', +// "priority": 1, +// "subtitle": +// "【reverse】 : 是否反向 【bool】\n" +// "【scrollDirection】 : 滑动方向 【Axis】\n" +// "【cacheExtent】 : 缓存长 【double】\n" +// "【dragStartBehavior】 : 拖动行为 【DragStartBehavior】\n" +// "【clipBehavior】 : 裁剪行为 【ClipBehavior】\n" +// "【controller】 : 控制器 【ScrollController】", +// } + +class ScrollViewDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: MyScrollView(), + ); + } +} + +class MyScrollView extends ScrollView { + final String info = + 'ScrollView 其内部依靠 Viewport + Scrollable 实现滑动。它只有一个 buildSlivers 的抽象方法，返回 Sliver 家族 Widget 列表，' + '其子类最简单的是 CustomScrollView，将 slivers 交由用户传递，自身打个酱油。' + 'ListView 和 GridView 在底层源码中也是使用 Sliver 家族相关组件实现的。'; + + final List data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + List buildSlivers(BuildContext context) { + return [ + _buildSliverAppBar(), + SliverToBoxAdapter( + child: Container( + color: Colors.blue.withOpacity(0.1), + padding: EdgeInsets.all(10), + margin: EdgeInsets.all(10), + child: Text(info), + ), + ), + _buildSliverFixedExtentList() + ]; + } + + _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.webp')), + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + title: Text( + '张风捷特烈', + style: TextStyle(color: Colors.black, //标题 + shadows: [ + Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2) + ]), + ), + background: Image.asset( + "assets/images/caver.webp", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildSliverFixedExtentList() => SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/exp/other_unit.dart b/lib/views/widgets/exp/other_unit.dart index 276e2c5..8309e77 100644 --- a/lib/views/widgets/exp/other_unit.dart +++ b/lib/views/widgets/exp/other_unit.dart @@ -9,4 +9,8 @@ export '../Other/ErrorWidget/node1_base.dart'; export '../Other/Table/node1_base.dart'; export '../Other/RawImage/node1_base.dart'; export '../Other/PerformanceOverlay/node1_base.dart'; -export '../Other/RenderObjectToWidgetAdapter/node1_base.dart'; \ No newline at end of file +export '../Other/RenderObjectToWidgetAdapter/node1_base.dart'; +export '../Other/ListWheelViewport/node1_base.dart'; +export '../Other/ListWheelViewport/node2_perspective.dart'; +export '../Other/ListWheelViewport/node3_magnifier.dart'; +export '../Other/ListWheelViewport/node4_opacity.dart'; \ No newline at end of file diff --git a/lib/views/widgets/exp/proxy_unit.dart b/lib/views/widgets/exp/proxy_unit.dart index e4f0bfd..966f268 100644 --- a/lib/views/widgets/exp/proxy_unit.dart +++ b/lib/views/widgets/exp/proxy_unit.dart @@ -27,3 +27,6 @@ export '../ProxyWidget/ButtonBarTheme/node1_base.dart'; export '../ProxyWidget/TooltipTheme/node1_base.dart'; export '../ProxyWidget/Directionality/node1_base.dart'; export '../ProxyWidget/TableCell/node1_base.dart'; +export '../ProxyWidget/KeepAlive/node1_base.dart'; +export '../ProxyWidget/CupertinoUserInterfaceLevel/node1_base.dart'; +export '../ProxyWidget/InheritedTheme/node1_base.dart'; diff --git a/lib/views/widgets/exp/sliver_unit.dart b/lib/views/widgets/exp/sliver_unit.dart index c4128c2..290cb25 100644 --- a/lib/views/widgets/exp/sliver_unit.dart +++ b/lib/views/widgets/exp/sliver_unit.dart @@ -24,3 +24,4 @@ export '../Sliver/SliverFillRemaining/node1_base.dart'; export '../Sliver/SliverIgnorePointer/node1_base.dart'; export '../Sliver/SliverAnimatedList/node1_base.dart'; export '../Sliver/SliverLayoutBuilder/node1_base.dart'; +export '../Sliver/SliverWithKeepAliveWidget/node1_base.dart'; diff --git a/lib/views/widgets/exp/stateful_unit.dart b/lib/views/widgets/exp/stateful_unit.dart index cf66146..dab2858 100644 --- a/lib/views/widgets/exp/stateful_unit.dart +++ b/lib/views/widgets/exp/stateful_unit.dart @@ -77,6 +77,7 @@ export '../StatefulWidget/CupertinoScrollbar/node1_base.dart'; export '../StatefulWidget/RawGestureDetector/node1_base.dart'; export '../StatefulWidget/Dismissible/node1_base.dart'; +export '../StatefulWidget/AutomaticKeepAlive/node1_base.dart'; export '../StatefulWidget/AnimatedBuilder/node1_base.dart'; export '../StatefulWidget/TweenAnimationBuilder/node1_base.dart'; export '../StatefulWidget/RawKeyboardListener/node1_base.dart'; diff --git a/lib/views/widgets/exp/stateless_unit.dart b/lib/views/widgets/exp/stateless_unit.dart index 9d18fe8..48b195c 100644 --- a/lib/views/widgets/exp/stateless_unit.dart +++ b/lib/views/widgets/exp/stateless_unit.dart @@ -49,6 +49,8 @@ export '../StatelessWidget/CupertinoPopupSurface/node1_base.dart'; export '../StatelessWidget/Divider/node1_base.dart'; export '../StatelessWidget/Divider/node2_height.dart'; +export '../StatelessWidget/ScrollView/node1_base.dart'; +export '../StatelessWidget/BoxScrollView/node1_base.dart'; export '../StatelessWidget/FloatingActionButton/node1_base.dart'; export '../StatelessWidget/FloatingActionButton/node2_mini.dart'; export '../StatelessWidget/FloatingActionButton/node3_shape.dart'; diff --git a/lib/views/widgets/widgets_map.dart b/lib/views/widgets/widgets_map.dart index a65cc99..c59549f 100644 --- a/lib/views/widgets/widgets_map.dart +++ b/lib/views/widgets/widgets_map.dart @@ -64,6 +64,41 @@ class WidgetsMap { return [ CustomBanner(), ]; + case "AutomaticKeepAlive": + return [ + AutomaticKeepAliveDemo(), + ]; + case "KeepAlive": + return [ + KeepAliveDemo(), + ]; + case "ListWheelViewport": + return [ + ListWheelViewportDemo(), + ListWheelViewportDemo2(), + ListWheelViewportDemo3(), + ListWheelViewportDemo4(), + ]; + case "InheritedTheme": + return [ + InheritedThemeDemo(), + ]; + case "ScrollView": + return [ + ScrollViewDemo(), + ]; + case "SliverWithKeepAliveWidget": + return [ + SliverWithKeepAliveWidgetDemo(), + ]; + case "BoxScrollView": + return [ + BoxScrollViewDemo(), + ]; + case "CupertinoUserInterfaceLevel": + return [ + CupertinoUserInterfaceLevelDemo(), + ]; case "CupertinoSliverNavigationBar": return [ CupertinoSliverNavigationBarDemo(), @@ -91,7 +126,8 @@ class WidgetsMap { case "CupertinoPopupSurface": return [ CupertinoPopupSurfaceDemo(), - ]; case "RenderObjectToWidgetAdapter": + ]; + case "RenderObjectToWidgetAdapter": return [ RenderObjectToWidgetAdapterDemo(), ];