diff --git a/lib/components/widget_item.dart b/lib/components/widget_item.dart index 444f6ba0..b13966cf 100644 --- a/lib/components/widget_item.dart +++ b/lib/components/widget_item.dart @@ -5,13 +5,14 @@ import 'package:flutter/material.dart'; import '../common/style.dart'; import '../common/widget_name_to_icon.dart'; +String _widgetName; + class WidgetItem extends StatelessWidget { final String title; final VoidCallback onTap; final int index; //用于计算border final int totalCount; final int rowLength; - String _widgetName; WidgetItem( {this.title, this.onTap, this.index, this.totalCount, this.rowLength}); diff --git a/lib/widgets/components/Bar/AppBar/demo.dart b/lib/widgets/components/Bar/AppBar/demo.dart index 7e596cbb..c17eb6e0 100644 --- a/lib/widgets/components/Bar/AppBar/demo.dart +++ b/lib/widgets/components/Bar/AppBar/demo.dart @@ -10,7 +10,7 @@ import 'package:flutter/material.dart'; /* -* Checkbox 默认AppBar的实例 +* 默认 AppBar 的实例 * index 当前AppBar 的索引值 * */ class AppBarLessDefaultComplex extends StatefulWidget { diff --git a/lib/widgets/components/Bar/AppBar/index.dart b/lib/widgets/components/Bar/AppBar/index.dart index 17f11a10..3b821ee8 100644 --- a/lib/widgets/components/Bar/AppBar/index.dart +++ b/lib/widgets/components/Bar/AppBar/index.dart @@ -16,23 +16,24 @@ import './demo.dart' as AppBarDemo; const String _Text0 = """### **简介** > AppBar “应用栏” -- 应用栏由工具栏和可能的其他 widget 组成,例如 TabBar和FlexibleSpaceBar。 -- 应用栏通常用于 Scaffold.appBa r属性,该属性将应用栏放置在屏幕顶部的固定高度小部件中。 -- 对于可滚动的应用栏,请参阅SliverAppBar,它将AppBar嵌入 sliver 中以便在CustomScrollView中使用。 +- 应用栏由工具栏和可能的其他 widget 组成,例如 TabBar和FlexibleSpaceBar; +- 应用栏通常用于 Scaffold.appBar 属性,该属性将应用栏放置在屏幕顶部的固定高度小部件中; +- 对于可滚动的应用栏,请参阅SliverAppBar,它将AppBar嵌入 sliver 中以便在CustomScrollView中使用; """; const String _Text1 = """### **基本用法** > AppBar -- AppBar 在底部上方显示工具栏 widget,前导 leading ,标题 title 和操作 actions。 +- AppBar 在底部上方显示工具栏 widget,前导 leading ,标题 title 和操作 actions; """; const String _Text2 = """### **进阶用法** > AppBar -- 一个完整的 AppBar 的例子, 增加 PopupMenuButton,TabBar 的示例子。 -- 所述底部通常用于一个的TabBar。如果指定了flexibleSpace窗口小部件,则它将堆叠在工具栏和底部窗口 widget 后面。 +- 一个完整的 AppBar 的例子, 增加 PopupMenuButton,TabBar 的示例子; +- 所述底部通常用于一个的 TabBar; +- 如果指定了 flexibleSpace 窗口 widget,则它将堆叠在工具栏和底部窗口 widget 后面; """; class Demo extends StatefulWidget { @@ -48,7 +49,7 @@ class _DemoState extends State<Demo> { return WidgetDemo( title: 'AppBar', codeUrl: 'componentss/Bar/AppBar/demo.dart', - contentList: [allCheckboxs(context, this)], + contentList: [allDomes(context, this)], docUrl: 'https://docs.flutter.io/flutter/material/AppBar-class.html', ); } @@ -59,7 +60,7 @@ class _DemoState extends State<Demo> { * context: 运行上下文 * that: 指向有状态的 StatefulWidget */ -Widget allCheckboxs(BuildContext context, _DemoState that) { +Widget allDomes(BuildContext context, _DemoState that) { return Container( //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), child: Column( diff --git a/lib/widgets/components/Bar/BottomAppBar/index.dart b/lib/widgets/components/Bar/BottomAppBar/index.dart index 9c6fa6a8..4e70c2f6 100644 --- a/lib/widgets/components/Bar/BottomAppBar/index.dart +++ b/lib/widgets/components/Bar/BottomAppBar/index.dart @@ -16,13 +16,13 @@ import './demo.dart' as BottomAppBarDemo; const String _Text0 = """### **简介** > BottomAppBar “底部应用栏” -- 一个通常与 Scaffold.bottomNavigationBar 一起使用的容器,可以在顶部有一个凹口,为重叠的FloatingActionButton腾出空间 。 +- 一个通常与 Scaffold.bottomNavigationBar 一起使用的容器,可以在顶部有一个凹口,为重叠的FloatingActionButton腾出空间; """; const String _Text1 = """### **基本用法** -> 通常与Scaffold和FloatingActionButton一起使用。 +> 通常与 Scaffold 和 FloatingActionButton 一起使用; """; @@ -39,7 +39,7 @@ class _DemoState extends State<Demo> { return WidgetDemo( title: 'BottomAppBar', codeUrl: 'componentss/Bar/BottomAppBar/demo.dart', - contentList: [allCheckboxs(context, this)], + contentList: [allDomes(context, this)], docUrl: 'https://docs.flutter.io/flutter/material/BottomAppBar-class.html', ); } @@ -50,7 +50,7 @@ class _DemoState extends State<Demo> { * context: 运行上下文 * that: 指向有状态的 StatefulWidget */ -Widget allCheckboxs(BuildContext context, _DemoState that) { +Widget allDomes(BuildContext context, _DemoState that) { return Container( //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), child: Column( diff --git a/lib/widgets/components/Bar/ButtonBar/index.dart b/lib/widgets/components/Bar/ButtonBar/index.dart index 4fe39eba..bce2b1ce 100644 --- a/lib/widgets/components/Bar/ButtonBar/index.dart +++ b/lib/widgets/components/Bar/ButtonBar/index.dart @@ -22,8 +22,10 @@ const String _Text0 = const String _Text1 = """### **基本用法** -> 根据当前ButtonTheme中的填充水平放置按钮 。子 button 在布置行与 MainAxisAlignment.end -- 当Directionality为TextDirection.ltr时,按钮栏的子项右对齐,最后一个子项成为最右边的子项。当Directionality TextDirection.rtl时,子项被左对齐,最后一个子项成为最左边的子项。 +> 根据当前 ButtonTheme 中的填充水平放置 button +- 子 button 在布置行与 MainAxisAlignment.end; +- 当 Directionality为TextDirection.ltr 时,按钮栏的子项右对齐,最后一个子项成为最右边的子项; +- 当 Directionality TextDirection.rtl 时,子项被左对齐,最后一个子项成为最左边的子项; """; @@ -40,7 +42,7 @@ class _DemoState extends State<Demo> { return WidgetDemo( title: 'ButtonBar', codeUrl: 'components/Bar/ButtonBar/demo.dart', - contentList: [allCheckboxs(context, this)], + contentList: [allDomes(context, this)], docUrl: 'https://docs.flutter.io/flutter/material/ButtonBar-class.html', ); } @@ -51,7 +53,7 @@ class _DemoState extends State<Demo> { * context: 运行上下文 * that: 指向有状态的 StatefulWidget */ -Widget allCheckboxs(BuildContext context, _DemoState that) { +Widget allDomes(BuildContext context, _DemoState that) { return Container( //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), child: Column( diff --git a/lib/widgets/components/Bar/FlexibleSpaceBar/index.dart b/lib/widgets/components/Bar/FlexibleSpaceBar/index.dart index fe39cfb0..d6dbc972 100644 --- a/lib/widgets/components/Bar/FlexibleSpaceBar/index.dart +++ b/lib/widgets/components/Bar/FlexibleSpaceBar/index.dart @@ -16,15 +16,15 @@ import './demo.dart' as FlexibleSpaceBarDemo; const String _Text0 = """### **简介** > FlexibleSpaceBar “扩展和折叠的应用栏” -- AppBar的一部分,可以扩展和折叠。 +- AppBar 的一部分,可以扩展和折叠; """; const String _Text1 = """### **基本用法** > 最常用于 SliverAppBar.flexibleSpace 字段 -- 灵活的空格键随着应用滚动而扩展和收缩,以便AppBar 从应用程序的顶部到达应用程序滚动内容的顶部。 -- 要调整 AppBar 大小,必须将其包装在 FlexibleSpaceBar.createSettings 返回的 widget 中 ,以将大小调整信息传递给 FlexibleSpaceBar。 +- 灵活的空格键随着应用滚动而扩展和收缩,以便 AppBar 从应用程序的顶部到达应用程序滚动内容的顶部; +- 要调整 AppBar 大小,必须将其包装在 FlexibleSpaceBar.createSettings 返回的 widget 中 ,以将大小调整信息传递给 FlexibleSpaceBar; """; @@ -41,7 +41,7 @@ class _DemoState extends State<Demo> { return WidgetDemo( title: 'FlexibleSpaceBar', codeUrl: 'components/Bar/FlexibleSpaceBar/demo.dart', - contentList: [allCheckboxs(context, this)], + contentList: [allDomes(context, this)], docUrl: 'https://docs.flutter.io/flutter/material/FlexibleSpaceBar-class.html', ); } @@ -52,7 +52,7 @@ class _DemoState extends State<Demo> { * context: 运行上下文 * that: 指向有状态的 StatefulWidget */ -Widget allCheckboxs(BuildContext context, _DemoState that) { +Widget allDomes(BuildContext context, _DemoState that) { return Container( //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), child: Column( diff --git a/lib/widgets/components/Bar/SliverAppBar/demo.dart b/lib/widgets/components/Bar/SliverAppBar/demo.dart index 48122562..3bc2c5fb 100644 --- a/lib/widgets/components/Bar/SliverAppBar/demo.dart +++ b/lib/widgets/components/Bar/SliverAppBar/demo.dart @@ -10,7 +10,7 @@ import 'package:flutter/material.dart'; /* -* Checkbox 默认SliverAppBar的实例 +* 默认 SliverAppBar 的实例 * */ class SliverAppBarFullDefault extends StatefulWidget { const SliverAppBarFullDefault() : super(); diff --git a/lib/widgets/components/Bar/SliverAppBar/index.dart b/lib/widgets/components/Bar/SliverAppBar/index.dart index 32992053..4205f09d 100644 --- a/lib/widgets/components/Bar/SliverAppBar/index.dart +++ b/lib/widgets/components/Bar/SliverAppBar/index.dart @@ -16,16 +16,16 @@ import './demo.dart' as SliverAppBarDemo; const String _Text0 = """### **简介** > SliverAppBar “应用栏” -- 它类似于Android中的toolbar。 +- 它类似于Android中的toolbar; """; const String _Text1 = """### **基本用法** -> 虽然基本相同,构造方法也是非常的简单,但是却不能直接使用它,由官方文档可以看到通常结合ScrollView来使用它。 -- AppBar 和 SliverAppBar 都是继承StatefulWidget 类,都代表 Toobar。 -- 二者的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是可以跟随内容滚动的。 -- 下面的示例,放在 NestedScrollView 实现上提到顶的悬停。 +> 虽然基本相同,构造方法也是非常的简单,但是却不能直接使用它,由官方文档可以看到通常结合 ScrollView 来使用它; +- AppBar 和 SliverAppBar 都是继承StatefulWidget 类,都代表 Toobar; +- 二者的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是可以跟随内容滚动的; +- 下面的示例,放在 NestedScrollView 实现上提到顶的悬停; """; class Demo extends StatefulWidget { @@ -41,7 +41,7 @@ class _DemoState extends State<Demo> { return WidgetDemo( title: 'SliverAppBar', codeUrl: 'componentss/Bar/SliverAppBar/demo.dart', - contentList:[allCheckboxs(context, this)], + contentList:[allDomes(context, this)], docUrl: 'https://docs.flutter.io/flutter/widgets/SliverAppBar-class.html', ); } @@ -52,7 +52,7 @@ class _DemoState extends State<Demo> { * context: 运行上下文 * that: 指向有状态的 StatefulWidget */ -Widget allCheckboxs(BuildContext context, _DemoState that) { +Widget allDomes(BuildContext context, _DemoState that) { return Container( //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), child: Column( diff --git a/lib/widgets/components/Bar/SnackBar/index.dart b/lib/widgets/components/Bar/SnackBar/index.dart index e60fe054..4e7adbb2 100644 --- a/lib/widgets/components/Bar/SnackBar/index.dart +++ b/lib/widgets/components/Bar/SnackBar/index.dart @@ -16,14 +16,14 @@ import './demo.dart' as SnackBarDemo; const String _Text0 = """### **简介** > SnackBar “屏幕底部消息” -- 带有可选操作的轻量级消息,短暂显示在屏幕底部。 -- SnackBar是用户操作后,显示提示信息的一个控件,类似Toast,会自动隐藏。 +- 带有可选操作的轻量级消息,短暂显示在屏幕底部 +- SnackBar是用户操作后,显示提示信息的一个控件,类似Toast,会自动隐藏; """; const String _Text1 = """### **基本用法** -> Scaffold.of(context).showSnackBar(),传递描述消息的SnackBar实例。 +> Scaffold.of(context).showSnackBar(),传递描述消息的 SnackBar 实例; - 要控制SnackBar保持可见的时间,请指定持续时间。 """; @@ -41,7 +41,7 @@ class _DemoState extends State<Demo> { return WidgetDemo( title: 'SnackBar', codeUrl: 'componentss/Bar/SnackBar/demo.dart', - contentList: [allCheckboxs(context, this)], + contentList: [allDomes(context, this)], docUrl: 'https://docs.flutter.io/flutter/material/SnackBar-class.html', ); } @@ -52,7 +52,7 @@ class _DemoState extends State<Demo> { * context: 运行上下文 * that: 指向有状态的 StatefulWidget */ -Widget allCheckboxs(BuildContext context, _DemoState that) { +Widget allDomes(BuildContext context, _DemoState that) { return Container( //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), child: Column( diff --git a/lib/widgets/components/Bar/SnackBarAction/index.dart b/lib/widgets/components/Bar/SnackBarAction/index.dart index bd4f62a0..4d213c0c 100644 --- a/lib/widgets/components/Bar/SnackBarAction/index.dart +++ b/lib/widgets/components/Bar/SnackBarAction/index.dart @@ -14,11 +14,11 @@ const String _Text0 = """ ### **简介** > SnackBarAction “屏幕底部消息右侧可操作的行为” -带有可选操作的轻量级消息,短暂显示在屏幕底部, 并提供按钮交互。 +- 带有可选操作的轻量级消息,短暂显示在屏幕底部, 并提供按钮交互。 ### **基本用法** -> 为SnackBar加入action[SnackBarAction]显示按区, 默认下是隐藏的. +> 为SnackBar加入action[SnackBarAction]显示按区, 默认下是隐藏的 """; diff --git a/lib/widgets/components/Bar/TabBar/index.dart b/lib/widgets/components/Bar/TabBar/index.dart index 78270cad..bb2b364d 100644 --- a/lib/widgets/components/Bar/TabBar/index.dart +++ b/lib/widgets/components/Bar/TabBar/index.dart @@ -15,7 +15,7 @@ const String _Text0 = """ ### **简介** > SnackBarAction 来实现并行界面的横向滑动展示 -TabBar,是材料设计中很常用的一种横向标签. 来实现并行界面的横向滑动展示,在Flutter的世界中,TabBar有着相同的作用。通常,我们会在AppBar的底部部分结合TabBarView来使用TabBar。 +- TabBar,是材料设计中很常用的一种横向标签. 来实现并行界面的横向滑动展示,在Flutter的世界中,TabBar有着相同的作用。通常,我们会在AppBar的底部部分结合TabBarView来使用TabBar; diff --git a/lib/widgets/components/Card/Card/index.dart b/lib/widgets/components/Card/Card/index.dart index 7d3586a3..45e490fa 100644 --- a/lib/widgets/components/Card/Card/index.dart +++ b/lib/widgets/components/Card/Card/index.dart @@ -39,7 +39,7 @@ class _DemoState extends State<Demo> { return WidgetDemo( title: 'Card', codeUrl: 'components/Card/Card/demo.dart', - contentList: [allCheckboxs(context, this)], + contentList: [allDomes(context, this)], docUrl: 'https://docs.flutter.io/flutter/material/Card-class.html', ); } @@ -50,7 +50,7 @@ class _DemoState extends State<Demo> { * context: 运行上下文 * that: 指向有状态的 StatefulWidget */ -Widget allCheckboxs(BuildContext context, _DemoState that) { +Widget allDomes(BuildContext context, _DemoState that) { return Container( //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), child: Column( diff --git a/lib/widgets/components/Chip/FilterChip/index.dart b/lib/widgets/components/Chip/FilterChip/index.dart index b8976379..a7a7db79 100644 --- a/lib/widgets/components/Chip/FilterChip/index.dart +++ b/lib/widgets/components/Chip/FilterChip/index.dart @@ -11,7 +11,7 @@ import 'demo.dart'; const String content0 = ''' ### **简介** > 通过使用标签或者描述性词语来过滤内容 -- FilterChip是checkbox或switch widget 的替换品。 +- FilterChip 是 checkbox 或 switch widget 的替换品。 '''; const String content1 = ''' diff --git a/lib/widgets/components/LIst/ListView/demo.dart b/lib/widgets/components/LIst/ListView/demo.dart index d4f80a1e..728db57f 100644 --- a/lib/widgets/components/LIst/ListView/demo.dart +++ b/lib/widgets/components/LIst/ListView/demo.dart @@ -134,7 +134,9 @@ class ListViewLessDefault extends StatelessWidget { ), ); break; + default: + return null; + break; } - } } \ No newline at end of file diff --git a/lib/widgets/components/Navigation/BottomNavigationBar/index.dart b/lib/widgets/components/Navigation/BottomNavigationBar/index.dart index 1dfe3880..e38bdfd4 100644 --- a/lib/widgets/components/Navigation/BottomNavigationBar/index.dart +++ b/lib/widgets/components/Navigation/BottomNavigationBar/index.dart @@ -16,18 +16,18 @@ import './demo.dart' as BottomNavigationBarDemo; const String _text0 = """### **简介** > BottomNavigationBar “底部导航栏”, -- 显示在应用程序底部的导航栏,由文本标签,图标或两者形式的多个项目组成。 -- 它提供了应用程序顶级视图之间的快速导航。 +- 显示在应用程序底部的导航栏,由文本标签,图标或两者形式的多个项目组成; +- 它提供了应用程序顶级视图之间的快速导航; """; const String _text1 = """### **基本用法** > BottomNavigationBar 底部导航栏通常与Scaffold结合使用 -- 它作为Scaffold.bottomNavigationBar参数。 -- BottomNavigationBar金支持0-4个之间个底部按钮数量,超出4个系统将会报异常。 -- 默认0-3个底部按钮数量时,BottomNavigationBar采用fixed的模式摆放底部按钮,当超过4个时默认使用 BottomNavigationBarType.shifting 模式摆放底部按钮 -- 下面的底部导航即是效果。 +- 它作为 Scaffold.bottomNavigationBar 参数; +- BottomNavigationBar 支持0-4个之间个底部按钮数量,超出4个系统将会报异常; +- 默认0-3个底部按钮数量时,BottomNavigationBar采用fixed的模式摆放底部按钮,当超过4个时默认使用 BottomNavigationBarType.shifting 模式摆放底部按钮; +- 下面的底部导航即是效果; """; class Demo extends StatefulWidget { diff --git a/lib/widgets/components/Navigation/BottomNavigationBarItem/index.dart b/lib/widgets/components/Navigation/BottomNavigationBarItem/index.dart index 5ae71489..f28b77a5 100644 --- a/lib/widgets/components/Navigation/BottomNavigationBarItem/index.dart +++ b/lib/widgets/components/Navigation/BottomNavigationBarItem/index.dart @@ -16,13 +16,13 @@ import './demo.dart' as BottomNavigationBarItemDemo; const String _Text0 = """### **简介** > BottomNavigationBarItem “底部导航应用栏” -- material 的 BottomNavigationBar 或带有图标和标题的 iOS主题 CupertinoTabBar 中的交互式按钮。 +- material 的 BottomNavigationBar 或带有图标和标题的 iOS主题 CupertinoTabBar 中的交互式按钮; """; const String _Text1 = """### **基本用法** -> 这个类很少单独使用。通常嵌入在上面的一个底部 bottom navigation widgets 中。 +> 这个类很少单独使用。通常嵌入在上面的一个底部 bottom navigation widgets 中; """; diff --git a/lib/widgets/elements/Form/Button/DropdownButton/demo.dart b/lib/widgets/elements/Form/Button/DropdownButton/demo.dart index 2bf5b846..a2a97503 100644 --- a/lib/widgets/elements/Form/Button/DropdownButton/demo.dart +++ b/lib/widgets/elements/Form/Button/DropdownButton/demo.dart @@ -12,6 +12,9 @@ import 'package:flutter/material.dart'; * DropdownButton 默认按钮的实例 * isDisabled:是否是禁用,isDisabled 默认为true * */ +var selectItValue; +var selectItemValue; + class DropdownButtonDefault extends StatelessWidget { List<DropdownMenuItem> generateItemList() { final List<DropdownMenuItem> items = new List(); @@ -30,15 +33,13 @@ class DropdownButtonDefault extends StatelessWidget { return items; } - var selectItemValue; - @override Widget build(BuildContext context) { return DropdownButton( hint: new Text('下拉菜单选择一个人名'), //设置这个value之后,选中对应位置的item, //再次呼出下拉菜单,会自动定位item位置在当前按钮显示的位置处 - value: selectItemValue, + value: selectItValue, items: generateItemList(), onChanged: (T){ // setState(() { @@ -103,7 +104,6 @@ List<DropdownMenuItem> getListData(){ items.add(dropdownMenuItem10); return items; } -var selectItemValue; /* * DropdownButton 自定义的实例 diff --git a/lib/widgets/elements/Form/Button/DropdownButton/index.dart b/lib/widgets/elements/Form/Button/DropdownButton/index.dart index 156ab0a1..4274f5dc 100644 --- a/lib/widgets/elements/Form/Button/DropdownButton/index.dart +++ b/lib/widgets/elements/Form/Button/DropdownButton/index.dart @@ -18,7 +18,7 @@ import './demo.dart' as dropdownButton; const String _dropdownText0 = """### **简介** > Dropdown button “用于从项目列表中进行选择的按钮” -- 类型T是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常,使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法。。 +- 参数类型 T 是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常,使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法; """; const String _dropdownText1 = diff --git a/lib/widgets/elements/Form/Button/FlatButton/index.dart b/lib/widgets/elements/Form/Button/FlatButton/index.dart index c293eab9..58fa6ba3 100644 --- a/lib/widgets/elements/Form/Button/FlatButton/index.dart +++ b/lib/widgets/elements/Form/Button/FlatButton/index.dart @@ -18,29 +18,27 @@ import './demo.dart' as flatButton; const String _flatText0 = """### **简介** -> Flat button 是显示在(零高程)material widget上的文本标签 -- 通过填充颜色对触摸作出反应在工具栏上, -- 在对话框中使用Flat button,或与其他内容内联,但使用填充从该内容偏移,以便按钮的存在是显而易见的。 -- Flat buttons 故意不具有可见边框,因此必须依赖于它们相对于其他内容的位置以用于上下文。 -- 在对话框和卡片中,它们应该组合在一个底角中。避免使用平面按钮,它们会与其他内容混合,例如在列表中间。"""; +> FlatButton 是显示在(零高程)material widget 上的文本标签 +- 通过填充颜色对触摸作出反应在工具栏上; +- FlatButtons 故意不具有可见边框,因此必须依赖于它们相对于其他内容的位置以用于上下文; +- 在对话框和卡片中,它们应该组合在一个底角中。避免使用平面按钮,它们会与其他内容混合,例如在列表中间;"""; const String _flatText1 = """### **基本用法** -> 参数的默认的按钮和禁用按钮 -- 如果onPressed回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。 -- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序。"""; +> 参数的默认的 button 和禁用 button +- 如果 onPressed 回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按 disabledColor 属性而不是color属性指定的颜色进行着色; +- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序;。"""; const String _flatText2 = """### **进阶用法1** -> FlatButton.icon,按钮图标和标签的widget创建文本按钮。"""; +> FlatButton.icon ,button 图标和标签的 widget 创建文本按钮;"""; const String _flatText3 = """### **进阶用法2** -> 更改项参数的自定义,比如:边框,点击效果,内容文字颜色等 -- Material design Flat buttons 按钮具有全帽标签,一些内部填充和一些定义的尺寸。 -- 要使应用程序的一部分具有交互式,使用墨水溅,而不是承诺这些样式选择,请考虑使用InkWell。 -- Flat button 的最小尺寸为88.0×36.0,可以用 ButtonTheme 覆盖。该clipBehavior参数不能为空。"""; +> 更改参数的自定义,比如:边框,点击效果,内容文字颜色等; +- 要使应用程序的一部分具有交互式,使用 ink splashes,请考虑使用InkWell; +- Flat button 的最小尺寸为88.0×36.0,可以用 ButtonTheme 覆盖。该clipBehavior参数不能为空;"""; class Demo extends StatefulWidget { static const String routeName = '/element/Form/Button/FlatButton'; diff --git a/lib/widgets/elements/Form/Button/FloatingActionButton/index.dart b/lib/widgets/elements/Form/Button/FloatingActionButton/index.dart index 63768cff..efabb752 100644 --- a/lib/widgets/elements/Form/Button/FloatingActionButton/index.dart +++ b/lib/widgets/elements/Form/Button/FloatingActionButton/index.dart @@ -18,15 +18,15 @@ import './demo.dart' as floatingActionButton; const String _floatingActionText0 = """### **简介** > FloatingAction Button “浮动动作按钮” -- FloatingActionButton 按钮是一个圆形图标按钮,悬停在内容上以提升应用程序中的主要操作。浮动操作按钮最常用于Scaffold.floatingActionButton字段中。。 -- 每个屏幕最多使用一个浮动操作按钮。浮动操作按钮应用于积极操作,例如“创建”,“共享”或“导航”。 -- 一般用来处理界面中最常用,最基础的用户动作。它一般出现在屏幕内容的前面,通常是一个圆形,中间有一个图标。 FAB有三种类型:regular, mini, and extended。不要强行使用FAB,只有当使用场景符合FAB功能的时候使用才最为恰当 +- FloatingActionButton 按钮是一个圆形图标按钮,悬停在内容上以提升应用程序中的主要操作。浮动操作按钮最常用于Scaffold.floatingActionButton字段中; +- 每个屏幕最多使用一个浮动操作按钮。浮动操作按钮应用于积极操作,例如“创建”,“共享”或“导航”; +- 一般用来处理界面中最常用,最基础的用户动作。它一般出现在屏幕内容的前面,通常是一个圆形,中间有一个图标。 FAB有三种类型:regular, mini, extended。不要强行使用FAB,只有当使用场景符合FAB功能的时候使用才最为恰当; """; const String _floatingActionText1 = """### **基本用法** -> 默认参数的按钮和禁用按钮 -- 如果onPressed回调为null,则该按钮将被禁用,并且不会对触摸作出反应,不会变成灰色。 +> 默认参数的 button 和禁用 button +- 如果 onPressed 回调为null,则该 button 将被禁用,并且不会对触摸作出反应,不会变成灰色; """; const String _floatingActionText2 = diff --git a/lib/widgets/elements/Form/Button/IconButton/index.dart b/lib/widgets/elements/Form/Button/IconButton/index.dart index 8518228f..1d742771 100644 --- a/lib/widgets/elements/Form/Button/IconButton/index.dart +++ b/lib/widgets/elements/Form/Button/IconButton/index.dart @@ -18,19 +18,19 @@ import './demo.dart' as iconButton; const String _iconText0 = """### **简介** > Icon button “图标按钮” -- IconButton widget上的图片,通过填充颜色(墨水)来对触摸作出反应。 +- IconButton widget上的图片,通过填充颜色(墨水)来对触摸作出反应; """; const String _iconText1 = """### **基本用法** > 参数的默认的按钮和禁用按钮 -- 图标按钮通常在AppBar.actions字段中使用,但它们也可以在许多其他地方使用。。 -- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序。"""; +- 图标按钮通常在AppBar.actions字段中使用,但它们也可以在许多其他地方使用; +- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序;"""; const String _iconText2 = """### **进阶用法** -> 更改项参数的自定义,比如:边框,点击效果,内容文字,颜色,圆角等 -- 如果可能,图标按钮的命中区域的大小至少为48.0像素,与实际的iconSize无关,以满足 Material Design规范中的触摸目标大小要求。的对准控制图标本身如何定位命中区域内。 +> 更改项参数的自定义,比如:边框,点击效果,内容文字,颜色,圆角等; +- 如果可能,图标按钮的命中区域的大小至少为48.0像素,与实际的iconSize无关,以满足 Material Design规范中的触摸目标大小要求。的对准控制图标本身如何定位命中区域内; - ** 长按可弹出 tip 文字 ** """; diff --git a/lib/widgets/elements/Form/Button/OutlineButton/index.dart b/lib/widgets/elements/Form/Button/OutlineButton/index.dart index ec9f460c..8c2aaa26 100644 --- a/lib/widgets/elements/Form/Button/OutlineButton/index.dart +++ b/lib/widgets/elements/Form/Button/OutlineButton/index.dart @@ -18,29 +18,29 @@ import './demo.dart' as outlineButton; const String _outlineText0 = """### **简介** > Outline button “边框按钮” -- RaisedButton和FlatButton之间的交叉:一个有边框的按钮,当按下按钮时,其高度增加,背景变得不透明。。 -- 高程最初为0.0,其背景颜色 为透明。按下按钮时,其背景变为不透明,然后其高程增加到highlightElevation。 +- RaisedButton和FlatButton之间的交叉:一个有边框的按钮,当按下按钮时,其高度增加,背景变得不透明; +- 高程最初为0.0,其背景颜色 为透明。按下按钮时,其背景变为不透明,然后其高程增加到highlightElevation; """; const String _outlineText1 = """### **基本用法** -> 参数的默认的按钮和禁用按钮 -- 如果onPressed回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。 -- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序。"""; +> 参数的默认的 button 和禁用 button +- 如果onPressed回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按 disabledColor 属性而不是color属性指定的颜色进行着色; +- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序;"""; const String _outlineText2 = """### **进阶用法1** -> OutlineButton.icon 的用法,按钮图标和标签的widget创建文本按钮。"""; +> OutlineButton.icon 的用法,按钮图标和标签的widget创建文本按钮"""; const String _outlineText3 = """### **进阶用法2** -> 更改项参数的自定义,比如:边框,点击效果,内容文字,颜色,圆角等 -- Outline buttons 按钮有一个边框,其形状由形状定义 ,其外观由borderSide,disabledBorderColor和highlightedBorderColor定义。 -- 如果您想要水龙头的墨水效果,但又不想使用按钮,请考虑直接使用InkWell。 -- Outline buttons 的最小尺寸为88.0×36.0,可以用ButtonTheme 覆盖。 -- 通过 shape 属性的设置,改变边框样式和圆角。 -- 可以尝试长按按钮,按钮突出显示。 +> 更改参数的自定义,比如:边框,点击效果,内容文字,颜色,圆角等; +- Outline buttons 按钮有一个边框,其形状由形状定义 ,其外观由borderSide,disabledBorderColor 和 highlightedBorderColor 定义; +- 如果您想要 ink-splash 效果,但又不想使用 button ,请考虑直接使用 InkWell; +- Outline buttons 的最小尺寸为88.0×36.0,可以用 ButtonTheme 覆盖; +- 通过 shape 属性的设置,改变边框样式和圆角; +- 可以尝试长按按钮,button 突出显示; """; class Demo extends StatefulWidget { diff --git a/lib/widgets/elements/Form/Button/PopupMenuButton/index.dart b/lib/widgets/elements/Form/Button/PopupMenuButton/index.dart index 2675f690..bb708a73 100644 --- a/lib/widgets/elements/Form/Button/PopupMenuButton/index.dart +++ b/lib/widgets/elements/Form/Button/PopupMenuButton/index.dart @@ -17,21 +17,21 @@ import './demo.dart' as popupMenuButton; const String _titleText0 = """ ### **简介** > 按下时显示菜单 -- 当菜单因为选择了项目而被解除时调用onSelected。传递给onSelected的值是所选菜单项的值。 -- 可以提供 `child` 或 `icon` 中的一个,但不是能同时设置两者。如果提供了 `icon` ,则 `PopupMenuButton` 的行为类似于 `IconButton`。 -- 如果两者都为null,则创建一个标准 overflow icon(取决于平台)。 +- 当菜单因为选择了项目而被解除时调用onSelected。传递给onSelected的值是所选菜单项的值; +- 可以提供 `child` 或 `icon` 中的一个,但不是能同时设置两者。如果提供了 `icon` ,则 `PopupMenuButton` 的行为类似于 `IconButton`; +- 如果两者都为null,则创建一个标准 overflow icon(取决于平台); """; const String _titleText1 = """ ### **基本用法** > 此示例显示一个包含四个项目的菜单 -- 在枚举值之间进行选择,并_selection根据选择设置字段。 +- 在枚举值之间进行选择,并_selection根据选择设置字段; """; const String _titleText2 = """ ### **进阶用法** > 此示例尝试调整所有属性,展示出效果 -- 默认选择第二个。 -- 再次打开,`PopupMenuItem` 保留上次的选择结果。 +- 默认选择第二个; +- 再次打开,`PopupMenuItem` 保留上次的选择结果; """; class Demo extends StatefulWidget { diff --git a/lib/widgets/elements/Form/Button/RaisedButton/index.dart b/lib/widgets/elements/Form/Button/RaisedButton/index.dart index dbbd466b..26d7ad7e 100644 --- a/lib/widgets/elements/Form/Button/RaisedButton/index.dart +++ b/lib/widgets/elements/Form/Button/RaisedButton/index.dart @@ -18,29 +18,28 @@ import './demo.dart' as raisedButton; const String _raisedText0 = """### **简介** > Raised button “凸起按钮” -- Raised button 基于 a Material widget 窗口widget,按下按钮时,Material.elevation 会增加。 -- 使用 Raised button 可将尺寸添加到大多数平面布局中。 -- 例如在复杂的内容列表中,或在宽阔的空间中。避免在已经提出的内容(例如对话框或卡片)上使用 Raised button 。 +- Raised button 基于 a Material widget 窗口widget,按下 button 时,Material.elevation 会增加; +- 使用 Raised button 可将尺寸添加到大多数平面布局中; +- 例如在复杂的内容列表中,或在宽阔的空间中。避免在已经提出的内容(例如对话框或卡片)上使用 Raised button; """; const String _raisedText1 = """### **基本用法** -> 参数的默认的按钮和禁用按钮 -- 如果onPressed回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。 -- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序。"""; +> 参数的默认的 button 和禁用 button; +- 如果onPressed回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按 disabledColor 属性而不是color属性指定的颜色进行着色; +- 如果您尝试更改按钮的颜色并且没有任何效果,请检查您是否正在传递非null onPressed处理程序;"""; const String _raisedText2 = """### **进阶用法1** -> RaisedButton.icon 的用方法,按钮图标和标签的widget创建文本按钮。"""; +> RaisedButton.icon 的用方法,按钮图标和标签的widget创建文本按钮;"""; const String _raisedText3 = """### **进阶用法2** > 更改项参数的自定义,比如:边框,点击效果,内容文字,颜色,圆角等 -- Raised buttons 按钮具有全帽标签,一些内部填充和一些定义的尺寸。 -- 如果您想要水龙头的墨水效果,但又不想使用按钮,请考虑直接使用InkWell。 -- Raised buttons 的最小尺寸为88.0×36.0,可以用ButtonTheme 覆盖。 -- 通过 shape 属性的设置,改变边框样式和圆角。 +- 如果您想要 ink-splash 的墨水效果,但又不想使用按钮,请考虑直接使用InkWell; +- Raised buttons 的最小尺寸为88.0×36.0,可以用 ButtonTheme 覆盖; +- 通过 shape 属性的设置,改变边框样式和圆角; """; class Demo extends StatefulWidget { diff --git a/lib/widgets/elements/Form/Button/RawMaterialButton/index.dart b/lib/widgets/elements/Form/Button/RawMaterialButton/index.dart index 5f982401..3bffb8cd 100644 --- a/lib/widgets/elements/Form/Button/RawMaterialButton/index.dart +++ b/lib/widgets/elements/Form/Button/RawMaterialButton/index.dart @@ -18,13 +18,13 @@ import './demo.dart' as rawMaterialButton; const String _rawMaterialText0 = """### **简介** > RawMaterial button “RawMaterial 按钮” -- 基于Semantics,Material和InkWell 小部件创建按钮。 -- 此类不使用当前Theme或ButtonTheme来计算未指定参数的默认值。它旨在用于自定义材质按钮,可选择包含主题或特定于应用程序源的默认值。 +- 基于 Semantics,Material 和InkWell 小部件创建按钮; +- 此类不使用当前 Theme 或 ButtonTheme 来计算未指定参数的默认值。它旨在用于自定义 Material button,可选择包含主题或特定于应用程序源的默认值; """; const String _rawMaterialText1 = """### **基本用法** -> 参数的默认的按钮和禁用按钮 +> 参数的默认的 button 和禁用 button """; const String _rawMaterialText2 = diff --git a/lib/widgets/elements/Form/CheckBox/Checkbox/index.dart b/lib/widgets/elements/Form/CheckBox/Checkbox/index.dart index ae8047f2..5f0d40d9 100644 --- a/lib/widgets/elements/Form/CheckBox/Checkbox/index.dart +++ b/lib/widgets/elements/Form/CheckBox/Checkbox/index.dart @@ -17,21 +17,21 @@ import './demo.dart' as checkbox; const String _checkboxText0 = """### **简介** > checkbox “复选框” -- 复选框本身不保持任何状态 -- 当复选框的状态发生变化时,窗口小部件会调用onChanged回调。 -- 大多数使用复选框的小部件将侦听onChanged回调,并使用新值重建复选框以更新复选框的可视外观。"""; +- 复选框本身不保持任何状态; +- 当复选框的状态发生变化时,窗口小部件会调用onChanged回调; +- 大多数使用复选框的小部件将侦听onChanged回调,并使用新值重建复选框以更新复选框的可视外观;"""; const String _checkboxText1 = """### **基本用法** > 下面示例展示多个颜色(随机)样式的 `checkbox` -- 一个多选的 `checkbox` +- 一个多选的 `checkbox`; """; const String _checkboxText2 = """### **进阶用法** > 下面示例展示多个颜色(随机)样式的 `checkbox` -- 一个单选 `checkbox` 操作 +- 一个单选 `checkbox` 操作; """; class Demo extends StatefulWidget { diff --git a/lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart b/lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart index db524c76..2592135c 100644 --- a/lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart +++ b/lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart @@ -16,18 +16,18 @@ import './demo.dart' as CheckboxListTileDemo; const String _CheckboxListTileText0 = """### **简介** > CheckboxListTile “下拉复选框” -- 带有复选框的ListTile,带有标签的复选框。 -- 整个列表图块是交互式的:点击图块中的任意位置可切换复选框。 +- 带有复选框的 ListTile,带有标签的 ListTile; +- 整个列表图块是交互式的:点击图块中的任意位置可切换复选框; """; const String _CheckboxListTileText1 = """### **基本用法** > CheckboxListTile 的属性特征 -- Checkbox类似的命名属性,比如:onChanged和activeColor。 -- 和ListTile类似的命名属性,比如:title, subtitle, isThreeLine,dense。 -- selected属性和ListTile.selected 属性类似,但使用的颜色是activeColor属性,默认为当前Theme的颜色。 -- onChanged 回调函数为 null,显示禁用 +- 与 Checkbox 类似的命名属性,比如:onChanged 和 activeColor; +- 和 ListTile 类似的命名属性,比如:title, subtitle, isThreeLine,dense; +- selected 属性和 ListTile.selected 属性类似,但使用的颜色是 activeColor 属性,默认为当前 Theme 的颜色; +- onChanged 回调函数为 null,显示禁用; """; const String _CheckboxListTileText2 = diff --git a/lib/widgets/elements/Frame/Axis/crossAxis/index.dart b/lib/widgets/elements/Frame/Axis/crossAxis/index.dart deleted file mode 100644 index 804339b7..00000000 --- a/lib/widgets/elements/Frame/Axis/crossAxis/index.dart +++ /dev/null @@ -1,46 +0,0 @@ -import 'package:flutter/material.dart'; -import '../../../../../common/widget_demo.dart'; - -class Demo extends StatefulWidget { - static const String routeName = '/element/Frame/Axis/crossAxis'; - _DemoState createState() => _DemoState(); -} - -class _DemoState extends State<Demo> { - @override - Widget build(BuildContext context) { - return WidgetDemo( - title: 'crossAxis', - contentList: [Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: <Widget>[ - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - ], - )], - docUrl: 'https://docs.flutter.io/flutter/widgets/Padding-class.html', - ); - } -} diff --git a/lib/widgets/elements/Frame/Axis/flipAxis/index.dart b/lib/widgets/elements/Frame/Axis/flipAxis/index.dart deleted file mode 100644 index 1928570b..00000000 --- a/lib/widgets/elements/Frame/Axis/flipAxis/index.dart +++ /dev/null @@ -1,79 +0,0 @@ -import 'package:flutter/material.dart'; -import '../../../../../common/widget_demo.dart'; - -class Demo extends StatefulWidget { - static const String routeName = '/element/Frame/Axis/flipAxis'; - _DemoState createState() => _DemoState(); -} - -class _DemoState extends State<Demo> { - Axis _direction ; - - @override - void initState() { - // TODO: implement initState - super.initState(); - _direction = Axis.horizontal; - } - - Axis flipAxis() { - assert(_direction != null); - switch (_direction) { - case Axis.horizontal: - return Axis.vertical; - case Axis.vertical: - return Axis.horizontal; - } - return null; - } - - _changeDirection(){ - setState(() { - _direction=flipAxis(); - }); - } - - @override - Widget build(BuildContext context) { - return WidgetDemo( - title: 'flipAxis', - contentList: [Flex( - direction: _direction, - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.center, - children: <Widget>[ - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - RaisedButton( - child: Text('change direction'), - onPressed: _changeDirection, - ) - ], - )], - docUrl: 'https://docs.flutter.io/flutter/painting/flipAxis.html', - ); - } -} diff --git a/lib/widgets/elements/Frame/Axis/mainAxis/index.dart b/lib/widgets/elements/Frame/Axis/mainAxis/index.dart deleted file mode 100644 index 4b6e088e..00000000 --- a/lib/widgets/elements/Frame/Axis/mainAxis/index.dart +++ /dev/null @@ -1,49 +0,0 @@ -import 'package:flutter/material.dart'; -import '../../../../../common/widget_demo.dart'; - -class Demo extends StatefulWidget { - static const String routeName = '/element/Frame/Axis/Table'; - _DemoState createState() => _DemoState(); -} - -class _DemoState extends State<Demo> { - @override - Widget build(BuildContext context) { - return WidgetDemo( - title: 'mainAxis', - contentList: [Flex( - direction: Axis.vertical, - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.center, - children: <Widget>[ - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - Container( - height: 20.0, - width: 20.0, - color: Colors.blueAccent, - margin: const EdgeInsets.all(10.0), - ), - ], - )], - docUrl: 'https://docs.flutter.io/flutter/material/MergeableMaterial/mainAxis.html', - ); - } -}