forked from lxm_flutter/FlutterUnit
✨ 添加组件 AnnotatedRegion、CheckedModeBanner、CupertinoTabView、CupertinoTextSelectionToolbar、DefaultTabController、DraggableScrollableActuator、DraggableScrollableSheet、DrawerController、GlowingOverscrollIndicator、 MergeableMaterial、SizeChangedLayoutNotifier、SliverLayoutBuilder、TableCell
This commit is contained in:
toly
Binary file not shown.
79
lib/views/widgets/ProxyWidget/TableCell/node1_base.dart
Normal file
79
lib/views/widgets/ProxyWidget/TableCell/node1_base.dart
Normal file
@@ -0,0 +1,79 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 317 TableCell 表室 必须在 Table 组件的后代中使用，用于控制表孩子的竖直方向对齐方式，并没是什么太大的作用。
|
||||
// {
|
||||
// "widgetId": 317,
|
||||
// "name": 'TableCell基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【child】 : 组件 【Widget】\n"
|
||||
// "【verticalAlignment】 : 竖直对齐方式 【TableCellVerticalAlignment】",
|
||||
// }
|
||||
|
||||
class TableCellDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var title = _ItemBean("单位称", "量纲", "单位", "单位名称", "单位符号");
|
||||
var m = _ItemBean("长度", "L", "1m", "米", "m");
|
||||
var kg = _ItemBean("质量", "M", "1Kg", "千克", "Kg");
|
||||
var s = _ItemBean("时间", "T", "1s", "秒", "s");
|
||||
var a = _ItemBean("安培", "Ι", "1A", "安培", "A");
|
||||
var k = _ItemBean("热力学温度", "θ", "1K", "开尔文", "K");
|
||||
var mol = _ItemBean("物质的量", "N", "1mol", "摩尔", "mol");
|
||||
var cd = _ItemBean("发光强度", "J", "1cd", "坎德拉", "cd");
|
||||
|
||||
var data = <_ItemBean>[title, m, kg, s, a, k, mol, cd];
|
||||
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Table(
|
||||
columnWidths: const <int, TableColumnWidth>{
|
||||
0: FixedColumnWidth(80.0),
|
||||
1: FixedColumnWidth(80.0),
|
||||
2: FixedColumnWidth(80.0),
|
||||
3: FixedColumnWidth(80.0),
|
||||
4: FixedColumnWidth(80.0),
|
||||
},
|
||||
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
|
||||
border: TableBorder.all(
|
||||
color: Colors.orangeAccent, width: 1.0, style: BorderStyle.solid),
|
||||
children: data
|
||||
.map((item) => TableRow(children: <Widget>[
|
||||
TableCell(
|
||||
verticalAlignment: TableCellVerticalAlignment.bottom,
|
||||
child: Text(
|
||||
item.name,
|
||||
style: TextStyle(color: Colors.blue),
|
||||
)),
|
||||
TableCell(
|
||||
verticalAlignment: TableCellVerticalAlignment.baseline,
|
||||
child: Text(item.symbol)),
|
||||
TableCell(
|
||||
verticalAlignment: TableCellVerticalAlignment.top,
|
||||
child: Text(item.unitSymbol)),
|
||||
TableCell(
|
||||
verticalAlignment: TableCellVerticalAlignment.fill,
|
||||
child: Text(item.unitName)),
|
||||
TableCell(
|
||||
verticalAlignment: TableCellVerticalAlignment.middle,
|
||||
child: Container(height: 30, child: Text(item.unit)),
|
||||
),
|
||||
]))
|
||||
.toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ItemBean {
|
||||
String name;
|
||||
String symbol;
|
||||
String unit;
|
||||
String unitName;
|
||||
String unitSymbol;
|
||||
|
||||
_ItemBean(this.name, this.symbol, this.unit, this.unitName, this.unitSymbol);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 288 AnnotatedRegion 有一个泛型，源码中仅适用该组件改变状态量、导航栏样式，泛型通常为SystemUiOverlayStyle。
|
||||
// {
|
||||
// "widgetId": 288,
|
||||
// "name": 'AnnotatedRegion改变状态量样式',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【value】 : 值 【T】\n"
|
||||
// "【sized】 : 是否提供大小 【bool】\n"
|
||||
// "【child】 : 子组件 【Widget】",
|
||||
// }
|
||||
|
||||
|
||||
class AnnotatedRegionDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: ElevatedButton(
|
||||
onPressed: (){
|
||||
Navigator.push(context,
|
||||
MaterialPageRoute(builder: (context) => AnnotatedRegionTestPage()),
|
||||
);
|
||||
},
|
||||
child: Text("进入 AnnotatedRegion 测试页"),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class AnnotatedRegionTestPage extends StatelessWidget{
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final SystemUiOverlayStyle overlayStyle = SystemUiOverlayStyle(
|
||||
systemNavigationBarColor: Colors.green,
|
||||
// 导航栏颜色
|
||||
systemNavigationBarDividerColor: Colors.red,
|
||||
statusBarColor: Colors.blue,
|
||||
systemNavigationBarIconBrightness: Brightness.light,
|
||||
statusBarIconBrightness: Brightness.light,
|
||||
statusBarBrightness: Brightness.light,
|
||||
);
|
||||
|
||||
return AnnotatedRegion<SystemUiOverlayStyle>(
|
||||
value: overlayStyle,
|
||||
child: Scaffold(
|
||||
body: Container(
|
||||
child: Column(
|
||||
children: [
|
||||
Container(height: 56+30.0,color: Colors.blue,
|
||||
alignment: Alignment(0,0.55),
|
||||
child: Row(
|
||||
children: [
|
||||
BackButton(color: Colors.white,),
|
||||
Text("AnnotatedRegion测试",style: TextStyle(color: Colors.white,fontSize: 18),)
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(height: 30,),
|
||||
Text(
|
||||
"上面标题栏背景颜色为蓝色\n"
|
||||
"上面标题栏图标为亮调",
|
||||
|
||||
style: TextStyle(color: Colors.black,fontSize: 18),),
|
||||
Spacer(),
|
||||
Text(
|
||||
"下面导航栏背景颜色为绿色\n"
|
||||
"下面导航栏图标为亮调",
|
||||
|
||||
style: TextStyle(color: Colors.black,fontSize: 18),),
|
||||
SizedBox(height: 30,),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 299 CupertinoTextSelectionToolbar 对文本选择做出响应的 ios 风格的工具栏。
|
||||
// {
|
||||
// "widgetId": 299,
|
||||
// "name": '该组件无法使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【-】 : - 【-】",
|
||||
// }
|
||||
|
||||
class CupertinoTextSelectionToolbarDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
alignment: Alignment.center,
|
||||
padding: EdgeInsets.all(10),
|
||||
width: 300,
|
||||
// color: Theme.of(context).primaryColor,
|
||||
child: Text(
|
||||
"注：此组件私有构造器，外部无法使用，并没有使用价值。",
|
||||
style: TextStyle(color: Colors.red, fontSize: 18),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 294 SizeChangedLayoutNotifier 尺寸变化通告 使用 SizeChangedLayoutNotifier 可以在子组件布局区域发生变化后，发出通知。使用NotificationListener可以进行监听。
|
||||
// {
|
||||
// "widgetId": 294,
|
||||
// "name": '基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【child】 : 组件 【Widget】",
|
||||
// }
|
||||
|
||||
class SizeChangedLayoutNotifierDemo extends StatefulWidget {
|
||||
@override
|
||||
_SizeChangedLayoutNotifierDemoState createState() => _SizeChangedLayoutNotifierDemoState();
|
||||
}
|
||||
|
||||
class _SizeChangedLayoutNotifierDemoState extends State<SizeChangedLayoutNotifierDemo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return NotificationListener<SizeChangedLayoutNotification>(
|
||||
onNotification: _onNotification,
|
||||
child: ChangeableBox(),
|
||||
);
|
||||
}
|
||||
|
||||
bool _onNotification(SizeChangedLayoutNotification notification) {
|
||||
print('---------SizeChangedLayoutNotification------');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
class ChangeableBox extends StatefulWidget {
|
||||
@override
|
||||
_ChangeableBoxState createState() => _ChangeableBoxState();
|
||||
}
|
||||
|
||||
class _ChangeableBoxState extends State<ChangeableBox> {
|
||||
double width = 40;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SizeChangedLayoutNotifier(
|
||||
child: Container(
|
||||
width: width,
|
||||
height: 100,
|
||||
color: Colors.blue,
|
||||
),
|
||||
),
|
||||
Slider(
|
||||
max: 200,
|
||||
min: 20,
|
||||
divisions: 10,
|
||||
value: width,
|
||||
onChanged: _changeWidth,
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _changeWidth(double value) {
|
||||
setState(() {
|
||||
width = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
123
lib/views/widgets/Sliver/SliverLayoutBuilder/node1_base.dart
Normal file
123
lib/views/widgets/Sliver/SliverLayoutBuilder/node1_base.dart
Normal file
@@ -0,0 +1,123 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/src/rendering/sliver.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 304 SliverLayoutBuilder Sliver布局构造器 Sliver家族一员，在滑动过程中可以通过回调出的 SliverConstraints 对象进行子组件的构造。
|
||||
// {
|
||||
// "widgetId": 304,
|
||||
// "name": 'SliverLayoutBuilder基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【builder】 : 组件构造器 【SliverLayoutWidgetBuilder】",
|
||||
// }
|
||||
class SliverLayoutBuilderDemo extends StatefulWidget {
|
||||
@override
|
||||
_SliverLayoutBuilderDemoState createState() =>
|
||||
_SliverLayoutBuilderDemoState();
|
||||
}
|
||||
|
||||
class _SliverLayoutBuilderDemoState extends State<SliverLayoutBuilderDemo> {
|
||||
final data = <Color>[
|
||||
Colors.orange[50],
|
||||
Colors.orange[100],
|
||||
Colors.orange[200],
|
||||
Colors.orange[300],
|
||||
Colors.orange[400],
|
||||
Colors.orange[500],
|
||||
Colors.orange[600],
|
||||
Colors.orange[700],
|
||||
Colors.orange[800],
|
||||
Colors.orange[900],
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 300,
|
||||
child: CustomScrollView(
|
||||
physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
|
||||
slivers: <Widget>[
|
||||
_buildSliverAppBar(),
|
||||
SliverLayoutBuilder(
|
||||
builder: _buildSliver,
|
||||
),
|
||||
_buildSliverList(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSliverList() => SliverFixedExtentList(
|
||||
itemExtent: 50,
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(_, int index) => Container(
|
||||
alignment: Alignment.center,
|
||||
width: 100,
|
||||
height: 60,
|
||||
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),
|
||||
);
|
||||
|
||||
Widget _buildSliverAppBar() {
|
||||
return SliverAppBar(
|
||||
expandedHeight: 120.0,
|
||||
leading: Container(
|
||||
margin: EdgeInsets.all(10),
|
||||
child: Image.asset('assets/images/icon_head.webp')),
|
||||
title: Text('张风捷特烈'),
|
||||
actions: _buildActions(),
|
||||
elevation: 5,
|
||||
pinned: true,
|
||||
backgroundColor: Colors.orange,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
|
||||
collapseMode: CollapseMode.parallax, //视差效果
|
||||
background: Image.asset(
|
||||
"assets/images/caver.webp",
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> _buildActions() => <Widget>[
|
||||
IconButton(
|
||||
onPressed: () {},
|
||||
icon: Icon(
|
||||
Icons.star_border,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
];
|
||||
|
||||
String colorString(Color color) =>
|
||||
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
|
||||
|
||||
Widget _buildSliver(BuildContext context, SliverConstraints constraints) {
|
||||
return SliverToBoxAdapter(
|
||||
child: Container(
|
||||
alignment: Alignment.center,
|
||||
height: constraints.remainingPaintExtent / 3,
|
||||
color: Colors.red,
|
||||
child: Text(
|
||||
"SliverLayoutBuilder",
|
||||
style: TextStyle(color: Colors.white, fontSize: 20),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 229 CupertinoTabView Cupertino页面 CupertinoTabView 可以像 MaterialApp 一样维护一个路由栈。通过 routes 、onGenerateRoute 来构建路由，可以通过 navigatorObservers 监听路由。
|
||||
// {
|
||||
// "widgetId": 229,
|
||||
// "name": 'CupertinoTabView基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【builder】 : 主页构造器 【WidgetBuilder】\n"
|
||||
// "【navigatorObservers】 : 路由监听器 【List<NavigatorObserver>】\n"
|
||||
// "【routes】 : 路由映射 【Map<String, WidgetBuilder>】\n"
|
||||
// "【onGenerateRoute】 : 路由工厂 【RouteFactory】",
|
||||
// }
|
||||
|
||||
class CupertinoTabViewDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => CupertinoTabViewPage()),
|
||||
);
|
||||
},
|
||||
child: Text("进入 CupertinoTabView 测试页"),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class CupertinoTabViewPage extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 300,
|
||||
child: CupertinoTabView(
|
||||
routes: {
|
||||
'/': (context) => HomePage(),
|
||||
'/test_detail': (context) => DetailPage(),
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DetailPage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
navigationBar: CupertinoNavigationBar(
|
||||
middle: Text('我是详情页'),
|
||||
),
|
||||
child: Center(
|
||||
child: Container(
|
||||
width: 200,
|
||||
height: 200,
|
||||
color: Colors.blue,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class HomePage extends StatelessWidget {
|
||||
|
||||
final String info = "CupertinoTabView 可以像 MaterialApp 一样维护一个路由栈。"
|
||||
"通过 routes 、onGenerateRoute 来构建路由，可以通过 navigatorObservers 监听路由。"
|
||||
"在这个路由栈中可以进行指定名称跳转，如下通过 /test_detail 跳到详情页。";
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
navigationBar: CupertinoNavigationBar(
|
||||
middle: Text('我是主页'),
|
||||
),
|
||||
child: Center(child: Column(
|
||||
|
||||
children: [
|
||||
Spacer(),
|
||||
Material(child: Padding(
|
||||
padding: const EdgeInsets.only(left:18.0,right: 18,bottom: 20),
|
||||
child: Text(info),
|
||||
)),
|
||||
CupertinoButton(
|
||||
padding: EdgeInsets.only(left: 10,right: 10),
|
||||
color: Colors.blue,
|
||||
onPressed: () {
|
||||
Navigator.pushNamed(
|
||||
context, "/test_detail"
|
||||
);
|
||||
},
|
||||
child: Text("进入详情页"),
|
||||
),
|
||||
Spacer(),
|
||||
],
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 230 DefaultTabController 默认Tab控制器 在使用TabBar和TabBarView时，需要同一个控制器实现页签和页面的控制。DefaultTabController会在未指定控制器时提供默认控制器，简化使用。
|
||||
// {
|
||||
// "widgetId": 230,
|
||||
// "name": 'DefaultTabController基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【length】 : 页签数量 【int】\n"
|
||||
// "【initialIndex】 : 初始页签索引 【int】\n"
|
||||
// "【child】 : 组件 【Widget】",
|
||||
// }
|
||||
|
||||
class DefaultTabControllerDemo extends StatelessWidget {
|
||||
final List<Tab> tabs = [
|
||||
Tab(text: '青眼白龙'),
|
||||
Tab(text: '黑魔术师'),
|
||||
Tab(text: '混沌战士'),
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 300,
|
||||
child: DefaultTabController(
|
||||
length: tabs.length,
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text("DefaultTabController"),
|
||||
bottom: TabBar(
|
||||
tabs: tabs,
|
||||
),
|
||||
),
|
||||
body: TabBarView(
|
||||
children: tabs.map((Tab tab) {
|
||||
return Center(
|
||||
child: Text(
|
||||
tab.text,
|
||||
style: const TextStyle(fontSize: 20),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter/src/rendering/sliver.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 252 DraggableScrollableSheet 拖滑页 可拖动和滑动的Sheet，可指定最大、最小、最初的分度现在滑动范围。构造器builder需要返回一个可滑动组件。
|
||||
// {
|
||||
// "widgetId": 252,
|
||||
// "name": 'DraggableScrollableSheet基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【initialChildSize】 : 初始分度 【double】\n"
|
||||
// "【minChildSize】 : 最小分度 【double】\n"
|
||||
// "【maxChildSize】 : 最大分度 【double】\n"
|
||||
// "【builder】 : 滑动组件构造器 【ScrollableWidgetBuilder】\n"
|
||||
// "【expand】 : 是否延展 【bool】",
|
||||
// }
|
||||
|
||||
class DraggableScrollableSheetDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => DraggableScrollableSheetPage()),
|
||||
);
|
||||
},
|
||||
child: Text("进入 DraggableScrollableSheet 测试页"),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DraggableScrollableSheetPage extends StatelessWidget {
|
||||
final data = <Color>[
|
||||
Colors.orange[50],
|
||||
Colors.orange[100],
|
||||
Colors.orange[200],
|
||||
Colors.orange[300],
|
||||
Colors.orange[400],
|
||||
Colors.orange[500],
|
||||
Colors.orange[600],
|
||||
Colors.orange[700],
|
||||
Colors.orange[800],
|
||||
Colors.orange[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 Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text("DraggableScrollableSheet"),
|
||||
),
|
||||
body: SizedBox.expand(
|
||||
child: DraggableScrollableSheet(
|
||||
initialChildSize: 0.3,
|
||||
minChildSize: 0.2,
|
||||
maxChildSize: 0.5,
|
||||
expand: true,
|
||||
builder: (BuildContext context, ScrollController scrollController)=>
|
||||
ListView.builder(
|
||||
controller: scrollController,
|
||||
itemCount: data.length,
|
||||
itemBuilder: buildColorItem,
|
||||
),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildColorItem(BuildContext context, int index) {
|
||||
return Container(
|
||||
alignment: Alignment.center,
|
||||
height: 60,
|
||||
color: data[index],
|
||||
child: Text(
|
||||
colorString(data[index]),
|
||||
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()}";
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 257 DrawerController 为 Drawer 组件提供交互行为，一般很少使用。在 Scaffold 组件源码中有使用场景。
|
||||
// {
|
||||
// "widgetId": 257,
|
||||
// "name": 'DrawerController基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【drawerCallback】 : 事件回调 【DrawerCallback】\n"
|
||||
// "【enableOpenDragGesture】 : 是否侧边滑开 【bool】\n"
|
||||
// "【alignment】 : 对齐方式 【DrawerAlignment】\n"
|
||||
// "【scrimColor】 : 背景颜色 【Color】\n"
|
||||
// "【child】 : Drawer组件 【Widget】",
|
||||
// }
|
||||
|
||||
class DrawerControllerDemo extends StatefulWidget {
|
||||
@override
|
||||
_DrawerControllerDemoState createState() => _DrawerControllerDemoState();
|
||||
}
|
||||
|
||||
class _DrawerControllerDemoState extends State<DrawerControllerDemo> {
|
||||
final GlobalKey<DrawerControllerState> _drawerKey =
|
||||
GlobalKey<DrawerControllerState>();
|
||||
|
||||
bool _open = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: Column(
|
||||
children: [
|
||||
ElevatedButton(
|
||||
onPressed: toggleDrawer,
|
||||
child: Text("显隐 Drawer"),
|
||||
),
|
||||
Container(
|
||||
height: 200,
|
||||
child: DrawerController(
|
||||
scrimColor: Colors.blue.withAlpha(88),
|
||||
enableOpenDragGesture: true,
|
||||
key: _drawerKey,
|
||||
alignment: DrawerAlignment.start,
|
||||
drawerCallback: (value) {
|
||||
_open = value;
|
||||
},
|
||||
child: Drawer(
|
||||
child: Container(
|
||||
alignment: Alignment.center,
|
||||
color: Colors.red,
|
||||
child: Text(
|
||||
"I am Drawer!",
|
||||
style: TextStyle(color: Colors.white, fontSize: 18),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void toggleDrawer() {
|
||||
if (_open) {
|
||||
_drawerKey.currentState?.close();
|
||||
} else {
|
||||
print('---open--$_open-------');
|
||||
_drawerKey.currentState?.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter/src/rendering/sliver.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 250 GlowingOverscrollIndicator 孩子为可滑动列表，当滑动到顶部和底部时的指示效果，可指定颜色，没什么太大卵用。是Android和fuchsia系统默认滑动效果。
|
||||
// {
|
||||
// "widgetId": 250,
|
||||
// "name": '基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【showLeading】 : 头部是否生效 【bool】\n"
|
||||
// "【showTrailing】 : 底部是否生效 【bool】\n"
|
||||
// "【axisDirection】 : 轴向 【AxisDirection】\n"
|
||||
// "【color】 : 颜色 【Color】\n"
|
||||
// "【child】 : 子组件 【Widget】",
|
||||
// }
|
||||
|
||||
class GlowingOverscrollIndicatorDemo extends StatelessWidget {
|
||||
final List<Color> data = [
|
||||
Colors.orange[50],
|
||||
Colors.orange[100],
|
||||
Colors.orange[200],
|
||||
Colors.orange[300],
|
||||
Colors.orange[400],
|
||||
Colors.orange[500],
|
||||
Colors.orange[600],
|
||||
Colors.orange[700],
|
||||
Colors.orange[800],
|
||||
Colors.orange[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: GlowingOverscrollIndicator(
|
||||
color: Colors.purple,
|
||||
// showLeading: false,
|
||||
// showTrailing: false,
|
||||
axisDirection: AxisDirection.down,
|
||||
child: ListView.builder(
|
||||
itemBuilder: (_, index) => Container(
|
||||
margin: EdgeInsets.all(10),
|
||||
height: 60,
|
||||
color: data[index],
|
||||
),
|
||||
itemCount: data.length,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 261 MergeableMaterial 可合并材料 用于展示 MergeableMaterialItem 的列表，包括 MaterialSlice(主体) 和 MaterialGap(分隔) 。
|
||||
// {
|
||||
// "widgetId": 261,
|
||||
// "name": 'MergeableMaterial基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【elevation】 : 影深 【double】\n"
|
||||
// "【hasDividers】 : 是否有分隔线 【bool】\n"
|
||||
// "【dividerColor】 : 分隔线颜色 【Color】\n"
|
||||
// "【mainAxis】 : 轴向 【Axis】\n"
|
||||
// "【children】 : 子组件集 【List<MergeableMaterialItem>】",
|
||||
// }
|
||||
|
||||
class MergeableMaterialDemo extends StatefulWidget {
|
||||
@override
|
||||
_MergeableMaterialDemoState createState() => _MergeableMaterialDemoState();
|
||||
}
|
||||
|
||||
class _MergeableMaterialDemoState extends State<MergeableMaterialDemo> {
|
||||
List<MergeableMaterialItem> items=[];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_init(20);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 300,
|
||||
child: SingleChildScrollView(
|
||||
child: MergeableMaterial(
|
||||
elevation: 1,
|
||||
hasDividers: true,
|
||||
dividerColor: Colors.red,
|
||||
children: items,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final List<Color> data = [
|
||||
Colors.orange[50],
|
||||
Colors.orange[100],
|
||||
Colors.orange[200],
|
||||
Colors.orange[300],
|
||||
Colors.orange[400],
|
||||
Colors.orange[500],
|
||||
Colors.orange[600],
|
||||
Colors.orange[700],
|
||||
Colors.orange[800],
|
||||
Colors.orange[900]
|
||||
];
|
||||
|
||||
void _init(int count) {
|
||||
for (int i = 0; i < count; i++) {
|
||||
items.add(MaterialSlice(
|
||||
key: ValueKey(i),
|
||||
child: Container(
|
||||
alignment: Alignment.center,
|
||||
height: 60,
|
||||
color: data[i % data.length],
|
||||
child: Text(colorString(data[i % data.length])),
|
||||
)));
|
||||
if(i!=count-1){
|
||||
items.add(MaterialGap(
|
||||
key: ValueKey(i),
|
||||
size: 5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
String colorString(Color color) =>
|
||||
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 215 CheckedModeBanner 仅在debug运行模式中显示右上角角标，没什么太大卵用。在 MaterialApp 组件源码中有使用场景。
|
||||
// {
|
||||
// "widgetId": 215,
|
||||
// "name": 'CheckedModeBanner基本使用',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【child】 : 组件 【Widget】",
|
||||
// }
|
||||
|
||||
class CheckedModeBannerDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CheckedModeBanner(
|
||||
child: Container(
|
||||
alignment: Alignment.center,
|
||||
width: 250,
|
||||
height: 150,
|
||||
color: Theme.of(context).primaryColor,
|
||||
child: Text(
|
||||
"CheckedModeBanner",
|
||||
style: TextStyle(color: Colors.white, fontSize: 20),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter/src/rendering/sliver.dart';
|
||||
|
||||
/// create by 张风捷特烈 on 2020/9/21
|
||||
/// contact me by email 1981462002@qq.com
|
||||
/// 说明: 221 DraggableScrollableActuator 拖滑重置器 它可以通知后代的 DraggableScrollableSheet，将其位置重置为初始状态。
|
||||
// {
|
||||
// "widgetId": 221,
|
||||
// "name": '基本使用方法',
|
||||
// "priority": 1,
|
||||
// "subtitle":
|
||||
// "【child】 : 子组件 【Widget】\n"
|
||||
// "使用 DraggableScrollableActuator.reset(context) 重置后代 DraggableScrollableSheet 位初始位置。",
|
||||
// }
|
||||
|
||||
class DraggableScrollableActuatorDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => DraggableScrollableActuatorPage()),
|
||||
);
|
||||
},
|
||||
child: Text("进入 DraggableScrollableActuator 测试页"),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DraggableScrollableActuatorPage extends StatelessWidget {
|
||||
final List<Color> data = [
|
||||
Colors.orange[50],
|
||||
Colors.orange[100],
|
||||
Colors.orange[200],
|
||||
Colors.orange[300],
|
||||
Colors.orange[400],
|
||||
Colors.orange[500],
|
||||
Colors.orange[600],
|
||||
Colors.orange[700],
|
||||
Colors.orange[800],
|
||||
Colors.orange[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 Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text("DraggableScrollableActuator"),
|
||||
),
|
||||
body: Container(
|
||||
// height: 400,
|
||||
child: DraggableScrollableActuator(
|
||||
child: Builder(
|
||||
builder: (ctx) => Column(
|
||||
children: [
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
DraggableScrollableActuator.reset(ctx);
|
||||
},
|
||||
child: Text("重置位置"),
|
||||
),
|
||||
Expanded(
|
||||
child: buildSheet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildSheet() => DraggableScrollableSheet(
|
||||
initialChildSize: 0.3,
|
||||
minChildSize: 0.2,
|
||||
maxChildSize: 1,
|
||||
expand: true,
|
||||
builder: (BuildContext context, ScrollController scrollController) =>
|
||||
ListView.builder(
|
||||
controller: scrollController,
|
||||
itemCount: data.length,
|
||||
itemBuilder: buildColorItem,
|
||||
),
|
||||
);
|
||||
|
||||
Widget buildColorItem(BuildContext context, int index) {
|
||||
return Container(
|
||||
alignment: Alignment.center,
|
||||
height: 60,
|
||||
color: data[index],
|
||||
child: Text(
|
||||
colorString(data[index]),
|
||||
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()}";
|
||||
}
|
||||
@@ -26,3 +26,4 @@ export '../ProxyWidget/ToggleButtonsTheme/node1_base.dart';
|
||||
export '../ProxyWidget/ButtonBarTheme/node1_base.dart';
|
||||
export '../ProxyWidget/TooltipTheme/node1_base.dart';
|
||||
export '../ProxyWidget/Directionality/node1_base.dart';
|
||||
export '../ProxyWidget/TableCell/node1_base.dart';
|
||||
|
||||
@@ -32,6 +32,10 @@ export '../SingleChildRenderObjectWidget/CustomSingleChildLayout/node2_offset.da
|
||||
export '../SingleChildRenderObjectWidget/RepaintBoundary/node1_base.dart';
|
||||
export '../SingleChildRenderObjectWidget/RepaintBoundary/node2_save.dart';
|
||||
|
||||
export '../SingleChildRenderObjectWidget/AnnotatedRegion/node1_base.dart';
|
||||
export '../SingleChildRenderObjectWidget/CupertinoTextSelectionToolbar/node1_base.dart';
|
||||
export '../SingleChildRenderObjectWidget/SizeChangedLayoutNotifier/node1_base.dart';
|
||||
|
||||
export '../SingleChildRenderObjectWidget/ConstrainedBox/node1_base.dart';
|
||||
export '../SingleChildRenderObjectWidget/PhysicalModel/node1_base.dart';
|
||||
export '../SingleChildRenderObjectWidget/FractionalTranslation/node1_base.dart';
|
||||
|
||||
@@ -23,3 +23,4 @@ export '../Sliver/CupertinoSliverRefreshControl/node1_base.dart';
|
||||
export '../Sliver/SliverFillRemaining/node1_base.dart';
|
||||
export '../Sliver/SliverIgnorePointer/node1_base.dart';
|
||||
export '../Sliver/SliverAnimatedList/node1_base.dart';
|
||||
export '../Sliver/SliverLayoutBuilder/node1_base.dart';
|
||||
|
||||
@@ -145,6 +145,12 @@ export '../StatefulWidget/WidgetsApp/node1_base.dart' hide HomePage;
|
||||
export '../StatefulWidget/WidgetInspector/node1_base.dart' hide HomePage;
|
||||
export '../StatefulWidget/AnimatedTheme/node1_base.dart';
|
||||
export '../StatefulWidget/AnimatedPhysicalModel/node1_base.dart';
|
||||
export '../StatefulWidget/DefaultTabController/node1_base.dart';
|
||||
export '../StatefulWidget/GlowingOverscrollIndicator/node1_base.dart';
|
||||
export '../StatefulWidget/DraggableScrollableSheet/node1_base.dart';
|
||||
export '../StatefulWidget/DrawerController/node1_base.dart';
|
||||
export '../StatefulWidget/MergeableMaterial/node1_base.dart';
|
||||
export '../StatefulWidget/CupertinoTabView/node1_base.dart' hide HomePage;
|
||||
|
||||
export '../StatefulWidget/TextButton/node1_base.dart';
|
||||
export '../StatefulWidget/TextButton/node2_style.dart';
|
||||
|
||||
@@ -5,6 +5,7 @@ export '../StatelessWidget/AboutListTile/node1_base.dart';
|
||||
export '../StatelessWidget/ActionChip/node1_base.dart';
|
||||
export '../StatelessWidget/AlertDialog/node1_base.dart';
|
||||
export '../StatelessWidget/AnimatedIcon/node1_base.dart';
|
||||
export '../StatelessWidget/CheckedModeBanner/node1_base.dart';
|
||||
export '../StatelessWidget/Card/node1_base.dart';
|
||||
export '../StatelessWidget/Card/node2_shape.dart';
|
||||
export '../StatelessWidget/PreferredSize/node1_base.dart';
|
||||
@@ -12,6 +13,7 @@ export '../StatelessWidget/PreferredSize/node2_adapter.dart';
|
||||
export '../StatelessWidget/Builder/node1_base.dart';
|
||||
export '../StatelessWidget/NavigationToolbar/node1_base.dart';
|
||||
export '../StatelessWidget/CupertinoDialogAction/node1_base.dart';
|
||||
export '../StatelessWidget/DraggableScrollableActuator/node1_base.dart';
|
||||
|
||||
export '../StatelessWidget/CheckboxListTile/node1_base.dart';
|
||||
export '../StatelessWidget/CheckboxListTile/node2_select.dart';
|
||||
|
||||
@@ -133,6 +133,10 @@ class WidgetsMap {
|
||||
return [
|
||||
WidgetsAppDemo(),
|
||||
];
|
||||
case "TableCell":
|
||||
return [
|
||||
TableCellDemo(),
|
||||
];
|
||||
|
||||
case "EditableText":
|
||||
return [
|
||||
@@ -235,6 +239,10 @@ class WidgetsMap {
|
||||
return [
|
||||
CustomCircleAvatar(),
|
||||
];
|
||||
case "SliverLayoutBuilder":
|
||||
return [
|
||||
SliverLayoutBuilderDemo(),
|
||||
];
|
||||
case "Visibility":
|
||||
return [
|
||||
CustomVisibility(),
|
||||
@@ -466,6 +474,51 @@ class WidgetsMap {
|
||||
return [
|
||||
CustomExpansionTile(),
|
||||
];
|
||||
|
||||
case "AnnotatedRegion":
|
||||
return [
|
||||
AnnotatedRegionDemo(),
|
||||
];
|
||||
case "CheckedModeBanner":
|
||||
return [
|
||||
CheckedModeBannerDemo(),
|
||||
];
|
||||
case "DefaultTabController":
|
||||
return [
|
||||
DefaultTabControllerDemo(),
|
||||
];
|
||||
case "CupertinoTabView":
|
||||
return [
|
||||
CupertinoTabViewDemo(),
|
||||
];
|
||||
case "CupertinoTextSelectionToolbar":
|
||||
return [
|
||||
CupertinoTextSelectionToolbarDemo(),
|
||||
];
|
||||
case "DraggableScrollableActuator":
|
||||
return [
|
||||
DraggableScrollableActuatorDemo(),
|
||||
];
|
||||
case "GlowingOverscrollIndicator":
|
||||
return [
|
||||
GlowingOverscrollIndicatorDemo(),
|
||||
];
|
||||
case "DraggableScrollableSheet":
|
||||
return [
|
||||
DraggableScrollableSheetDemo(),
|
||||
];
|
||||
case "DrawerController":
|
||||
return [
|
||||
DrawerControllerDemo(),
|
||||
];
|
||||
case "MergeableMaterial":
|
||||
return [
|
||||
MergeableMaterialDemo(),
|
||||
];
|
||||
case "SizeChangedLayoutNotifier":
|
||||
return [
|
||||
SizeChangedLayoutNotifierDemo(),
|
||||
];
|
||||
case "SelectableText":
|
||||
return [
|
||||
CustomSelectableText(),
|
||||
|
||||
Reference in New Issue
Block a user