Flutter html 渲染与列固定宽度

Question

我需要从 html 模板渲染一个颤振小部件：

50% | 50% | 100px | 100px

在 Flutter 中这很简单：2 个展开的容器和 2 个固定宽度的容器，包装在 Row 小部件中。

我在 html 中找不到解决方案，尝试 lutter_widget_from_html 或 flutter_html，没有结果。我无法为正确的容器设置固定宽度。我的 html 模板（有 4 列的表格）：

<table border="1" style="padding: 2px; margin: 5px; border: 1px solid red; border-radius: 5px" width="100%">
<tr>
    <td>

        <table width="100%">
          <tr>
              <td><div align="left"><b>[offers_no]</b></div></td>
              <td><div align="right"><b>[offers_date]</b></div></td>
          </tr>
        </table>

        <div align="center"><i>[profsys_name] / [lamtypes_name] / [furnsys_name]</i></div>

        <table width="100%">
          <tr>
              <td><div align="left"><b>[qty] шт.</b></div></td>
              <td><div align="right"><b>[sqr] м.кв.</b></div></td>
          </tr>
        </table>

    </td>

    <td>

        <table width="100%">
          <tr>
              <td><div align="left"><b>[offers_no]</b></div></td>
              <td><div align="right"><b>[offers_date]</b></div></td>
          </tr>
        </table>

        <div align="center"><i>[profsys_name] / [lamtypes_name] / [furnsys_name]</i></div>

        <table width="100%">
          <tr>
              <td><div align="left"><b>[qty] шт.</b></div></td>
              <td><div align="right"><b>[sqr] м.кв.</b></div></td>
          </tr>
        </table>

    </td>

    <td width="100">
        <a href="{report:report_get_offer_pdf}">
        <center>
        <b>[zsum]</b>
        </center>
        </a>
    </td>

    <td width="100">
        <a href="{report:report_get_offer_pdf}">
        <center>
        <b>[zsum]</b>
        </center>
        </a>
    </td>

</tr>
</table>

HTML 结果：

Flutter 结果：

请帮忙

Answer 1

试试下面的代码希望它对你有所帮助，将你的小部件包装成 Expanded 或 Flexible 并设置为 flex。参考 Expanded class here ，参考 Flexible class here，根据需要更改 flex 值。

Center(
    child: Row(
      children: [
        Expanded(
          flex: 5,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(),
            ),
            child: Text('dsagdfghsfghfasgdfhsafdjashdja'),
          ),
        ),
        SizedBox(
          width: 5,
        ),
        Expanded(
          flex: 5,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(),
            ),
            child: Text('dsagdfghsfghfasgdfhsafdjashdja'),
          ),
        ),
        SizedBox(
          width: 5,
        ),
        Expanded(
          flex: 2,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(),
            ),
            child: Text('dsagdfghsfghfasgdfhsafdjashdja'),
          ),
        ),
        SizedBox(
          width: 5,
        ),
        Expanded(
          flex: 2,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(),
            ),
            child: Text('dsagdfghsfghfasgdfhsafdjashdja'),
          ),
        ),
      ],
    ),
  ),

您的结果屏幕->