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:
@ -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',
|
||||||
|
@ -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',
|
||||||
|
@ -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()
|
|
||||||
)
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
### **基本实例**
|
### **基本实例**
|
||||||
|
|
||||||
|
@ -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容器窗口
|
|
||||||
),
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
### **基本实例**
|
### **基本实例**
|
||||||
|
|
||||||
|
@ -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',
|
||||||
|
@ -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',
|
||||||
);
|
);
|
||||||
|
@ -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
|
||||||
|
Reference in New Issue
Block a user