Skip to content

Commit

Permalink
feat(switch): demo页面新增测试代码
Browse files Browse the repository at this point in the history
  • Loading branch information
broadli committed Feb 20, 2023
1 parent bed03eb commit 79ed97b
Showing 1 changed file with 206 additions and 90 deletions.
296 changes: 206 additions & 90 deletions example/lib/page/td_switch_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:tdesign_flutter/td_export.dart';

import '../annotation/demo.dart';
import '../base/example_widget.dart';

///
Expand All @@ -18,93 +19,35 @@ class TDSwitchPage extends StatefulWidget {
class TDSwitchPageState extends State<TDSwitchPage> {
@override
Widget build(BuildContext context) {
var current =
ExamplePage(title: 'Switch 开关', desc: '用于控制某个功能的开启和关闭。', children: [
ExampleModule(
title: '组件类型',
var current = ExamplePage(
title: 'Switch 开关',
exampleCodeGroup: 'switch',
desc: '用于控制某个功能的开启和关闭。',
children: [
ExampleItem(builder: (_) => _title('基础开关')),
ExampleItem(
builder: (_) => Column(
mainAxisSize: MainAxisSize.min,
children: [demoRow(context, '基础开关', on: true)],
)),
ExampleItem(builder: (_) => _title('带描述开关')),
ExampleItem(
builder: (_) => Column(
mainAxisSize: MainAxisSize.min,
children: [
demoRow(context, '带文字开关',
on: true, type: TDSwitchType.text),
demoRow(context, '带图标开关',
on: true, type: TDSwitchType.icon)
],
)),
ExampleItem(builder: (_) => _title('自定义颜色开关')),
ExampleItem(
builder: (_) =>
demoRow(context, '自定义颜色开关', on: true, onColor: Colors.green),
ExampleModule(
title: '组件类型',
children: [
ExampleItem(desc: '基础开关', builder: _buildSwitchWithBase),
ExampleItem(desc: '带描述开关', builder: _buildSwitchWithText),
ExampleItem(builder: _buildSwitchWithIcon),
ExampleItem(desc: '自定义颜色开关', builder: _buildSwitchWithColor),
],
),
],
),
ExampleModule(title: '组件状态', children: [
ExampleItem(builder: (_) => _title('加载状态')),
ExampleItem(
builder: (_) => Column(
mainAxisSize: MainAxisSize.min,
children: [
demoRow(
context,
'加载状态',
on: false,
type: TDSwitchType.loading,
),
demoRow(
context,
'加载状态',
on: true,
type: TDSwitchType.loading,
),
],
)),
ExampleItem(builder: (_) => _title('禁用状态')),
ExampleItem(
builder: (_) => Column(
mainAxisSize: MainAxisSize.min,
children: [
demoRow(context, '禁用状态', on: false, enable: false),
demoRow(context, '禁用状态', on: true, enable: false),
],
)),
]),
ExampleModule(title: '组件样式', children: [
ExampleItem(builder: (_) => _title('开关尺寸')),
ExampleItem(
builder: (_) => Column(
mainAxisSize: MainAxisSize.min,
children: [
demoRow(context, '大尺寸32',
on: true, size: TDSwitchSize.large),
demoRow(context, '中尺寸28',
on: true, size: TDSwitchSize.medium),
demoRow(context, '小尺寸24',
on: true, size: TDSwitchSize.small),
],
)),
]),
]);
ExampleModule(title: '组件状态', children: [
ExampleItem(desc: '加载状态', builder: _buildSwitchWithLoadingOff),
ExampleItem(builder: _buildSwitchWithLoadingOn),
ExampleItem(desc: '禁用状态', builder: _buildSwitchWithDisableOff),
ExampleItem(builder: _buildSwitchWithDisableOn),
]),
ExampleModule(title: '组件样式', children: [
ExampleItem(desc: '开关尺寸', builder: _buildSwitchWithSizeLarge),
ExampleItem(builder: _buildSwitchWithSizeMed),
ExampleItem(builder: _buildSwitchWithSizeSmall),
]),
]);
return current;
}

Widget _title(String title) {
return Container(
height: 40,
padding: const EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
child: Text(title),
);
}

Widget demoRow(
BuildContext context,
String? title, {
Expand All @@ -129,14 +72,13 @@ class TDSwitchPageState extends State<TDSwitchPage> {
textColor: theme.grayColor6,
),
SizedBox(
child: TDSwitch(
isOn: on,
onColor: onColor,
enable: enable,
offColor: offColor,
size: size,
type: type,
),
child: _buildSwitch(
on: on,
enable: enable,
onColor: onColor,
offColor: offColor,
size: size,
type: type),
)
],
);
Expand All @@ -155,4 +97,178 @@ class TDSwitchPageState extends State<TDSwitchPage> {
);
return current;
}

/// 每一项的封装
@Demo(group: 'switch')
Widget _buildItem(BuildContext context, Widget switchItem,
{String? title, String? desc}) {
final theme = TDTheme.of(context);
Widget current = Row(
children: [
Expanded(
child: TDText(
title ?? '',
textColor: theme.fontGyColor1,
)),
TDText(
desc ?? '',
textColor: theme.grayColor6,
),
SizedBox(child: switchItem)
],
);
current = Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: SizedBox(
child: Container(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: current,
),
color: Colors.white,
),
height: 56,
),
);
return Column(mainAxisSize: MainAxisSize.min, children: [current]);
}

