Flutter XML布局解析插件xml_layout的使用

Flutter XML布局解析插件xml_layout的使用

1. 示例代码

下面是一个完整的示例代码，展示了如何使用 xml_layout 插件来解析和渲染 XML 布局。

import 'package:flutter/material.dart';
import 'package:xml_layout/xml_layout.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'test.xml_layout.dart' as xml_layout;
import 'package:xml_layout/types/colors.dart' as colors;
import 'package:xml_layout/types/icons.dart' as icons;
import 'package:xml_layout/types/function.dart';

void main() {
  colors.register();
  icons.register();
  xml_layout.register();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Future<String> _loadLayout(String path) {
  return rootBundle.loadString(path);
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
          children: ListTile.divideTiles(tiles: [
        ListTile(
          title: Text("LayoutExample"),
          onTap: () =&gt; Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) =&gt; _LayoutExample())),
        ),
        ListTile(
          title: Text("GridExample"),
          onTap: () =&gt; Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) =&gt; _GridExample())),
        ),
        ListTile(
          title: Text("BuilderExample"),
          onTap: () =&gt; Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) =&gt; _BuilderExample())),
        )
      ], context: context, color: Colors.black12)
              .toList()),
    );
  }
}

class _LayoutExample extends StatefulWidget {
  @override
  State&lt;StatefulWidget&gt; createState() =&gt; _LayoutExampleState();
}

class _LayoutExampleState extends State&lt;_LayoutExample&gt; {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout Example"),
      ),
      body: Center(
        child: FutureBuilder&lt;String&gt;(
            future: _loadLayout("assets/layout.xml"),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return XmlLayout(
                  template: snapshot.data,
                  objects: {"counter": _counter},
                  onUnkownElement: (node, key) {
                    print("Unkown ${node.name ?? node.text}");
                  },
                );
              }
              return Container();
            }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class _GridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder&lt;String&gt;(
        future: _loadLayout("assets/grid.xml"),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return XmlLayout(
              template: snapshot.data,
              objects: {
                "map": {
                  "pictures": [
                    "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
                    "https://homepages.cae.wisc.edu/~ece533/images/arctichare.png",
                    "https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
                  ]
                },
                "print": (int idx) {
                  print("click ${idx}");
                }
              },
              onUnkownElement: (node, key) {
                print("Unkown ${node.name ?? node.text}");
              },
            );
          }
          return Container();
        });
  }
}

class _BuilderExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    List data = [{
      "title": "Title1",
      "subtitle": "Content1",
      "image": "https://homepages.cae.wisc.edu/~ece533/images/baboon.png"
    }, {
      "title": "Title2",
      "subtitle": "Content2",
      "image": "https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"
    }, {
      "title": "Title3",
      "subtitle": "Content3",
      "image": "https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
    }];
    return FutureBuilder&lt;String&gt;(
        future: _loadLayout("assets/list.xml"),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return XmlLayout(
              template: snapshot.data,
              objects: {
                "title": "BuilderExample",
                "itemCount": data.length,
                "getItem": (int idx) {
                  return data[idx];
                },
                "print": (int idx) {
                  print("click $idx");
                }
              },
              onUnkownElement: (node, key) {
                print("Unkown ${node.name ?? node.text}");
              },
            );
          }
          return Container();
        });
  }
}

2. 使用说明

1. 写XML布局文件

<Column>
  <Text mainAxisAlignment="center">
    <for count="6">
      <Text>$item, You have pushed the button this many times:</Text>
    </for>
    <Text id="text-id">
      <attr:style>
        <TextStyle color="red"/>
      </attr:style>
      $counter
    </Text>
  </Text>
</Column>

2. Dart代码

XMLLayout(
  temp: snapshot.data,
  objects: {
    "counter": _counter,
  },
)

• $counter 用于传递参数到布局。
• id 属性用于选择控件或状态。

3. 注册构造函数

XMLLayout.register('MyClass', (node, key) {
  return MyClass(
    key: key,
    child: node.child<Widget>(),
    width: node.s<double>("width"),
    height: node.s<double>("height"),
  );
});

4. 使用注册的枚举类型

XMLLayout.registerEnum(TextAlign.values);

5. 使用注册的属性转换器

XmlLayout.registerInline(FontWeight, "w200", true, (node, method) {
  return FontWeight.w200;
});

XmlLayout.registerInline(TextHeightBehavior, "fromEncoded", false,
  (node, method) {
  return TextHeightBehavior.fromEncoded(int.tryParse(method[0]));
});

6. 使用自定义函数生成布局

<ListView.separated itemCount="$itemCount">
  <attr:itemBuilder>
    <Function returnType="Widget">
      <SetArgument return="index" argument="${args[1]}"/>
      <Call function="$getItem" return="itemData">
        <Argument value="$index"/>
      </Call>
      <Text>${itemData.title}</Text>
    </Function>
  </attr:itemBuilder>
</ListView.separated>

7. 使用控制流

<for count="$counter">
  <Text>$item, You have pushed the button this many times:</Text>
  <if candidate="equal(1, mod($item, 2)">
    <Text>Test text</Text>
  </if>
</for>