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

✨ 添加IntrinsicHeight、IntrinsicWidth、ChipTheme、NavigationToolbar组件

Browse Source
This commit is contained in:
toly
2020-07-21 08:03:05 +08:00
parent 64fe6a4084
commit bd0ee8b088
10 changed files with 286 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.

76
lib/views/widgets/ProxyWidget/ChipTheme/node1_base.dart Normal file
View File

@@ -0,0 +1,76 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/20
/// contact me by email 1981462002@qq.com
/// 说明: 328 ChipTheme 主要用于为后代的Chip类型组件统一设置默认属性,也可以通过该组件获取默认Chip的属性。
// {
// "widgetId": 328,
// "name": 'ChipTheme基本使用',
// "priority": 1,
// "subtitle": "可指定ChipThemeData数据属性为【后代】的Chip类型组件设置默认样式，属性和Chip属性类似，如阴影、颜色、边距、形状、文字样式等。也可以用ChipTheme.of获取Chip的主题数据。",
// }
class ChipThemeDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChipTheme(
data: ChipTheme.of(context).copyWith(
selectedColor: Colors.orange.withAlpha(55),
selectedShadowColor: Colors.blue,
shadowColor: Colors.orangeAccent,
pressElevation: 5,
elevation: 3,
),
child: CustomFilterChip(),
);
}
}
class CustomFilterChip extends StatefulWidget {
@override
_CustomFilterChipState createState() => _CustomFilterChipState();
}
class _CustomFilterChipState extends State<CustomFilterChip> {
final Map<String, String> map = {
'A': 'Ant',
'B': 'Bug',
'C': 'Cat',
'D': 'Dog',
};
List<String> _selected = <String>[];
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
children: map.keys.map((key) => _buildChild(key)).toList(),
),
Container(
padding: EdgeInsets.all(10),
child: Text('您已选择: ${_selected.join(', ')}')),
],
);
}
Padding _buildChild(String key) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: FilterChip(
avatar: CircleAvatar(child: Text(key)),
label: Text(map[key]),
selected: _selected.contains(map[key]),
onSelected: (bool value) {
setState(() {
if (value) {
_selected.add(map[key]);
} else {
_selected.removeWhere((name) => name == map[key]);
}
});
},
),
);
}
}

74
lib/views/widgets/SingleChildRenderObjectWidget/IntrinsicHeight/node1_base.dart Normal file
View File

@@ -0,0 +1,74 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/21
/// contact me by email 1981462002@qq.com
/// 说明: 298 IntrinsicHeight 根据子元素的固有高度调整其子元素大小的组件,可解决很多布局的疑难杂症,但相对昂贵。
// {
// "widgetId": 298,
// "name": '可用于显示一个指定宽高的区域',
// "priority": 1,
// "subtitle": "【child】 : 子组件 【Widget】\n"
// "如示例:左侧高可变动，中间高固定,右侧高取前两者的最高值。",
// }
class IntrinsicHeightDemo extends StatefulWidget {
@override
_IntrinsicHeightDemoState createState() => _IntrinsicHeightDemoState();
}
class _IntrinsicHeightDemoState extends State<IntrinsicHeightDemo> {
var _height =120.0;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
buildChild(_height),
SizedBox(height: 10),
_buildSlider()
],
),
);
}
Widget buildChild(double leftHeight) {
return IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: leftHeight,
width: 120,
color: Colors.yellow,
alignment: Alignment.center,
child: Text("height:${leftHeight.toStringAsFixed(1)}"),
),
Container(
color: Colors.blue,
width: 150,
height: 80,
alignment: Alignment.center,
child: Text("固定高"),
),
Container(
color: Colors.red,
width: 60,
alignment: Alignment.center,
child: Text("最高"),
)
],
),
);
}
Widget _buildSlider() =>Slider(
value: _height,
max: 200.0,
min: 30.0,
divisions: 17,
onChanged: (v)=> setState(() => _height= v),
);
}

75
lib/views/widgets/SingleChildRenderObjectWidget/IntrinsicWidth/node1_base.dart Normal file
View File

@@ -0,0 +1,75 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/21
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 297,
// "name": 'IntrinsicWidth基本使用',
// "priority": 1,
// "subtitle":
// "【child】 : 子组件 【Widget】\n"
// "如示例:上面宽可变动，中间宽固定,下面宽取前两者的最高值。",
// }
class IntrinsicWidthDemo extends StatefulWidget {
@override
_IntrinsicWidthDemoState createState() => _IntrinsicWidthDemoState();
}
class _IntrinsicWidthDemoState extends State<IntrinsicWidthDemo> {
var _height =120.0;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
buildChild(_height),
SizedBox(height: 10),
_buildSlider()
],
),
);
}
Widget buildChild(double leftWidth) {
return IntrinsicWidth(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 50,
width: leftWidth,
color: Colors.yellow,
alignment: Alignment.center,
child: Text("width:${leftWidth.toStringAsFixed(1)}"),
),
Container(
color: Colors.blue,
width: 150,
height: 60,
alignment: Alignment.center,
child: Text("固定宽"),
),
Container(
color: Colors.red,
height: 40,
alignment: Alignment.center,
child: Text("最宽"),
)
],
),
);
}
Widget _buildSlider() =>Slider(
value: _height,
max: 200.0,
min: 80.0,
divisions: 17,
onChanged: (v)=> setState(() => _height= v),
);
}

