英文:
How to use external CSS class using flutter_html?
问题
我正在使用 flutter_html 来加载一个来自 HTML 的小部件。我从一个返回带有外部 CSS 类的 HTML 字符串的 API 获取了构建器，大致如下：
<p class="text-right">应该遵循 text-right 样式的文本</p>
假设我有 "text-right" 类的样式，如何使用 flutter_html 加载样式？在这种情况下，我不使用 flutter WebView，也不希望使用，因为 HTML 只是现有滚动页面中的一个小部件。
英文:
I'm using flutter_html to load a widget from HTML. I got the builder from an API that returns a HTML string with an external CSS class, roughly like this:
<p class="text-right">Supposed to be following text-right styles</p>
Suppose I have the styling for the "text-right" class, how can we load the style using flutter_html? In this case, I'm not using flutter WebView and I don't want to since the HTML only a small widget inside an existing scrolling page.
答案1
得分: 1
I'm using 3.0.0 and was able to do the following:
"p.text-right" : Style(
textAlign: TextAlign.right
),
英文:
I'm using 3.0.0 and was able to do the following:
"p.text-right" : Style(
textAlign: TextAlign.right
),
答案2
得分: 0
Sure, here's the translated content:
首先，您需要在包含在HTML内容中的标记列表中添加一个标记，然后在样式参数中应用此标记。
Container(
child: Html(
shrinkWrap: true,
data: 'Your HTML content',
style: {
"body": Style(
margin: Margins.zero,
padding: EdgeInsets.zero,
fontSize: FontSize(17.0),
lineHeight: LineHeight(1.4),
),
"p": Style(
padding: EdgeInsets.all(6),
alignment: Alignment.centerRight // for text right
),
},
),
),
您可以在不提供自定义样式的情况下实现此效果。
Html(data: """
<p style="text-align: right">Text-Right</p>
<p style="text-align: center">Text-center</p>
<p style="text-align: left">Text-left</p>
""")
输出：
英文:
First, you need to add a tag list that is included in your HTML content and after adding this apply the style in the style parameter.
Container(
child: Html(
shrinkWrap: true,
data: 'Your HTML content',
style: {
"body": Style(
margin: Margins.zero,
padding: EdgeInsets.zero,
fontSize: FontSize(17.0),
lineHeight: LineHeight(1.4),
),
"p": Style(
padding: EdgeInsets.all(6),
alignment: Alignment.centerRight // for text right
),
},
),
),
You achieve this without giving a custom style
Html(data: """
<p style="text-align: right">Text-Right</p>
<p style="text-align: center">Text-center</p>
<p style="text-align: left">Text-left</p>
""", )
output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论