mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-07-15 03:04:25 +08:00
Modify:
1.整理文件 2.修正 analysis
This commit is contained in:
@ -10,7 +10,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/*
|
||||
* Checkbox 默认AppBar的实例
|
||||
* 默认 AppBar 的实例
|
||||
* index 当前AppBar 的索引值
|
||||
* */
|
||||
class AppBarLessDefaultComplex extends StatefulWidget {
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
@ -10,7 +10,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/*
|
||||
* Checkbox 默认SliverAppBar的实例
|
||||
* 默认 SliverAppBar 的实例
|
||||
* */
|
||||
class SliverAppBarFullDefault extends StatefulWidget {
|
||||
const SliverAppBarFullDefault() : super();
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
@ -14,11 +14,11 @@ const String _Text0 = """
|
||||
### **简介**
|
||||
> SnackBarAction “屏幕底部消息右侧可操作的行为”
|
||||
|
||||
带有可选操作的轻量级消息,短暂显示在屏幕底部, 并提供按钮交互。
|
||||
- 带有可选操作的轻量级消息,短暂显示在屏幕底部, 并提供按钮交互。
|
||||
|
||||
### **基本用法**
|
||||
|
||||
> 为SnackBar加入action[SnackBarAction]显示按区, 默认下是隐藏的.
|
||||
> 为SnackBar加入action[SnackBarAction]显示按区, 默认下是隐藏的
|
||||
|
||||
""";
|
||||
|
||||
|
@ -15,7 +15,7 @@ const String _Text0 = """
|
||||
### **简介**
|
||||
> SnackBarAction 来实现并行界面的横向滑动展示
|
||||
|
||||
TabBar,是材料设计中很常用的一种横向标签. 来实现并行界面的横向滑动展示,在Flutter的世界中,TabBar有着相同的作用。通常,我们会在AppBar的底部部分结合TabBarView来使用TabBar。
|
||||
- TabBar,是材料设计中很常用的一种横向标签. 来实现并行界面的横向滑动展示,在Flutter的世界中,TabBar有着相同的作用。通常,我们会在AppBar的底部部分结合TabBarView来使用TabBar;
|
||||
|
||||
|
||||
|
||||
|
@ -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(
|
||||
|
@ -11,7 +11,7 @@ import 'demo.dart';
|
||||
const String content0 = '''
|
||||
### **简介**
|
||||
> 通过使用标签或者描述性词语来过滤内容
|
||||
- FilterChip是checkbox或switch widget 的替换品。
|
||||
- FilterChip 是 checkbox 或 switch widget 的替换品。
|
||||
|
||||
''';
|
||||
const String content1 = '''
|
||||
|
@ -134,7 +134,9 @@ class ListViewLessDefault extends StatelessWidget {
|
||||
),
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
@ -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 {
|
||||
|
@ -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 中;
|
||||
""";
|
||||
|
||||
|
||||
|
@ -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 自定义的实例
|
||||
|
@ -18,7 +18,7 @@ import './demo.dart' as dropdownButton;
|
||||
const String _dropdownText0 =
|
||||
"""### **简介**
|
||||
> Dropdown button “用于从项目列表中进行选择的按钮”
|
||||
- 类型T是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常,使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法。。
|
||||
- 参数类型 T 是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常,使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法;
|
||||
""";
|
||||
|
||||
const String _dropdownText1 =
|
||||
|
@ -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';
|
||||
|
@ -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 =
|
||||
|
@ -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 文字 **
|
||||
""";
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 =
|
||||
|
@ -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 {
|
||||
|
@ -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 =
|
||||
|
@ -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',
|
||||
);
|
||||
}
|
||||
}
|
@ -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',
|
||||
);
|
||||
}
|
||||
}
|
@ -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',
|
||||
);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user