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

✨ FractionalTranslation、MouseRegion、CupertinoNavigationBarBackButton、TabPageSelectorIndicator 、TabPageSelector

Browse Source
This commit is contained in:
toly
2020-08-01 10:37:14 +08:00
parent e0878851c7
commit cd02ecb6de
11 changed files with 314 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/flutter.db
View File

Binary file not shown.

68
lib/views/widgets/SingleChildRenderObjectWidget/FractionalTranslation/node1_base.dart Normal file
View File

@@ -0,0 +1,68 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 263 FractionalTranslation 通过offset属性将子组件进行偏移,偏移量为OffSet横纵*子组件大小。
// {
// "widgetId": 263,
// "name": "FractionalTranslation基本使用",
// "priority": 1,
// "subtitle": "【translation】 : 偏移分度值 【Offset】\n"
// "【child】: 子组件 【Widget】",
// }
class FractionalTranslationDemo extends StatefulWidget {
@override
_FractionalTranslationDemoState createState() =>
_FractionalTranslationDemoState();
}
class _FractionalTranslationDemoState extends State<FractionalTranslationDemo> {
var dx = 0.0;
var dy = 0.0;
@override
Widget build(BuildContext context) {
print(dx);
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 200,
height: 100,
alignment: Alignment.topLeft,
color: Colors.grey.withAlpha(33),
child: FractionalTranslation(
translation: Offset(dx, dy),
child: Icon(
Icons.android,
color: Colors.green,
),
),
),
_buildSliderX(),
_buildSliderY()
],
);
}
Widget _buildSliderX() => Slider(
min: -2.0,
max: 10.0,
value: dx,
divisions: 100,
label: 'dx:${dx.toStringAsFixed(1)}',
onChanged: (v) => setState(() => dx = v),
);
Widget _buildSliderY() => Slider(
min: -2.0,
max: 6.0,
value: dy,
divisions: 100,
label: 'dy:${dy.toStringAsFixed(1)}',
onChanged: (v) => setState(() => dy = v),
);
}

69
lib/views/widgets/StatefulWidget/MouseRegion/node1_base.dart Normal file
View File

@@ -0,0 +1,69 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 293 MouseRegion 用于鼠标事件监听的组件,通常用于桌面和Web平台，可监听鼠标的移入、移除、移动事件。
// {
// "widgetId": 293,
// "name": "MouseRegion基本使用",
// "priority": 1,
// "subtitle": "【onEnter】 : 移入事件 【PointerEnterEventListener】\n"
// "【onHover】: 移动事件 【PointerHoverEventListener】\n"
// "【onExit】: 移出事件 【PointerExitEventListener】",
// }
class MouseRegionDemo extends StatefulWidget {
@override
_MouseRegionDemoState createState() => _MouseRegionDemoState();
}
class _MouseRegionDemoState extends State<MouseRegionDemo> {
int _enterCounter = 0;
int _exitCounter = 0;
double x = 0.0;
double y = 0.0;
void _incrementEnter(PointerEvent details) {
setState(() {
_enterCounter++;
});
}
void _incrementExit(PointerEvent details) {
setState(() {
_exitCounter++;
});
}
void _updateLocation(PointerEvent details) {
setState(() {
x = details.position.dx;
y = details.position.dy;
});
}
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.tight(Size(300.0, 200.0)),
child: MouseRegion(
onEnter: _incrementEnter,
onHover: _updateLocation,
onExit: _incrementExit,
child: Container(
color: Colors.lightBlueAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have entered or exited this box this many times:'),
Text(
'$_enterCounter Entries\n$_exitCounter Exits',
style: Theme.of(context).textTheme.headline4,
),
Text(
'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
),
],
),
),
),
);
}
}

25
lib/views/widgets/StatelessWidget/CupertinoNavigationBarBackButton/node1_base.dart Normal file
View File

@@ -0,0 +1,25 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 218 CupertinoNavigationBarBackButton Cupertino风格的导航栏返回按钮,可指定颜色和点击事件,一般不单独使用。
// {
// "widgetId": 218,
// "name": "返回按钮基本使用",
// "priority": 1,
// "subtitle": "【onPressed】 : 点击事件 【VoidCallback】\n"
// "【color】: 颜色 【Color】",
// }
class CupertinoNavigationBarBackButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: CupertinoNavigationBarBackButton(
color: Colors.deepPurpleAccent,
onPressed: ()=>Navigator.of(context).pop(),
),
);
}
}

72
lib/views/widgets/StatelessWidget/TabPageSelector/node1_base.dart Normal file
View File

@@ -0,0 +1,72 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 205 TabPageSelector 通常作为指示器与TabBarView联用,共同使用一个TabController。可指定颜色、大小、选中色。
// {
// "widgetId": 205,
// "name": "TabPageSelector基本使用",
// "priority": 1,
// "subtitle": "【controller】 : 控制器 【TabController】\n"
// "【indicatorSize】: 指示器大小 【double】\n"
// "【selectedColor】: 选中色 【Color】\n"
// "【color】: 颜色 【Color】",
// }
class TabPageSelectorDemo extends StatefulWidget {
@override
_TabPageSelectorDemoState createState() => _TabPageSelectorDemoState();
}
class _TabPageSelectorDemoState extends State<TabPageSelectorDemo>
with SingleTickerProviderStateMixin {
final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: tabs.length);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
height: 200,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(color: Colors.purple, child: _buildTableBarView()),
Positioned(
bottom: 10,
child: buildTabPageSelector(),
),
],
),
);
}
Widget buildTabPageSelector() => TabPageSelector(
controller: _tabController,
color: Colors.white,
indicatorSize: 10,
selectedColor: Colors.orangeAccent,
);
Widget _buildTableBarView() => TabBarView(
controller: _tabController,
children: tabs
.map((e) => Center(
child: Text(
e,
style: TextStyle(color: Colors.white, fontSize: 20),
)))
.toList());
}

