Flutter - 基於 XML 文件的動態頁面設計（通過 REST API）

Question

我與 dart 和 flutter 合作了幾個月。 我需要一些關於以下任務以及如何啟動這樣的項目/如何找到解決方案的支持。

目的是將 Flutter 開發為從 XML 文件中獲取每個頁面的頁面結構的應用程序。 該頁面以部分為結構，而這些部分以列和行為結構。 該應用程序具有預定義的標准 styles（按鈕標簽的樣式等......），可在 XML 文件中使用名稱進行調用。

以下示例表示 XML 文件中的部分的外觀。

<SectionTop>
<Column1>
 <Row1>
  <label>
    <title>label text</title>
    <algin>center</algin>
    </style>defaultLabelStyle</style>
  </label>
 </Row1>
 <Row2>
  <Button>
    <title>add Customer</title>
    <algin>center</algin>
    </style>defaultButton_Blue</style>
  </Button>
 </Row2>
</Column1>
</SectionTop>

我希望你能幫助我，在此先感謝:)

Answer 1

有一個名為Dynamic Widget的 package 但是它使用自己的模式並且是 json。 如果您想自己控制 xml 及其架構，那么您將需要構建Dynamic Widget package 之類的東西

還有Xml 布局package 可以讓您開始思考如何將它們組合在一起。

還有Flutter XML 布局助手

還有一個VSCode插件，你可以看看它是如何完成的

Answer 2

您可以使用此 package

https://pub.dev/packages/xml

從文件中讀取 xml

final document = XmlDocument.parse(File('bookshelf.xml').readAsStringSync());

從 api 讀取 xml

//get response string user http or dio package
final document = XmlDocument.parse(responseString);

xml 文檔上的元素可以迭代，並且可以在構建方法中填充小部件，如下所示

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: _getChildren(document.descendants),
      ),
    );
  }

  _getChildren(Iterable<XmlNode> descendants) {
    List<Widget> widgets = List();
    for (XmlNode node in descendants) {
      if (node.text == 'Column') {
        widgets.add(Column(
          children: _getChildren(node.descendants),
        ));
      } else if (node.text == 'Row') {
        widgets.add(Row(
          children: _getChildren(node.descendants),
        ));
      } else if (node.text == 'label') {
        String text = node.descendants
            .firstWhere((element) => element.text == 'title')
            .innerText;
        String align = node.descendants
                .firstWhere((element) => element.text == 'align')
                .innerText ??
            'center';

        widgets.add(Text(text,
            textAlign: align == 'center'
                ? TextAlign.center
                : align == 'start'
                    ? TextAlign.start
                    : TextAlign.end));
      }
      //add more if else for other elements
    }
    return widgets;
  }