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

✨ AutomaticKeepAlive、KeepAlive、ScrollView、BoxScrollView、SliverWithKeepAliveWidget、CupertinoUserInterfaceLevel、InheritedTheme、ListWheelViewport

Browse Source
This commit is contained in:
toly
2020-12-19 21:00:50 +08:00
parent 2e00497708
commit 4fcac5c25e
19 changed files with 876 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/flutter.db
View File

Binary file not shown.

58
lib/views/widgets/Other/ListWheelViewport/node1_base.dart Normal file
View File

@@ -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<Color> 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()}";
}

61
lib/views/widgets/Other/ListWheelViewport/node2_perspective.dart Normal file
View File

@@ -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<Color> 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()}";
}

68
lib/views/widgets/Other/ListWheelViewport/node3_magnifier.dart Normal file
View File

@@ -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<Color> 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()}";
}

64
lib/views/widgets/Other/ListWheelViewport/node4_opacity.dart Normal file
View File

@@ -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<Color> 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()}";
}

42
lib/views/widgets/ProxyWidget/CupertinoUserInterfaceLevel/node1_base.dart Normal file
View File

@@ -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()),
);
}
}

60
lib/views/widgets/ProxyWidget/InheritedTheme/node1_base.dart Normal file
View File

@@ -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'),
// ));
// },
// ),
// );
}
}

119
lib/views/widgets/ProxyWidget/KeepAlive/node1_base.dart Normal file
View File

@@ -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<Color> 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<ColorBox> 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;
}

2
lib/views/widgets/Sliver/CustomScrollView/node1_base.dart
View File

@@ -14,7 +14,7 @@ import 'package:flutter/material.dart';
// "【controller】 : 控制器 【ScrollController】",
// }
class CustomScrollViewDemo extends StatelessWidget {
final data = <Color>[
final List<Color> data = [
Colors.purple[50],
Colors.purple[100],
Colors.purple[200],

35
lib/views/widgets/Sliver/SliverWithKeepAliveWidget/node1_base.dart Normal file
View File

@@ -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),
);
}
}

118
lib/views/widgets/StatefulWidget/AutomaticKeepAlive/node1_base.dart Normal file
View File

@@ -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<Color> 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<ColorBox> 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;
}

86
lib/views/widgets/StatelessWidget/BoxScrollView/node1_base.dart Normal file
View File

@@ -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<Color> 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),
);
}

115
lib/views/widgets/StatelessWidget/ScrollView/node1_base.dart Normal file
View File

@@ -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<Color> 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<Widget> 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()}";
}

6
lib/views/widgets/exp/other_unit.dart
View File

@@ -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';
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';

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

@@ -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';

1
lib/views/widgets/exp/sliver_unit.dart
View File

@@ -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';

1
lib/views/widgets/exp/stateful_unit.dart
View File

@@ -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';

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

@@ -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';

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

@@ -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(),
];