45
lib/views/widgets/StatelessWidget/NavigationToolbar/node1_base.dart Normal file
View File

@@ -0,0 +1,45 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/20
/// contact me by email 1981462002@qq.com
/// 说明: NavigationToolbar 214 左中右模式的通用结构组件,可指定中间组件距左侧边距及是否居中。源码在AppBar等导航条结构中有使用它。
// {
// "widgetId": 214,
// "name": 'NavigationToolbar基本使用',
// "priority": 1,
// "subtitle": "【leading】 : 左侧组件 【Widget】\n"
// "【middle】: 中间组件 【Widget】\n"
// "【trailing】: 右侧组件组件 【Widget】\n"
// "【centerMiddle】: 中间组件是否居中 【bool】\n"
// "【middleSpacing】: 中间组件距左距离 【double】",
// }
class NavigationToolbarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 60,
child: NavigationToolbar(
leading: Icon(Icons.ac_unit),
middle: Text('middleSpacing#true'),
middleSpacing: 20,
centerMiddle: true,
trailing: Icon(Icons.more_vert),
),
),
Container(
height: 60,
child: NavigationToolbar(
leading: Icon(Icons.ac_unit),
middle: Text('middleSpacing#false'),
middleSpacing: 20,
centerMiddle: false,
trailing: Icon(Icons.more_vert),
),
),
],
);
}
}

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

@@ -17,4 +17,5 @@ export '../ProxyWidget/IconTheme/node1_base.dart';
export '../ProxyWidget/ScrollConfiguration/node1_base.dart';
export '../ProxyWidget/Expanded/node1_base.dart';
export '../ProxyWidget/Positioned/node1_base.dart';
export '../ProxyWidget/LayoutId/node1_base.dart';
export '../ProxyWidget/LayoutId/node1_base.dart';
export '../ProxyWidget/ChipTheme/node1_base.dart' hide CustomFilterChip;

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

@@ -76,4 +76,6 @@ export '../SingleChildRenderObjectWidget/LayoutBuilder/node1_base.dart';
export '../SingleChildRenderObjectWidget/LayoutBuilder/node2_fit.dart';
export '../SingleChildRenderObjectWidget/LayoutBuilder/node3_expend.dart';
export '../SingleChildRenderObjectWidget/ShaderMask/node1_radial.dart';
export '../SingleChildRenderObjectWidget/ShaderMask/node2_linear.dart';
export '../SingleChildRenderObjectWidget/ShaderMask/node2_linear.dart';
export '../SingleChildRenderObjectWidget/IntrinsicHeight/node1_base.dart';
export '../SingleChildRenderObjectWidget/IntrinsicWidth/node1_base.dart';

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

@@ -32,7 +32,6 @@ export '../StatefulWidget/CupertinoSegmentedControl/node1_base.dart';
export '../StatefulWidget/CupertinoSegmentedControl/node2_color.dart';
export '../StatefulWidget/Navigator/node1_base.dart';
export '../StatefulWidget/Image/node1_base.dart';
export '../StatefulWidget/Image/node2_fit.dart';
export '../StatefulWidget/Image/node3_alignment.dart';

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

@@ -10,6 +10,7 @@ export '../StatelessWidget/Card/node2_shape.dart';
export '../StatelessWidget/PreferredSize/node1_base.dart';
export '../StatelessWidget/PreferredSize/node2_adapter.dart';
export '../StatelessWidget/Builder/node1_base.dart';
export '../StatelessWidget/NavigationToolbar/node1_base.dart';
export '../StatelessWidget/CheckboxListTile/node1_base.dart';
export '../StatelessWidget/CheckboxListTile/node2_select.dart';

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

@@ -51,6 +51,10 @@ class WidgetsMap {
return [
CustomBanner(),
];
case "NavigationToolbar":
return [
NavigationToolbarDemo(),
];
case "Icon":
return [
CustomIcon(),
@@ -87,6 +91,12 @@ class WidgetsMap {
return [PressInputChip(), SelectInputChip()];
case "FilterChip":
return [CustomFilterChip()];
case "IntrinsicHeight":
return [IntrinsicHeightDemo()];
case "IntrinsicWidth":
return [IntrinsicWidthDemo()];
case "ChipTheme":
return [ChipThemeDemo()];
case "ListTile":
return [CustomListTile(), SelectListTile(), DenseListTile()];
case "CheckboxListTile":