Markdown
用于渲染 Markdown 格式文本的控件。
示例
带 GitHubWeb 扩展和可点击链接的 Markdown

- Python
import flet as ft
md1 = """
# Markdown 示例
Markdown 允许您轻松地在应用程序中包含格式化文本、图像和格式化 Dart 代码。
## 标题
Setext 风格
这是 H1
=============
这是 H2
-------------
Atx 风格
# 这是 H1
## 这是 H2
###### 这是 H6
选择有效的标题:
- [x] `# hello`
- [ ] `#hello`
## 链接
[内联风格](https://www.google.com)
## 图像


## 表格
|语法 |结果 |
|---------------------------------------|-------------------------------------|
|`*italic 1*` |*italic 1* |
|`_italic 2_` | _italic 2_ |
|`**bold 1**` |**bold 1** |
|`__bold 2__` |__bold 2__ |
|`This is a ~~strikethrough~~` |This is a ~~strikethrough~~ |
|`***italic bold 1***` |***italic bold 1*** |
|`___italic bold 2___` |___italic bold 2___ |
|`***~~italic bold strikethrough 1~~***`|***~~italic bold strikethrough 1~~***|
|`~~***italic bold strikethrough 2***~~`|~~***italic bold strikethrough 2***~~|
## 样式
将文本样式设置为 _italic_、__bold__、~~strikethrough~~ 或 `内联代码`。
- 使用 bulleted 列表
- better clarify
- 您的要点
## 代码块
格式化的 Dart 代码看起来也非常漂亮:
```
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ft.Markdown(data: markdownData),
),
));
}
```
"""
def main(page: ft.Page):
page.scroll = "auto"
page.add(
ft.Markdown(
md1,
selectable=True,
extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
on_tap_link=lambda e: page.launch_url(e.data),
)
)
ft.app(target=main)
带代码语法高亮的 Markdown

属性
auto_follow_links
自动打开文档中的 URL。默认值为 False
。如果注册了,on_tap_link
事件将在打开 URL 之后触发。
auto_follow_links_target
在网络模式中何处打开 URL
值的类型为 UrlTarget
且默认为 UrlTarget.SELF
。
code_style
code_style
代码块文本样式。该值是 TextStyle
类的实例。
例如,配置 monospace 字体以在 Markdown 代码块中使用:
page.fonts = {
"Roboto Mono": "RobotoMono-VariableFont_wght.ttf",
}
page.add(
Markdown(
table,
selectable=True,
extension_set="gitHubWeb",
code_theme="atom-one-dark",
code_style=TextStyle(font_family="Roboto Mono"),
on_tap_link=lambda e: page.launch_url(e.data),
)
)
在 v0.24.0 中已弃用,并将在 v0.27.0 中移除。请改用code_style_sheet.code_text_style
。
code_style_sheet
用于显示代码块时使用的样式。
值的类型为MarkdownStyleSheet
。
code_theme
代码块的语法高亮主题。
值的类型为MarkdownCodeTheme
,默认为MarkdownCodeTheme.GITHUB
。
extension_set
渲染 Markdown 内容时使用的扩展。
值的类型为MarkdownExtensionSet
,默认为MarkdownExtensionSet.NONE
。
fit_content
是否允许小部件适应子内容。
值的类型为bool
,默认为True
。
img_error_content
图像加载失败时显示的Control
。
md_style_sheet
用于显示 Markdown 时使用的样式。
值的类型为MarkdownStyleSheet
。
selectable
渲染的文本是否可选。
shrink_wrap
滚动视图在滚动方向上的范围是否应由正在查看的内容确定。
值的类型为bool
,默认为True
。
soft_line_break
软换行用于识别文本行末尾的空格以及紧接在后的文本行开头的前导空格。
值的类型为bool
,默认为False
。
value
要渲染的 Markdown 内容。
事件
on_tap_link
当点击/轻触 Markdown 文档中的链接时触发。事件的data
属性包含 URL。
以下示例在新窗口中打开 Markdown URL:
import flet as ft
def main(page: ft.Page):
def open_url(e):
page.launch_url(e.data)
page.add(
ft.Markdown(
"[inline-style](https://www.google.com)",
extension_set="gitHubWeb",
on_tap_link=open_url,
expand=True,
),
)
ft.app(main)
on_selection_change
当文本选择发生变化时触发。
事件处理程序参数的类型为MarkdownSelectionChangeEvent
。
on_tap_text
当点击/轻触某些文本时触发。