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

✨ 添加OrientationBuilder、MaterialBanner、CupertinoTextField、ValueListenableBuilder组件

Browse Source
This commit is contained in:
toly
2020-07-22 10:52:12 +08:00
parent 918217f46a
commit 9fc4b83e5c
10 changed files with 353 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/flutter.db
View File

Binary file not shown.

70
lib/views/widgets/StatefulWidget/CupertinoTextField/node1_base.dart Normal file
View File

@@ -0,0 +1,70 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 245 CupertinoTextField 1 Cupertino风格的输入框,属性和TextField类似,可指定控制器、文字样式、装饰线、行数限制、游标样式等。接收输入变化、完成输入等事件。
// {
// "widgetId": 245,
// "name": 'CupertinoTextField基础使用',
// "priority": 1,
// "subtitle": "【placeholder】 : 提示文字 【String】\n"
// "【showCursor】 : 是否显示游标 【bool】\n"
// "【minLines】 : 最小行数 【int】\n"
// "【maxLines】 : 最大行数 【int】\n"
// "【padding】 : 内边距 【EdgeInsetsGeometry】\n"
// "【onChanged】 : 变化监听 【ValueChanged<String>】\n"
// "【onTap】: 点击监听 【GestureTapCallback】\n"
// "【onSubmitted】: 提交监听 【ValueChanged<String>】",
// }
class CupertinoTextFieldDemo extends StatefulWidget {
@override
_CupertinoTextFieldDemoState createState() => _CupertinoTextFieldDemoState();
}
class _CupertinoTextFieldDemoState extends State<CupertinoTextFieldDemo> {
var _value = '';
var _color =Colors.black;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Text('输入了:$_value',style: TextStyle(color: _color),),
CupertinoTextField(
placeholder: 'Input Name',
showCursor: true,
minLines: 1,
maxLines: 4,
padding: EdgeInsets.all(8),
onChanged: _onChanged,
onTap: _onTap,
onSubmitted: _onSubmitted,
),
],
),
);
}
void _onChanged(String value) {
setState(() {
_value = value;
});
}
void _onTap() {
print('----_onTap----');
setState(() {
_color=Colors.blue;
});
}
void _onSubmitted(String value) {
print('----_onSubmitted:$value}----');
setState(() {
_color=Colors.black;
});
}
}

41
lib/views/widgets/StatefulWidget/CupertinoTextField/node2_style.dart Normal file
View File

@@ -0,0 +1,41 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 245 CupertinoTextField 1 Cupertino风格的输入框,属性和TextField类似,可指定控制器、文字样式、装饰线、行数限制、游标样式等。接收输入变化、完成输入等事件。
// {
// "widgetId": 245,
// "name": 'CupertinoTextField常用样式属性',
// "priority": 2,
// "subtitle": "【style】 : 输入文字样式 【TextStyle】\n"
// "【prefix】: 前缀组件 【Widget】\n"
// "【prefixMode】: 前缀模式 【OverlayVisibilityMode】\n"
// "【suffix】: 后缀组件 【Widget】\n"
// "【suffixMode】: 后缀模式 【OverlayVisibilityMode】\n"
// "【cursorColor】: 游标颜色 【Color】\n"
// "【cursorWidth】: 游标宽度 【double】\n"
// "【cursorRadius】: 游标圆角 【Radius】\n"
// "【readOnly】: 是否只读 【bool】",
// }
class CupertinoTextFieldStyle extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child:
CupertinoTextField(
style: TextStyle(color: Colors.blue),
prefix: Icon(CupertinoIcons.add),
prefixMode: OverlayVisibilityMode.notEditing,
suffix: Icon(CupertinoIcons.clear),
suffixMode: OverlayVisibilityMode.editing,
cursorColor: Colors.purple,
cursorWidth: 4,
cursorRadius: Radius.circular(2),
readOnly: false,
placeholder: '输入用户名',
)
);
}
}

56
lib/views/widgets/StatefulWidget/ValueListenableBuilder/node1_base.dart Normal file
View File

@@ -0,0 +1,56 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/21
/// contact me by email 1981462002@qq.com
/// 说明: 255 ValueListenableBuilder 1 可以监听一个值，当其变化时通过builder回调能重建界面，避免使用setState刷新。
// {
// "widgetId": 255,
// "name": 'ValueListenableBuilder基本使用',
// "priority": 1,
// "subtitle": "【builder】: 组件构造器 【ValueWidgetBuilder<T>】\n"
// "【valueListenable】: 监听值 【ValueListenable<T>】\n"
// "【child】: 子组件 【Widget】",
// }
class ValueListenableBuilderDemo extends StatelessWidget {
ValueListenableBuilderDemo({Key key}) : super(key: key);
final ValueNotifier<int> _counter = ValueNotifier<int>(0);
@override
Widget build(BuildContext context) {
return Container(
height: 200,
child: Scaffold(
appBar: AppBar(title: Text("ValueListenableBuilder")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
ValueListenableBuilder<int>(
builder: _buildWithValue,
valueListenable: _counter,
child: const Text('I am Child!'),
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.plus_one),
onPressed: () => _counter.value += 1,
),
),
);
}
Widget _buildWithValue(BuildContext context, int value, Widget child) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('$value'),
child,
],
);
}
}

47
lib/views/widgets/StatelessWidget/MaterialBanner/node1_one_btn.dart Normal file
View File

