mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-05-20 22:36:34 +08:00
refactor(整理demo的介绍说明):
This commit is contained in:
sanfan.hx
@ -11,28 +11,20 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
const content1 = """
|
||||
# Radio
|
||||
### **简介**
|
||||
> material design 风格的单选按钮
|
||||
|
||||
Radio widget 代表表单中的单选按钮, 当groupValue = value时代表组件被选中。
|
||||
|
||||
在表单中, 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
|
||||
|
||||
# 示例显示
|
||||
""";
|
||||
|
||||
const content2 = """
|
||||
# 基本用法
|
||||
|
||||
```
|
||||
new Radio(
|
||||
value: value,
|
||||
groupValue: groupValue, //当value和groupValue一致的时候则选中
|
||||
onChanged: (T){
|
||||
onChange(T);
|
||||
}
|
||||
|
||||
````
|
||||
### **基本用法**
|
||||
以下是Radio的属性主产明
|
||||
- activeColor → Color - 激活时的颜色。
|
||||
- groupValue → T - 选择组的值。
|
||||
- onChanged → ValueChanged - 改变时触发。
|
||||
- value → T - 单选的值。
|
||||
""";
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Form/Radio/index';
|
||||
@ -46,7 +38,6 @@ class _DemoState extends State<Demo> {
|
||||
contentList: [
|
||||
content1,
|
||||
new RadioADemo(),
|
||||
content2
|
||||
],
|
||||
title: 'Radio',
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html',
|
||||
|
||||
@ -11,28 +11,15 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
const content1 = """
|
||||
# RadioListTile
|
||||
### **简介**
|
||||
> material design 风格的单选按钮附加文字label
|
||||
|
||||
点击文字的同时 , 将会出发 Radio的点击效果.
|
||||
|
||||
功能同 @Radio
|
||||
|
||||
# 示例显示
|
||||
""";
|
||||
|
||||
const content2 = """
|
||||
# 基本用法
|
||||
|
||||
``` dart
|
||||
RadioListTile(
|
||||
title: const Text('title'),
|
||||
value: value,
|
||||
groupValue: groupValue,
|
||||
onChanged:onChange
|
||||
)
|
||||
```
|
||||
|
||||
### **基本用法**
|
||||
Radio是单选框，和checkbox一样本身不包含状态，当groupValue = value时代表选中状态
|
||||
""";
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Form/RadioListTile/index';
|
||||
@ -45,8 +32,7 @@ class _DemoState extends State<Demo> {
|
||||
return WidgetDemo(
|
||||
contentList: [
|
||||
content1,
|
||||
new DemoA(),
|
||||
content2
|
||||
new DemoA()
|
||||
],
|
||||
title: 'RadioListTile',
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/RadioListTile-class.html',
|
||||
|
||||
@ -46,25 +46,8 @@ const contentB = '''
|
||||
### **高级用法**
|
||||
> 自定义Slider 样式
|
||||
|
||||
如果当前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()
|
||||
)
|
||||
|
||||
```
|
||||
|
||||
### **基本实例**
|
||||
|
||||
|
||||
@ -21,32 +21,7 @@ const contentA = '''
|
||||
|
||||
> 通过更改sliderTheme.data, 修改Slider总体样式
|
||||
|
||||
基本属性参考以下代码:
|
||||
|
||||
```
|
||||
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容器窗口
|
||||
),
|
||||
|
||||
```
|
||||
具体属性, 请查阅: SliderThemeData.data.
|
||||
|
||||
### **基本实例**
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
const contentA = '''
|
||||
### **简介**
|
||||
> SliderTheme的data修饰属性 **SliderThemeData**
|
||||
@ -21,30 +21,6 @@ const contentA = '''
|
||||
|
||||
> 配合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> {
|
||||
|
||||
Color c = CupertinoColors.darkBackgroundGray;
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'SliderThemeData',
|
||||
|
||||
@ -17,22 +17,7 @@ const contentA = '''
|
||||
|
||||
|
||||
### **基本用法**
|
||||
|
||||
```
|
||||
new Switch(
|
||||
value: isChecked,
|
||||
activeColor: Colors.blue, // 激活时原点颜色
|
||||
onChanged: (bool val) {
|
||||
this.setState(() {
|
||||
this.isChecked = !this.isChecked;
|
||||
});
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
### **基本实例**
|
||||
|
||||
@SwitchDemo
|
||||
通常用于Bool值参数的设置.
|
||||
''';
|
||||
|
||||
|
||||
@ -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 {
|
||||
static const String routeName = 'elements/Form/Switch/Switch';
|
||||
@ -83,15 +56,14 @@ class _Demo extends State<Demo> {
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'Switch',
|
||||
codeUrl: '',
|
||||
codeUrl: '/elements/Form/Switch/Switch/demo.dart',
|
||||
contentList: [
|
||||
contentA,
|
||||
SwitchDemo(),
|
||||
contentB,
|
||||
SwitchHighDemo(),
|
||||
contentC,
|
||||
SwitchTypesDemo(),
|
||||
contentD
|
||||
SwitchTypesDemo()
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html',
|
||||
);
|
||||
|
||||
@ -167,6 +167,7 @@ flutter:
|
||||
- lib/widgets/themes/Cupertino/CupertinoScrollbar/demo.dart
|
||||
- lib/widgets/themes/Cupertino/CupertinoSlider/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/CupertinoTabBar/demo.dart
|
||||
- lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart
|
||||
|
||||
Reference in New Issue
Block a user