54
lib/views/widgets/StatelessWidget/TabPageSelectorIndicator/node1_base.dart Normal file
View File

@@ -0,0 +1,54 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 206 TabPageSelectorIndicator 一个有边线的圆形组件，可指定大小、颜色、边线色。是TabPageSelector的部分之一，一般不单独使用。
// {
// "widgetId": 206,
// "name": "TabPageSelectorIndicator基本使用",
// "priority": 1,
// "subtitle": "【size】: 大小 【double】\n"
// "【backgroundColor】: 背景色 【Color】\n"
// "【borderColor】: 边线色 【Color】",
// }
class TabPageSelectorIndicatorDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
TabPageSelectorIndicator(
backgroundColor: Colors.greenAccent,
borderColor: Colors.deepPurpleAccent,
size: 15,
),
TabPageSelectorIndicator(
backgroundColor: Colors.blue,
borderColor: Colors.grey,
size: 20,
),
TabPageSelectorIndicator(
backgroundColor: Colors.green,
borderColor: Colors.red,
size: 25,
),
TabPageSelectorIndicator(
backgroundColor: Colors.yellow,
borderColor: Colors.brown,
size: 30,
),
TabPageSelectorIndicator(
backgroundColor: Colors.amber,
borderColor: Colors.purpleAccent,
size: 35,
),
],
),
);
}
}

60
lib/views/widgets/StatelessWidget/zz_no/CupertinoSegmentedControlTest.dart
View File

@@ -1,60 +0,0 @@
import 'dart:math';
import 'package:flutter/cupertino.dart';
//class CupertinoButtonTest extends StatelessWidget {
// CupertinoButtonTest({Key key}) : super(key: key);
//
// @override
// Widget build(BuildContext context) {
// return CupertinoSegmentedControl(
// onValueChanged: (v) {
// print(object)
// },
// pressedColor: Color(0xff7c1c25),
// borderColor: Color(0xffac172a),
// selectedColor: Color(0xffac172a),
// groupValue: value,
// children: {
// 'a': Container(
// alignment: Alignment.center,
// width: 130.0,
// child: Text('a')
// ),
// 'c': Text('C'),
// 'b': Text('B'),
// },
// );
//}
//
class CupertinoSegmentedControlTest extends StatefulWidget {
_Demo createState() => _Demo();
}
class _Demo extends State<CupertinoSegmentedControlTest> {
String value = 'Java';
@override
Widget build(BuildContext context) {
return CupertinoSegmentedControl(
onValueChanged: (v) {
this.setState(() {
value = v;
});
},
pressedColor: CupertinoColors.activeGreen,//点击时颜色
borderColor: CupertinoColors.inactiveGray,//边框颜色
selectedColor: CupertinoColors.activeBlue,//选中的颜色
groupValue: value,//当前值
children: {//对于组件
'Java': Container(
alignment: Alignment.center,
width: 100.0,
child: Text('Java')
),
'Kotlin': Text('Kotlin'),
'Dart': Text('Dart'),
},
);
}
}

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

@@ -29,6 +29,7 @@ export '../SingleChildRenderObjectWidget/CustomSingleChildLayout/node1_base.dart
export '../SingleChildRenderObjectWidget/CustomSingleChildLayout/node2_offset.dart';
export '../SingleChildRenderObjectWidget/ConstrainedBox/node1_base.dart';
export '../SingleChildRenderObjectWidget/FractionalTranslation/node1_base.dart';
export '../SingleChildRenderObjectWidget/ColorFiltered/node1_base.dart';
export '../SingleChildRenderObjectWidget/Baseline/node1_base.dart';
export '../SingleChildRenderObjectWidget/DecoratedBox/node1_base.dart';

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

@@ -53,6 +53,7 @@ export '../StatefulWidget/CupertinoTabBar/node1_base.dart';
export '../StatefulWidget/CupertinoTextField/node1_base.dart';
export '../StatefulWidget/CupertinoTextField/node2_style.dart';
export '../StatefulWidget/ValueListenableBuilder/node1_base.dart';
export '../StatefulWidget/MouseRegion/node1_base.dart';
export '../StatefulWidget/DropdownButton/node1_base.dart';
export '../StatefulWidget/DropdownButton/node2_style.dart';

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

@@ -33,6 +33,10 @@ export '../StatelessWidget/DataTable/node1_base.dart';
export '../StatelessWidget/DataTable/node2_operation.dart';
export '../StatelessWidget/OrientationBuilder/node1_base.dart';
export '../StatelessWidget/Title/node1_base.dart';
export '../StatelessWidget/TabPageSelector/node1_base.dart';
export '../StatelessWidget/TabPageSelectorIndicator/node1_base.dart';
export '../StatelessWidget/TabPageSelectorIndicator/node1_base.dart';
export '../StatelessWidget/CupertinoNavigationBarBackButton/node1_base.dart';
export '../StatelessWidget/CupertinoTheme/node1_base.dart';
export '../StatelessWidget/CupertinoTheme/node2_use.dart';

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

@@ -51,7 +51,26 @@ class WidgetsMap {
return [
CustomBanner(),
];
case "FractionalTranslation":
return [
FractionalTranslationDemo(),
];
case "MouseRegion":
return [
MouseRegionDemo(),
];
case "TabPageSelector":
return [
TabPageSelectorDemo(),
];
case "CupertinoNavigationBarBackButton":
return [
CupertinoNavigationBarBackButtonDemo(),
];
case "TabPageSelectorIndicator":
return [
TabPageSelectorIndicatorDemo(),
];
case "Title":
return [
TitleDemo(),