@@ -0,0 +1,47 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/21
/// contact me by email 1981462002@qq.com
/// 说明: 211 MaterialBanner Material风格的横幅组件，支持左中右或左中下结构，可指定边距背景色等。
// {
// "widgetId": 211,
// "name": 'MaterialBanner一行的使用',
// "priority": 1,
// "subtitle": "【content】 : 中间组件 【Widget】\n"
// "【leading】: 左侧组件 【Widget】\n"
// "【actions】: 右侧组件列表 【List<Widget>】\n"
// "【padding】: 内边距 【EdgeInsetsGeometry】\n"
// "【forceActionsBelow】: 是否按钮在下方 【bool】\n"
// "【backgroundColor】: 背景色 【Color】",
// }
class MaterialBannerDemo extends StatelessWidget {
final info =
'Welcome to Flutter Unit!';
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[MaterialBanner(
content: Text(
info,
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.purple,
leading: Icon(Icons.info, color: Colors.lightBlueAccent),
padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0),
forceActionsBelow: false, // 默认false
actions: <Widget>[
Text(
'I KNOW',
style:TextStyle(
color: Colors.orange,
fontWeight: FontWeight.bold,
fontSize: 14) ,
)
],
)],
);
}
}

60
lib/views/widgets/StatelessWidget/MaterialBanner/node2_two_btn.dart Normal file
View File

@@ -0,0 +1,60 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/21
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 211,
// "name": 'MaterialBanner两行的使用',
// "priority": 2,
// "subtitle": "【contentTextStyle】: 中间位置样式 【TextStyle】\n"
// "【leadingPadding】: 左侧组件边距 【EdgeInsetsGeometry】\n"
// "当尾部组件数量大于1,该组件结构为左中下。",
// }
class MaterialBannerDemoTwo extends StatelessWidget {
final info =
'A banner displays an important, succinct message, and provides actions for users to address. '
'A user action is required for itto be dismissed.';
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[MaterialBanner(
content: Text(
info,
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.purple,
leading: Icon(Icons.warning, color: Colors.yellow),
padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0,end: 2),
leadingPadding:EdgeInsetsDirectional.only(end: 16.0) ,
actions: <Widget>[
RaisedButton(
color: Colors.white,
onPressed: () {},
child: Text(
'I KNOW',
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
RaisedButton(
color: Colors.white,
onPressed: () {},
child: Text(
'I IGNORE',
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
],
)],
);
}
}

57
lib/views/widgets/StatelessWidget/OrientationBuilder/node1_base.dart Normal file
View File

@@ -0,0 +1,57 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/21
/// contact me by email 1981462002@qq.com
/// 说明: 203 OrientationBuilder 能够回调父组件是横向还是纵向,可以据此来构建不同的子组件。
// {
// "widgetId": 203,
// "name": 'OrientationBuilder基本使用',
// "priority": 1,
// "subtitle": "【builder】 : 方向组件构造器 【OrientationWidgetBuilder】",
// }
class OrientationBuilderDemo extends StatefulWidget {
@override
_OrientationBuilderDemoState createState() => _OrientationBuilderDemoState();
}
class _OrientationBuilderDemoState extends State<OrientationBuilderDemo> {
double _width = 200;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
width: _width,
height: 200,
child: OrientationBuilder(builder: _builder),
color: Colors.orange,
),
_buildSlider()
],
);
}
//根据回调的orientation返回组件
Widget _builder(BuildContext context, Orientation orientation) {
switch(orientation){
case Orientation.portrait:
return Icon(Icons.phone_android,size: 60,);
break;
case Orientation.landscape:
return RotatedBox(
quarterTurns: 1,
child: Icon(Icons.phone_android,size: 60,));
break;
default: return Container();
}
}
Widget _buildSlider() =>Slider(
value: _width,
max: 350.0,
min: 80.0,
divisions: 17,
onChanged: (v)=> setState(() => _width= v),
);
}

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

@@ -50,6 +50,9 @@ export '../StatefulWidget/SelectableText/node1_base.dart';
export '../StatefulWidget/SelectableText/node2_align.dart';
export '../StatefulWidget/CupertinoNavigationBar/node1_base.dart';
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/DropdownButton/node1_base.dart';
export '../StatefulWidget/DropdownButton/node2_style.dart';

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

@@ -26,9 +26,12 @@ export '../StatelessWidget/Container/node3_alignment.dart';
export '../StatelessWidget/Container/node4_decoration.dart';
export '../StatelessWidget/Container/node5_transform.dart';
export '../StatelessWidget/Container/node6_constraints.dart';
export '../StatelessWidget/MaterialBanner/node1_one_btn.dart';
export '../StatelessWidget/MaterialBanner/node2_two_btn.dart';
export '../StatelessWidget/DataTable/node1_base.dart';
export '../StatelessWidget/DataTable/node2_operation.dart';
export '../StatelessWidget/OrientationBuilder/node1_base.dart';
export '../StatelessWidget/CupertinoTheme/node1_base.dart';
export '../StatelessWidget/CupertinoTheme/node2_use.dart';

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

@@ -55,6 +55,20 @@ class WidgetsMap {
return [
NavigationToolbarDemo(),
];
case "CupertinoTextField":
return [
CupertinoTextFieldDemo(),
CupertinoTextFieldStyle(),
];
case "MaterialBanner":
return [
MaterialBannerDemo(),
MaterialBannerDemoTwo(),
];
case "OrientationBuilder":
return [
OrientationBuilderDemo(),
];
case "Icon":
return [
CustomIcon(),
@@ -85,6 +99,8 @@ class WidgetsMap {
];
case "ChoiceChip":
return [CustomChoiceChip()];
case "ValueListenableBuilder":
return [ValueListenableBuilderDemo()];
case "ActionChip":
return [CustomActionChip()];
case "InputChip":