diff --git a/tdesign-component/demo_tool/all_build.sh b/tdesign-component/demo_tool/all_build.sh
index 00be18b3d..9ece8afb0 100644
--- a/tdesign-component/demo_tool/all_build.sh
+++ b/tdesign-component/demo_tool/all_build.sh
@@ -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
diff --git a/tdesign-component/example/assets/api/notice-bar_api.md b/tdesign-component/example/assets/api/notice-bar_api.md
new file mode 100644
index 000000000..e54c1b6f9
--- /dev/null
+++ b/tdesign-component/example/assets/api/notice-bar_api.md
@@ -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) | 公告栏内容的文本样式 |
+
diff --git a/tdesign-component/example/lib/config.dart b/tdesign-component/example/lib/config.dart
index c787754fe..701116c78 100644
--- a/tdesign-component/example/lib/config.dart
+++ b/tdesign-component/example/lib/config.dart
@@ -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';
@@ -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',
diff --git a/tdesign-component/example/lib/page/td_notice_bar_page.dart b/tdesign-component/example/lib/page/td_notice_bar_page.dart
new file mode 100644
index 000000000..770f9301a
--- /dev/null
+++ b/tdesign-component/example/lib/page/td_notice_bar_page.dart
@@ -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,
+  );
+}
diff --git a/tdesign-component/lib/src/components/notice_bar/td_notice_bar.dart b/tdesign-component/lib/src/components/notice_bar/td_notice_bar.dart
new file mode 100644
index 000000000..591caa303
--- /dev/null
+++ b/tdesign-component/lib/src/components/notice_bar/td_notice_bar.dart
@@ -0,0 +1,406 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+import '../../../tdesign_flutter.dart';
+
+class TDNoticeBar extends StatefulWidget {
+  const TDNoticeBar({
+    super.key,
+    this.context,
+    this.style,
+    this.left,
+    this.right,
+    this.speed = 50,
+    this.interval = 3000,
+    this.marquee = false,
+    this.direction = Axis.horizontal,
+    this.theme = TDNoticeBarTheme.info,
+    this.prefixIcon,
+    this.suffixIcon,
+    this.onTap,
+    this.height = 22,
+  });
+
+  /// 文本内容
+  final dynamic context;
+
+  /// 公告栏样式
+  final TDNoticeBarStyle? style;
+
+  /// 左侧内容（自定义左侧内容，优先级高于prefixIcon）
+  final Widget? left;
+
+  /// 右侧内容（自定义右侧内容，优先级高于suffixIcon）
+  final Widget? right;
+
+  /// 跑马灯效果
+  final bool? marquee;
+
+  /// 滚动速度
+  final double? speed;
+
+  /// 步进滚动间隔时间（毫秒）
+  final int? interval;
+
+  /// 滚动方向
+  final Axis? direction;
+
+  /// 主题
+  final TDNoticeBarTheme? theme;
+
+  /// 左侧图标
+  final IconData? prefixIcon;
+
+  /// 右侧图标
+  final IconData? suffixIcon;
+
+  /// 点击事件
+  final ValueChanged? onTap;
+
+  /// 文字高度 (当使用prefixIcon或suffixIcon时，icon大小值等于该属性）
+  final double height;
+
+  @override
+  State<StatefulWidget> createState() => _TDNoticeBarState();
+}
+
+class _TDNoticeBarState extends State<TDNoticeBar> {
+  ScrollController? _scrollController;
+  Timer? _timer;
+  Size? _size;
+  TDNoticeBarStyle? _style;
+  Color? _backgroundColor;
+  Widget? _left;
+  Widget? _right;
+  final GlobalKey _key = GlobalKey();
+  final GlobalKey _contextKey = GlobalKey();
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.speed! < 0) {
+      throw Exception('speed must not be less than 0');
+    }
+    if (widget.interval! <= 0) {
+      throw Exception('interval must not be less than 0');
+    }
+    _scrollController = ScrollController();
+    _init();
+    WidgetsBinding.instance.addPostFrameCallback((time) {
+      if (widget.marquee == true) {
+        _startTimer();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _timer?.cancel();
+    _scrollController?.dispose();
+  }
+
+  void _init() {
+    if (widget.style != null) {
+      _style = widget.style;
+    } else {
+      _style = TDNoticeBarStyle.generateTheme(context, theme: widget.theme);
+    }
+    _backgroundColor = _style!.backgroundColor;
+    _setLeftWidget();
+    _setRightWidget();
+  }
+
+  void _startTimer() {
+    if (widget.direction == Axis.horizontal) {
+      _scroll();
+    } else if (widget.direction == Axis.vertical) {
+      _step();
+    }
+  }
+
+  void _scroll() {
+    var scrollDistance =
+        _getContextWidth() + (_size!.width - _style!.getPadding.horizontal);
+    var remainder = scrollDistance % widget.speed!;
+    _scrollController!.jumpTo(0);
+    var offset = 0.0 + widget.speed!;
+    _scrollController!.animateTo(offset,
+        duration: const Duration(seconds: 1), curve: Curves.linear);
+    _timer = Timer.periodic(const Duration(seconds: 1), (timer) async {
+      if (offset < scrollDistance - remainder) {
+        offset += widget.speed!;
+        await _scrollController!.animateTo(offset,
+            duration: const Duration(seconds: 1), curve: Curves.linear);
+      } else {
+        // 剩余距离小于50 先滚动这部分 然后滚动剩余部分
+        // 剩余距离滚动所需时间
+        var time = (remainder / widget.speed! * 1000).round();
+        // 滚动最后一部分（触底）
+        await _scrollController!.animateTo(scrollDistance,
+            duration: Duration(milliseconds: time), curve: Curves.linear);
+        // 回到顶部（衔接）
+        _scrollController!.jumpTo(0);
+        // 修改起始位置
+        offset = widget.speed! - remainder;
+        // 计算新起点最后阶段滚动距离
+        remainder = (scrollDistance - offset) % widget.speed!;
+        // 滚动至新起点（弥补触底speed滚动长度）
+        await _scrollController!.animateTo(offset,
+            duration: Duration(milliseconds: 1000 - time),
+            curve: Curves.linear);
+      }
+    });
+  }
+
+  void _step() {
+    var step = 0;
+    var offset = 0.0;
+    _timer = Timer.periodic(Duration(milliseconds: widget.interval!), (timer) {
+      var time = (widget.height / widget.speed! * 1000).round();
+      if (step >= widget.context.length) {
+        step = 0;
+        offset = 0;
+        _scrollController!.jumpTo(0);
+      }
+      step++;
+      // 固定滚动行高（22）
+      offset += widget.height;
+      _scrollController!.animateTo(offset,
+          duration: Duration(milliseconds: time), curve: Curves.linear);
+    });
+  }
+
+  /// 获取文本内容尺寸消息
+  Size _getFontSize() {
+    var text = widget.context;
+    if (widget.context is List<String>) {
+      text = widget.context[0];
+    }
+    final textPainter = TextPainter(
+      text: TextSpan(
+        text: text,
+        style: _style!.getTextStyle,
+      ),
+      locale: Localizations.localeOf(context),
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    )..layout(maxWidth: _size!.width);
+    return textPainter.size;
+  }
+
+  /// 设置左侧内容
+  void _setLeftWidget() {
+    if (widget.prefixIcon != null) {
+      _left = Icon(
+        widget.prefixIcon,
+        color: _style!.leftIconColor,
+        size: widget.height,
+      );
+    }
+    if (widget.left != null) {
+      _left = widget.left;
+    }
+  }
+
+  /// 设置右侧内容
+  void _setRightWidget() {
+    if (widget.suffixIcon != null) {
+      _right = Icon(
+        widget.suffixIcon,
+        color: _style!.rightIconColor,
+        size: widget.height,
+      );
+    }
+    if (widget.right != null) {
+      _right = widget.right;
+    }
+  }
+
+  /// 获取文本内容宽度
+  double _getContextWidth() {
+    var contextWidth =
+        _key.currentContext?.findRenderObject()?.paintBounds.size.width ?? 0;
+    if (contextWidth == 0) {
+      contextWidth = _getFontSize().width;
+    }
+    return contextWidth;
+  }
+
+  /// 获取滚动区域宽度
+  double _getEmptyWidth() {
+    return _contextKey.currentContext
+            ?.findRenderObject()
+            ?.paintBounds
+            .size
+            .width ??
+        (_size!.width - _style!.getPadding.horizontal);
+  }
+
+  /// 内容区域
+  Widget _contextWidget() {
+    var valid = false;
+    Widget? textWidget;
+    if (widget.context is String) {
+      valid = true;
+      textWidget = SizedBox(
+        height: widget.height,
+        child: Align(
+          alignment: Alignment.centerLeft,
+          child: TDText(
+            widget.context,
+            style: _style?.getTextStyle,
+            maxLines: 1,
+            forceVerticalCenter: true,
+          ),
+        ),
+      );
+    }
+    if (widget.context is List<String>) {
+      valid = true;
+      textWidget = SizedBox(
+        height: widget.height,
+        child: Align(
+          alignment: Alignment.centerLeft,
+          child: TDText(
+            widget.context[0],
+            style: _style?.getTextStyle,
+            maxLines: 1,
+            forceVerticalCenter: true,
+          ),
+        ),
+      );
+    }
+    if (!valid) {
+      throw Exception('context must be String or List<String>');
+    }
+    if (widget.marquee == false) {
+      return textWidget!;
+    }
+    Widget? child;
+    switch (widget.direction) {
+      case Axis.horizontal:
+        child = SingleChildScrollView(
+          controller: _scrollController,
+          scrollDirection: Axis.horizontal,
+          physics: const NeverScrollableScrollPhysics(),
+          child: Row(
+            children: [
+              SizedBox(
+                key: _key,
+                height: widget.height,
+                child: textWidget,
+              ),
+              SizedBox(width: _getEmptyWidth()),
+              SizedBox(
+                width: _getEmptyWidth() > _getContextWidth()
+                    ? _getEmptyWidth()
+                    : _getContextWidth(),
+                height: widget.height,
+                child: textWidget,
+              )
+            ],
+          ),
+        );
+        break;
+      case Axis.vertical:
+        var contexts = widget.context as List<String>;
+        child = SizedBox(
+          height: widget.height,
+          child: SingleChildScrollView(
+            controller: _scrollController,
+            scrollDirection: Axis.vertical,
+            // physics: const NeverScrollableScrollPhysics(),
+            child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  for (int i = 0; i < contexts.length; i++)
+                    SizedBox(
+                      height: widget.height,
+                      child: Align(
+                        alignment: Alignment.centerLeft,
+                        child: TDText(
+                          contexts[i],
+                          style: _style!.getTextStyle,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      ),
+                    ),
+                  SizedBox(
+                    key: _key,
+                    height: widget.height,
+                    child: Align(
+                      alignment: Alignment.centerLeft,
+                      child: TDText(
+                        contexts[0],
+                        style: _style?.getTextStyle,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                  ),
+                ]),
+          ),
+        );
+        break;
+      default:
+        child = textWidget;
+        break;
+    }
+    return child!;
+  }
+
+  void _onTap(trigger) {
+    if (widget.onTap != null) {
+      widget.onTap!(trigger);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _size = MediaQuery.of(context).size;
+    return Container(
+      padding: _style!.getPadding,
+      decoration: BoxDecoration(
+        color: _backgroundColor,
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          Visibility(
+            visible: _left != null,
+            child: GestureDetector(
+              onTap: () => _onTap('prefix-icon'),
+              child: Container(
+                margin: const EdgeInsets.only(right: 8),
+                child: _left,
+              ),
+            ),
+          ),
+          Expanded(
+            key: _contextKey,
+            child: GestureDetector(
+              onTap: () => _onTap('context'),
+              child: _contextWidget(),
+            ),
+          ),
+          Visibility(
+            visible: _right != null,
+            child: GestureDetector(
+              onTap: () => _onTap('suffix-icon'),
+              child: _right,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/tdesign-component/lib/src/components/notice_bar/td_notice_bar_style.dart b/tdesign-component/lib/src/components/notice_bar/td_notice_bar_style.dart
new file mode 100644
index 000000000..b08c4e184
--- /dev/null
+++ b/tdesign-component/lib/src/components/notice_bar/td_notice_bar_style.dart
@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+
+import '../../theme/td_colors.dart';
+import '../../theme/td_theme.dart';
+import 'td_notice_bar.dart';
+
+/// 公告栏类型
+enum TDNoticeBarType {
+  /// 静止（默认）
+  none,
+
+  /// 滚动
+  scroll,
+
+  /// 步进
+  step
+}
+
+/// 公告栏主题
+enum TDNoticeBarTheme {
+  /// 默认
+  info,
+
+  /// 成功
+  success,
+
+  /// 警告
+  warning,
+
+  /// 错误
+  error
+}
+
+/// 公告栏样式
+class TDNoticeBarStyle {
+  TDNoticeBarStyle(
+      {this.context,
+      this.backgroundColor,
+      this.textStyle,
+      this.leftIconColor,
+      this.rightIconColor,
+      this.padding});
+
+  /// 上下文
+  BuildContext? context;
+
+  /// 公告栏背景色
+  Color? backgroundColor;
+
+  /// 公告栏左侧图标颜色
+  Color? leftIconColor;
+
+  /// 公告栏右侧图标颜色
+  Color? rightIconColor;
+
+  /// 公告栏内边距
+  EdgeInsetsGeometry? padding;
+
+  /// 公告栏内容样式
+  TextStyle? textStyle;
+
+  /// 公告栏内边距，用于获取默认值
+  EdgeInsetsGeometry get getPadding =>
+      padding ??
+      const EdgeInsets.only(top: 13, bottom: 13, left: 16, right: 12);
+
+  /// 公告栏内容样式，用于获取默认值
+  TextStyle get getTextStyle =>
+      textStyle ??
+      TextStyle(
+        color: TDTheme.of(context).fontGyColor1,
+        fontSize: 14,
+        height: 1,
+        fontWeight: FontWeight.normal,
+        fontStyle: FontStyle.normal,
+      );
+
+  /// 根据主题生成样式
+  TDNoticeBarStyle.generateTheme(BuildContext context,
+      {TDNoticeBarTheme? theme = TDNoticeBarTheme.info}) {
+    rightIconColor = TDTheme.of(context).grayColor7;
+    switch (theme) {
+      case TDNoticeBarTheme.warning:
+        leftIconColor = TDTheme.of(context).warningNormalColor;
+        backgroundColor = TDTheme.of(context).warningLightColor;
+        break;
+      case TDNoticeBarTheme.error:
+        leftIconColor = TDTheme.of(context).errorNormalColor;
+        backgroundColor = TDTheme.of(context).errorLightColor;
+        break;
+      case TDNoticeBarTheme.success:
+        leftIconColor = TDTheme.of(context).successNormalColor;
+        backgroundColor = TDTheme.of(context).successLightColor;
+        break;
+      default:
+        leftIconColor = TDTheme.of(context).brandNormalColor;
+        backgroundColor = TDTheme.of(context).brandLightColor;
+        break;
+    }
+  }
+}
diff --git a/tdesign-component/lib/tdesign_flutter.dart b/tdesign-component/lib/tdesign_flutter.dart
index 3efc7f50e..6bdd77d38 100644
--- a/tdesign-component/lib/tdesign_flutter.dart
+++ b/tdesign-component/lib/tdesign_flutter.dart
@@ -36,6 +36,8 @@ export 'src/components/loading/td_circle_indicator.dart';
 export 'src/components/loading/td_loading.dart';
 export 'src/components/loading/td_loading_controller.dart';
 export 'src/components/navbar/td_nav_bar.dart';
+export 'src/components/notice_bar/td_notice_bar.dart';
+export 'src/components/notice_bar/td_notice_bar_style.dart';
 export 'src/components/picker/td_date_picker.dart';
 export 'src/components/picker/td_item_widget.dart';
 export 'src/components/picker/td_multi_picker.dart';