html_widgets

一种使用 HTML 标签和 CSS 样式在您的应用中构建的 Flutter 小部件方法。

文本控件

*所有文本控件都需要text属性。

h1

...
h1(
    text: "This is an h1 widget",
    ...
)
...

h2

...
h2(
    text: "This is an h1 widget",
    color:Colors.red,
    ...
)
...

h3

...
h3(
    text: "This is an h3 widget",
    margin:20,
    ...
)
...

h4

...
h4(
    text: "This is an h4 widget",
    ...
)
...

h5

...
h5(
    text: "This is an h5 widget",
    ...
)
...

h6

...
h6(
    text: "This is an h6 widget",
    ...
)
...

P

...
P(
    text: "This is an h6 widget",
    ...
)
...

您可以通过 several properties 自定义 heading widgets 和 paragraph widget

API参考

属性 Work 默认值 值
color 设置文本颜色 黑色 颜色
bgColor 设置背景颜色 空 颜色
margin 为文本容器提供边距 空 num
padding 为包含文本的容器提供内边距 空 num
fontSize 更改标题和小P控件的字体大小 根据控件而定 num
fontWeight 更改标题和小P控件的字体粗细 根据控件而定，标题为700，P为400 100, 200, 300, 400, 500, 600, 700, 800, 900
isLoading 如果您正在加载某项内容，并希望在流程完成后显示文本，则可以将其设置为true。在设置为false之前，它会显示闪烁效果。 假 布尔值
textAlign 相对于容纳它的容器对齐文本 'left' 'center', 'left', 'right', 'start', 'end', 'justify'
onClick 点击时需要执行的函数 空 功能

HTMLTABLE

如果您想使用粗体字重的大文本，可以考虑使用 HTMLTABLE()

...
HTMLTable(
    columns: [
            {'id': "name", 'label': 'Name'},
            {'id': "pos", 'label': 'Position'},
            {'id': "hours", 'label': 'Hours'},
            {'id': "salary", 'label': 'Salary'},
             ],

    rows: [
            {
                'name': "Willamson",
                'pos': "Manager",
                'hours': "10",
                'salary': "100k"
            },
            {
                'name': "Willamson",
                'pos': "Manager",
                'hours': "10",
                'salary': "100k"
            },
              
              ],
            ),
...

rows 和 columns 属性都是必需的

API参考

属性 Work 默认值 值
column 表格的列 空 包含id和label的Map数组
rows 表格的行 空 包含所有列id的Map数组。

HtmlImage

如果您想使用粗体字重的大文本，可以考虑使用 HtmlImage()

...
   HtmlImage(
            src:"https://images.pexels.com/photos/3055008/pexels-photo-3055008.jpeg",
            onClick: () {
                print("Image Clicked !!");
            },
            size: "cover",
            margin: 10,
  ),
...

使用 HtmlImage，您可以在同一控件中使用网络和本地资源图片。

*src属性是必需的

API参考

属性 Work 默认值 值
src 图片的来源 空 字符串
width 图片的宽度 默认图片宽度 双精度
高度 图片的高度 默认图片高度 双精度
margin 为容纳图片的容器提供边距 0.0 双精度
size 改变图片大小 'contain' 'contain', 'cover', 'fill', 'fitHeight', 'fitWidth', 'none', 'scaleDown'
onClick 点击时需要执行的函数 空 功能

GitHub

https://github.com/XenonLabz/html_widgets