refactor(整理demo的介绍说明):

This commit is contained in:
sanfan.hx
2019-01-30 10:40:44 +08:00
parent 30c6a551a1
commit 4405d157a3
7 changed files with 19 additions and 135 deletions

View File

@ -11,28 +11,20 @@ import 'package:flutter/material.dart';
import 'package:flutter_go/components/widget_demo.dart'; import 'package:flutter_go/components/widget_demo.dart';
import 'demo.dart'; import 'demo.dart';
const content1 = """ const content1 = """
# Radio ### **简介**
> material design 风格的单选按钮 > material design 风格的单选按钮
Radio widget 代表表单中的单选按钮, 当groupValue = value时代表组件被选中。 Radio widget 代表表单中的单选按钮, 当groupValue = value时代表组件被选中。
在表单中, 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。 在表单中, 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。
# 示例显示
""";
const content2 = """ ### **基本用法**
# 基本用法 以下是Radio的属性主产明
- activeColor → Color - 激活时的颜色。
``` - groupValue → T - 选择组的值。
new Radio( - onChanged → ValueChanged - 改变时触发。
value: value, - value → T - 单选的值。
groupValue: groupValue, //当value和groupValue一致的时候则选中
onChanged: (T){
onChange(T);
}
````
"""; """;
class Demo extends StatefulWidget { class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Radio/index'; static const String routeName = '/element/Form/Radio/index';
@ -46,7 +38,6 @@ class _DemoState extends State<Demo> {
contentList: [ contentList: [
content1, content1,
new RadioADemo(), new RadioADemo(),
content2
], ],
title: 'Radio', title: 'Radio',
docUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html', docUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html',

View File

@ -11,28 +11,15 @@ import 'package:flutter/material.dart';
import 'package:flutter_go/components/widget_demo.dart'; import 'package:flutter_go/components/widget_demo.dart';
import 'demo.dart'; import 'demo.dart';
const content1 = """ const content1 = """
# RadioListTile ### **简介**
> material design 风格的单选按钮附加文字label > material design 风格的单选按钮附加文字label
点击文字的同时 , 将会出发 Radio的点击效果. 点击文字的同时 , 将会出发 Radio的点击效果.
功能同 @Radio 功能同 @Radio
# 示例显示 ### **基本用法**
"""; Radio是单选框和checkbox一样本身不包含状态当groupValue = value时代表选中状态
const content2 = """
# 基本用法
``` dart
RadioListTile(
title: const Text('title'),
value: value,
groupValue: groupValue,
onChanged:onChange
)
```
"""; """;
class Demo extends StatefulWidget { class Demo extends StatefulWidget {
static const String routeName = '/element/Form/RadioListTile/index'; static const String routeName = '/element/Form/RadioListTile/index';
@ -45,8 +32,7 @@ class _DemoState extends State<Demo> {
return WidgetDemo( return WidgetDemo(
contentList: [ contentList: [
content1, content1,
new DemoA(), new DemoA()
content2
], ],
title: 'RadioListTile', title: 'RadioListTile',
docUrl: 'https://docs.flutter.io/flutter/material/RadioListTile-class.html', docUrl: 'https://docs.flutter.io/flutter/material/RadioListTile-class.html',

View File

@ -48,23 +48,6 @@ const contentB = '''
如果当前Slider样式 无法满足需求, 可以通过 **SliderTheme** 定制复杂样式 如果当前Slider样式 无法满足需求, 可以通过 **SliderTheme** 定制复杂样式
```
new SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.yellowAccent,//实际进度的颜色
inactiveTickMarkColor:Colors.black
thumbColor: Colors.black,//滑块中心的颜色
inactiveTrackColor:Colors.red,//默 认进度条的颜色
valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
color: Colors.white,
),
inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
overlayColor: Colors.pink,//滑块边缘颜色
child: new Slider()
)
```
### **基本实例** ### **基本实例**

View File

@ -21,32 +21,7 @@ const contentA = '''
> 通过更改sliderTheme.data, 修改Slider总体样式 > 通过更改sliderTheme.data, 修改Slider总体样式
基本属性参考以下代码: 具体属性, 请查阅: SliderThemeData.data.
```
new SliderTheme(
data: SliderThemeData({
@required Color activeTrackColor,
@required Color inactiveTrackColor,
@required Color disabledActiveTrackColor,
@required Color disabledInactiveTrackColor,
@required Color activeTickMarkColor,
@required Color inactiveTickMarkColor,
@required Color disabledActiveTickMarkColor,
@required Color disabledInactiveTickMarkColor,
@required Color thumbColor,
@required Color disabledThumbColor,
@required Color overlayColor,
@required Color valueIndicatorColor,
@required SliderComponentShape thumbShape,
@required SliderComponentShape valueIndicatorShape,
@required ShowValueIndicator showValueIndicator,
@required TextStyle valueIndicatorTextStyle
}),
child: anyWidgetContain(Slider) // 用来包含slider的widget容器窗口
),
```
### **基本实例** ### **基本实例**

View File

@ -10,7 +10,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_go/components/widget_demo.dart'; import 'package:flutter_go/components/widget_demo.dart';
import 'demo.dart'; import 'demo.dart';
import 'package:flutter/cupertino.dart';
const contentA = ''' const contentA = '''
### **简介** ### **简介**
> SliderTheme的data修饰属性 **SliderThemeData** > SliderTheme的data修饰属性 **SliderThemeData**
@ -21,30 +21,6 @@ const contentA = '''
> 配合SliderTheme, 修改slider组件各个部件的样式, 参照@Slider的各组件命名, 修改各部件样式 > 配合SliderTheme, 修改slider组件各个部件的样式, 参照@Slider的各组件命名, 修改各部件样式
构造函数如下
````
const SliderThemeData({
@required Color activeTrackColor,
@required Color inactiveTrackColor,
@required Color disabledActiveTrackColor,
@required Color disabledInactiveTrackColor,
@required Color activeTickMarkColor,
@required Color inactiveTickMarkColor,
@required Color disabledActiveTickMarkColor,
@required Color disabledInactiveTickMarkColor,
@required Color thumbColor,
@required Color disabledThumbColor,
@required Color overlayColor,
@required Color valueIndicatorColor,
@required SliderComponentShape thumbShape,
@required SliderComponentShape valueIndicatorShape,
@required ShowValueIndicator showValueIndicator,
@required TextStyle valueIndicatorTextStyle
})
````
### **基本实例**
'''; ''';
@ -56,7 +32,7 @@ class Demo extends StatefulWidget {
} }
class _Demo extends State<Demo> { class _Demo extends State<Demo> {
Color c = CupertinoColors.darkBackgroundGray;
Widget build(BuildContext context) { Widget build(BuildContext context) {
return WidgetDemo( return WidgetDemo(
title: 'SliderThemeData', title: 'SliderThemeData',

View File

@ -17,22 +17,7 @@ const contentA = '''
### **基本用法** ### **基本用法**
通常用于Bool值参数的设置.
```
new Switch(
value: isChecked,
activeColor: Colors.blue, // 激活时原点颜色
onChanged: (bool val) {
this.setState(() {
this.isChecked = !this.isChecked;
});
},
)
```
### **基本实例**
@SwitchDemo
'''; ''';
@ -60,18 +45,6 @@ const contentC = '''
'''; ''';
const contentD = '''
```
activeTrackColor:Colors.green,
inactiveThumbColor: Colors.black,
inactiveThumbImage: NetworkImage('https://flutter.io/images/homepage/header-illustration.png'),
activeThumbImage: NetworkImage(
"https://flutter.io/images/homepage/screenshot-2.png"
),
inactiveTrackColor: Colors.yellow,
```
''';
class Demo extends StatefulWidget { class Demo extends StatefulWidget {
static const String routeName = 'elements/Form/Switch/Switch'; static const String routeName = 'elements/Form/Switch/Switch';
@ -83,15 +56,14 @@ class _Demo extends State<Demo> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return WidgetDemo( return WidgetDemo(
title: 'Switch', title: 'Switch',
codeUrl: '', codeUrl: '/elements/Form/Switch/Switch/demo.dart',
contentList: [ contentList: [
contentA, contentA,
SwitchDemo(), SwitchDemo(),
contentB, contentB,
SwitchHighDemo(), SwitchHighDemo(),
contentC, contentC,
SwitchTypesDemo(), SwitchTypesDemo()
contentD
], ],
docUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html', docUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html',
); );

View File

@ -167,6 +167,7 @@ flutter:
- lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart - lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart
- lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart - lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart
- lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart - lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart
- lib/widgets/elements/Form/Switch/Switch/demo.dart
- lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart - lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart
- lib/widgets/themes/Cupertino/CupertinoTabBar/demo.dart - lib/widgets/themes/Cupertino/CupertinoTabBar/demo.dart
- lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart - lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart