Skip to content

Commit

Permalink
Merge pull request #162 from ccXxx1aoBai/feature/notice_bar
Browse files Browse the repository at this point in the history 
[TDNoticeBar]新增noticeBar组件
  • Loading branch information
@Luozf12345
Luozf12345 authored Jul 31, 2024
2 parents c9f4c6f + c67b6f6 commit dfb78c0
Show file tree
Hide file tree
Showing 7 changed files with 808 additions and 4 deletions.
1 change: 1 addition & 0 deletions tdesign-component/demo_tool/all_build.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
./bin/demo_tool generate --file ../lib/src/components/loading/td_loading.dart --name TDLoading --folder-name loading --output ../example/assets/api/ --only-api
# message
# noticeBar
./bin/demo_tool generate --file ../lib/src/components/notice_bar --name TDNoticeBar,TDNoticeBarStyle --folder-name notice-bar --output ../example/assets/api/ --only-api --get-comments
# overlay
# popup
./bin/demo_tool generate --folder ../lib/src/components/popup --name TDSlidePopupRoute,TDPopupBottomDisplayPanel,TDPopupBottomConfirmPanel,TDPopupCenterPanel --folder-name popup --output ../example/assets/api/ --only-api --get-comments
Expand Down
34 changes: 34 additions & 0 deletions tdesign-component/example/assets/api/notice-bar_api.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
## API
### TDNoticeBar
#### 默认构造方法

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| key | | - | |
| context | dynamic | - | 文本内容 |
| style | TDNoticeBarStyle? | - | 公告栏样式 |
| left | Widget? | - | 左侧内容（自定义左侧内容，优先级高于prefixIcon） |
| right | Widget? | - | 侧内容（自定义右侧内容，优先级高于suffixIcon） |
| marquee | bool? | false | 跑马灯效果 |
| speed | double? | 50 | 滚动速度 |
| interval | int? | 3000 | 步进滚动间隔时间（毫秒） |
| direction | Axis? | Axis.horizontal | 滚动方向 |
| theme | TDNoticeBarThemez? | TDNoticeBarThemez.info | 主题 |
| prefixIcon | IconData? | - | 左侧图标 |
| suffixIcon | IconData? | - | 右侧图标 |
| onTap | ValueChanged<dynamic>? | - | 点击事件 |

```
```
### TDNoticeBarStyle
#### 默认构造方法

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| context | BuildContext? | - | 上下文 |
| backgroundColor | Color? | - | 公告栏的背景色 |
| leftIconColor | Color? | - | 公告栏左侧图标的颜色 |
| rightIconColor | Color? | - | 公告栏右侧图标的颜色 |
| padding | EdgeInsetsGeometry? | EdgeInsets.only(top: 13, bottom: 13, left: 16, right: 12) | 公告栏的内边距 |
| textStyle | TextStyle? | TextStyle(color: TDTheme.of(context).fontGyColor1, fontSize: 16, height: 1) | 公告栏内容的文本样式 |

6 changes: 2 additions & 4 deletions tdesign-component/example/lib/config.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import 'page/td_input_page.dart';
import 'page/td_link_page.dart';
import 'page/td_loading_page.dart';
import 'page/td_navbar_page.dart';
import 'page/td_notice_bar_page.dart';
import 'page/td_picker_page.dart';
import 'page/td_popup_page.dart';
import 'page/td_radio_page.dart';
Expand Down Expand Up @@ -227,10 +228,7 @@ Map<String, List<ExamplePageModel>> exampleMap = {
isTodo: true,
pageBuilder: _wrapInheritedTheme((context) => const TodoPage())),
ExamplePageModel(
text: 'NoticeBar 公告栏',
name: 'notice_bar',
isTodo: true,
pageBuilder: _wrapInheritedTheme((context) => const TodoPage())),
text: 'NoticeBar 公告栏', name: 'notice-bar', pageBuilder: _wrapInheritedTheme((context) => const TDNoticeBarPage())),
ExamplePageModel(
text: 'Overlay 遮罩层',
name: 'overlay',
Expand Down
262 changes: 262 additions & 0 deletions tdesign-component/example/lib/page/td_notice_bar_page.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
/// @Type Flutter
/// @Author lwb
/// @Date 2024/5/28
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

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

class TDNoticeBarPage extends StatelessWidget {
const TDNoticeBarPage({super.key});

@override
Widget build(BuildContext context) {
return ExamplePage(
title: tdTitle(context),
exampleCodeGroup: 'noticeBar',
desc: '在导航栏下方，用于给用户显示提示消息。',
backgroundColor: Colors.white,
children: [
ExampleModule(title: '组件类型', children: [
ExampleItem(desc: '纯文字的公告栏', builder: _textNoticeBar),
ExampleItem(desc: '可滚动的公告栏', builder: _scrollNoticeBar),
ExampleItem(builder: _scrollIconNoticeBar),
ExampleItem(desc: '带图标的公告栏', builder: _iconNoticeBar),
ExampleItem(desc: '带关闭的公告栏', builder: _closeNoticeBar),
ExampleItem(desc: '带入口的公告栏', builder: _entranceNoticeBar1),
ExampleItem(builder: _entranceNoticeBar2),
ExampleItem(desc: '自定义样式的公告栏', builder: _customNoticeBar),
]),
ExampleModule(title: '组件状态', children: [
ExampleItem(desc: '普通通知', builder: _normalNoticeBar),
ExampleItem(desc: '成功通知', builder: _successNoticeBar),
ExampleItem(desc: '警示通知', builder: _warningNoticeBar),
ExampleItem(desc: '错误通知', builder: _errorNoticeBar),
]),
ExampleModule(title: '组件样式', children: [
ExampleItem(desc: '卡片顶部', builder: _cardNoticeBar),
])
],
test: [
ExampleItem(desc: '带点击事件的公告栏', builder: _tapNoticeBar),
ExampleItem(desc: '自定义左侧内容的公告栏', builder: _leftNoticeBar),
ExampleItem(desc: '垂直滚动的公告栏', builder: _stepNoticeBar),
],
);
}
}

@Demo(group: 'noticeBar')
Widget _textNoticeBar(BuildContext context) {
return const TDNoticeBar(context: '这是一条普通的通知信息');
}

@Demo(group: 'noticeBar')
Widget _scrollNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '提示文字描述提示文字描述提示文字描述提示文字描述提示文字',
marquee: true,
speed: 50,
);
}

@Demo(group: 'noticeBar')
Widget _scrollIconNoticeBar(BuildContext context) {
return const Padding(
padding: EdgeInsets.only(top: 16),
child: TDNoticeBar(
context: '提示文字描述提示文字描述提示文字描述提示文字描述提示文字',
speed: 50,
prefixIcon: TDIcons.sound,
marquee: true,
),
);
}

@Demo(group: 'noticeBar')
Widget _iconNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
);
}

@Demo(group: 'noticeBar')
Widget _closeNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
suffixIcon: TDIcons.close,
);
}

@Demo(group: 'noticeBar')
Widget _entranceNoticeBar1(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
right: TDButton(
text: '文字按钮',
type: TDButtonType.text,
theme: TDButtonTheme.primary,
size: TDButtonSize.extraSmall,
height: 22,
padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
),
);
}

@Demo(group: 'noticeBar')
Widget _entranceNoticeBar2(BuildContext context) {
return const Padding(
padding: EdgeInsets.only(top: 16),
child: TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
suffixIcon: TDIcons.chevron_right,
),
);
}

@Demo(group: 'noticeBar')
Widget _customNoticeBar(BuildContext context) {
return TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.notification,
suffixIcon: TDIcons.chevron_right,
style: TDNoticeBarStyle(backgroundColor: TDTheme.of(context).grayColor3),
);
}

@Demo(group: 'noticeBar')
Widget _normalNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
theme: TDNoticeBarTheme.info,
);
}

@Demo(group: 'noticeBar')
Widget _successNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
theme: TDNoticeBarTheme.success,
);
}

@Demo(group: 'noticeBar')
Widget _warningNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
theme: TDNoticeBarTheme.warning,
);
}

@Demo(group: 'noticeBar')
Widget _errorNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
theme: TDNoticeBarTheme.error,
);
}

@Demo(group: 'noticeBar')
Widget _cardNoticeBar(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: TDNoticeBarStyle.generateTheme(context).backgroundColor,
borderRadius: const BorderRadius.all(Radius.circular(9)),
boxShadow: const [
BoxShadow(
color: Color(0x0d000000),
blurRadius: 8,
spreadRadius: 2,
offset: Offset(0, 2),
),
BoxShadow(
color: Color(0x0f000000),
blurRadius: 10,
spreadRadius: 1,
offset: Offset(0, 8),
),
BoxShadow(
color: Color(0x1a000000),
blurRadius: 5,
spreadRadius: -3,
offset: Offset(0, 5),
),
],
),
child: Column(
children: [
Container(
width: size.width - 32,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
),
clipBehavior: Clip.hardEdge,
child: const TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
suffixIcon: TDIcons.chevron_right,
),
),
Container(
height: 150,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(12)),
),
)
],
),
);
}

@Demo(group: 'noticeBar')
Widget _tapNoticeBar(BuildContext context) {
return TDNoticeBar(
context: '这是一条普通的通知信息',
prefixIcon: TDIcons.error_circle_filled,
suffixIcon: TDIcons.chevron_right,
onTap: (trigger) {
TDToast.showText('tap:$trigger', context: context);
},
);
}

@Demo(group: 'noticeBar')
Widget _leftNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: '这是一条普通的通知信息',
suffixIcon: TDIcons.chevron_right,
left: TDButton(
text: '文本',
type: TDButtonType.text,
theme: TDButtonTheme.primary,
size: TDButtonSize.extraSmall,
height: 22,
padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
),
);
}

@Demo(group: 'noticeBar')
Widget _stepNoticeBar(BuildContext context) {
return const TDNoticeBar(
context: ['君不见黄河之水天上来', '奔流到海不复回', '君不见'],
direction: Axis.vertical,
prefixIcon: TDIcons.sound,
marquee: true,
);
}
Loading

0 comments on commit dfb78c0

Please sign in to comment.