@Demo(group: 'switch')
Widget _buildSwitchWithBase(BuildContext context) {
return _buildItem(
context,
const TDSwitch(),
title: '基础开关',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithText(BuildContext context) {
return _buildItem(
context,
const TDSwitch(isOn: true, type: TDSwitchType.text),
title: '带文字开关',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithIcon(BuildContext context) {
return _buildItem(
context,
const TDSwitch(isOn: true, type: TDSwitchType.icon),
title: '带图标开关',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithColor(BuildContext context) {
return _buildItem(
context,
const TDSwitch(isOn: true, onColor: Colors.green),
title: '自定义颜色开关',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithLoadingOff(BuildContext context) {
return _buildItem(
context,
const TDSwitch(
isOn: false,
type: TDSwitchType.loading,
),
title: '加载状态',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithLoadingOn(BuildContext context) {
return _buildItem(
context,
const TDSwitch(
isOn: true,
type: TDSwitchType.loading,
),
title: '加载状态',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithDisableOff(BuildContext context) {
return _buildItem(
context,
const TDSwitch(
enable: false,
isOn: false,
),
title: '禁用状态',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithDisableOn(BuildContext context) {
return _buildItem(
context,
const TDSwitch(
enable: false,
isOn: true,
),
title: '禁用状态',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithSizeLarge(BuildContext context) {
return _buildItem(
context,
const TDSwitch(
isOn: true,
size: TDSwitchSize.large,
),
title: '大尺寸32',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithSizeMed(BuildContext context) {
return _buildItem(
context,
const TDSwitch(
isOn: true,
size: TDSwitchSize.medium,
),
title: '中尺寸28',
);
}

@Demo(group: 'switch')
Widget _buildSwitchWithSizeSmall(BuildContext context) {
return _buildItem(
context,
const TDSwitch(
isOn: true,
size: TDSwitchSize.small,
),
title: '中尺寸24',
);
}

@Demo(group: 'switch')
Widget _buildSwitch({
bool on = true,
bool enable = true,
Color? onColor,
Color? offColor,
TDSwitchSize? size,
TDSwitchType? type,
}) {
return TDSwitch(
isOn: on,
onColor: onColor,
enable: enable,
offColor: offColor,
size: size,
type: type,
);
}
}

0 comments on commit 79ed97b

Please sign in to comment.