diff --git a/assets/flutter.db b/assets/flutter.db index 254bc1e..3a54610 100644 Binary files a/assets/flutter.db and b/assets/flutter.db differ diff --git a/lib/views/widgets/ProxyWidget/TableCell/node1_base.dart b/lib/views/widgets/ProxyWidget/TableCell/node1_base.dart new file mode 100644 index 0000000..fb313d1 --- /dev/null +++ b/lib/views/widgets/ProxyWidget/TableCell/node1_base.dart @@ -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 { + 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: [ + 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); +} diff --git a/lib/views/widgets/SingleChildRenderObjectWidget/AnnotatedRegion/node1_base.dart b/lib/views/widgets/SingleChildRenderObjectWidget/AnnotatedRegion/node1_base.dart new file mode 100644 index 0000000..2220857 --- /dev/null +++ b/lib/views/widgets/SingleChildRenderObjectWidget/AnnotatedRegion/node1_base.dart @@ -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( + 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,), + ], + ), + ), + ), + ); + } +} diff --git a/lib/views/widgets/SingleChildRenderObjectWidget/CupertinoTextSelectionToolbar/node1_base.dart b/lib/views/widgets/SingleChildRenderObjectWidget/CupertinoTextSelectionToolbar/node1_base.dart new file mode 100644 index 0000000..4896231 --- /dev/null +++ b/lib/views/widgets/SingleChildRenderObjectWidget/CupertinoTextSelectionToolbar/node1_base.dart @@ -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), + ), + ); + } +} diff --git a/lib/views/widgets/SingleChildRenderObjectWidget/SizeChangedLayoutNotifier/node1_base.dart b/lib/views/widgets/SingleChildRenderObjectWidget/SizeChangedLayoutNotifier/node1_base.dart new file mode 100644 index 0000000..9e3b22f --- /dev/null +++ b/lib/views/widgets/SingleChildRenderObjectWidget/SizeChangedLayoutNotifier/node1_base.dart @@ -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 { + @override + Widget build(BuildContext context) { + return NotificationListener( + onNotification: _onNotification, + child: ChangeableBox(), + ); + } + + bool _onNotification(SizeChangedLayoutNotification notification) { + print('---------SizeChangedLayoutNotification------'); + return false; + } +} + +class ChangeableBox extends StatefulWidget { + @override + _ChangeableBoxState createState() => _ChangeableBoxState(); +} + +class _ChangeableBoxState extends State { + 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; + }); + } +} diff --git a/lib/views/widgets/Sliver/SliverLayoutBuilder/node1_base.dart b/lib/views/widgets/Sliver/SliverLayoutBuilder/node1_base.dart new file mode 100644 index 0000000..cacd904 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverLayoutBuilder/node1_base.dart @@ -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 { + final 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], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()), + slivers: [ + _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 _buildActions() => [ + 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), + ), + ), + ); + } +} diff --git a/lib/views/widgets/StatefulWidget/CupertinoTabView/node1_base.dart b/lib/views/widgets/StatefulWidget/CupertinoTabView/node1_base.dart new file mode 100644 index 0000000..dce35fb --- /dev/null +++ b/lib/views/widgets/StatefulWidget/CupertinoTabView/node1_base.dart @@ -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】\n" +// "【routes】 : 路由映射 【Map】\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(), + ], + )), + ); + } +} diff --git a/lib/views/widgets/StatefulWidget/DefaultTabController/node1_base.dart b/lib/views/widgets/StatefulWidget/DefaultTabController/node1_base.dart new file mode 100644 index 0000000..34791a2 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/DefaultTabController/node1_base.dart @@ -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 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(), + ), + ), + ), + ); + } +} diff --git a/lib/views/widgets/StatefulWidget/DraggableScrollableSheet/node1_base.dart b/lib/views/widgets/StatefulWidget/DraggableScrollableSheet/node1_base.dart new file mode 100644 index 0000000..0060d27 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/DraggableScrollableSheet/node1_base.dart @@ -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 = [ + 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()}"; +} diff --git a/lib/views/widgets/StatefulWidget/DrawerController/node1_base.dart b/lib/views/widgets/StatefulWidget/DrawerController/node1_base.dart new file mode 100644 index 0000000..06653af --- /dev/null +++ b/lib/views/widgets/StatefulWidget/DrawerController/node1_base.dart @@ -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 { + final GlobalKey _drawerKey = + GlobalKey(); + + 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(); + } + } +} diff --git a/lib/views/widgets/StatefulWidget/GlowingOverscrollIndicator/node1_base.dart b/lib/views/widgets/StatefulWidget/GlowingOverscrollIndicator/node1_base.dart new file mode 100644 index 0000000..c5f62e4 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/GlowingOverscrollIndicator/node1_base.dart @@ -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 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, + ), + ), + ); + } +} diff --git a/lib/views/widgets/StatefulWidget/MergeableMaterial/node1_base.dart b/lib/views/widgets/StatefulWidget/MergeableMaterial/node1_base.dart new file mode 100644 index 0000000..c4b9843 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/MergeableMaterial/node1_base.dart @@ -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】", +// } + +class MergeableMaterialDemo extends StatefulWidget { + @override + _MergeableMaterialDemoState createState() => _MergeableMaterialDemoState(); +} + +class _MergeableMaterialDemoState extends State { + List 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 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()}"; +} diff --git a/lib/views/widgets/StatelessWidget/CheckedModeBanner/node1_base.dart b/lib/views/widgets/StatelessWidget/CheckedModeBanner/node1_base.dart new file mode 100644 index 0000000..c42a5c8 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/CheckedModeBanner/node1_base.dart @@ -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), + ), + ), + ); + } +} diff --git a/lib/views/widgets/StatelessWidget/DraggableScrollableActuator/node1_base.dart b/lib/views/widgets/StatelessWidget/DraggableScrollableActuator/node1_base.dart new file mode 100644 index 0000000..bb260c5 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/DraggableScrollableActuator/node1_base.dart @@ -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 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()}"; +} diff --git a/lib/views/widgets/exp/proxy_unit.dart b/lib/views/widgets/exp/proxy_unit.dart index 7e6ccf9..e4f0bfd 100644 --- a/lib/views/widgets/exp/proxy_unit.dart +++ b/lib/views/widgets/exp/proxy_unit.dart @@ -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'; diff --git a/lib/views/widgets/exp/render_object_unit.dart b/lib/views/widgets/exp/render_object_unit.dart index 78d2773..9aacb83 100644 --- a/lib/views/widgets/exp/render_object_unit.dart +++ b/lib/views/widgets/exp/render_object_unit.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'; diff --git a/lib/views/widgets/exp/sliver_unit.dart b/lib/views/widgets/exp/sliver_unit.dart index 3de62a2..c4128c2 100644 --- a/lib/views/widgets/exp/sliver_unit.dart +++ b/lib/views/widgets/exp/sliver_unit.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'; diff --git a/lib/views/widgets/exp/stateful_unit.dart b/lib/views/widgets/exp/stateful_unit.dart index 057b17f..c4b1640 100644 --- a/lib/views/widgets/exp/stateful_unit.dart +++ b/lib/views/widgets/exp/stateful_unit.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'; diff --git a/lib/views/widgets/exp/stateless_unit.dart b/lib/views/widgets/exp/stateless_unit.dart index edb9a71..da1831c 100644 --- a/lib/views/widgets/exp/stateless_unit.dart +++ b/lib/views/widgets/exp/stateless_unit.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'; diff --git a/lib/views/widgets/widgets_map.dart b/lib/views/widgets/widgets_map.dart index 521db88..bf99dcd 100644 --- a/lib/views/widgets/widgets_map.dart +++ b/lib/views/widgets/widgets_map.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(),