beagle_components 是一个用于 Flutter 的 UI 组件库插件，它基于 Beagle 框架，旨在帮助开发者快速构建跨平台的 UI 组件。Beagle 是一个声明式的 UI 框架，允许开发者通过 JSON 或 DSL 来定义 UI，并且可以在多个平台上运行，包括 Web、iOS 和 Android。

安装 beagle_components

首先，你需要在 pubspec.yaml 文件中添加 beagle_components 依赖：

dependencies:
  flutter:
    sdk: flutter
  beagle_components: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 beagle_components

beagle_components 提供了一系列预定义的 UI 组件，你可以直接在 Flutter 应用中使用这些组件。以下是一些常见的使用示例：

1. 使用 BeagleText

BeagleText 是一个用于显示文本的组件，类似于 Flutter 的 Text 组件。

import 'package:flutter/material.dart';
import 'package:beagle_components/beagle_components.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beagle Components Example'),
      ),
      body: Center(
        child: BeagleText(
          text: 'Hello, Beagle!',
          style: TextStyle(fontSize: 24, color: Colors.blue),
        ),
      ),
    );
  }
}

2. 使用 BeagleButton

BeagleButton 是一个按钮组件，类似于 Flutter 的 ElevatedButton。

import 'package:flutter/material.dart';
import 'package:beagle_components/beagle_components.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beagle Components Example'),
      ),
      body: Center(
        child: BeagleButton(
          text: 'Click Me',
          onPressed: () {
            print('Button Pressed!');
          },
        ),
      ),
    );
  }
}

3. 使用 BeagleImage

BeagleImage 是一个用于显示图片的组件，类似于 Flutter 的 Image 组件。

import 'package:flutter/material.dart';
import 'package:beagle_components/beagle_components.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beagle Components Example'),
      ),
      body: Center(
        child: BeagleImage(
          url: 'https://example.com/image.png',
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

4. 使用 BeagleListView

BeagleListView 是一个列表组件，类似于 Flutter 的 ListView。

import 'package:flutter/material.dart';
import 'package:beagle_components/beagle_components.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beagle Components Example'),
      ),
      body: BeagleListView(
        children: [
          BeagleText(text: 'Item 1'),
          BeagleText(text: 'Item 2'),
          BeagleText(text: 'Item 3'),
        ],
      ),
    );
  }
}

自定义组件

beagle_components 还允许你通过 JSON 或 DSL 来定义自定义组件。你可以使用 BeagleWidget 来加载这些自定义组件。

import 'package:flutter/material.dart';
import 'package:beagle_components/beagle_components.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beagle Components Example'),
      ),
      body: BeagleWidget(
        json: '''
        {
          "_beagleComponent_": "beagle:container",
          "children": [
            {
              "_beagleComponent_": "beagle:text",
              "text": "Hello, Beagle!"
            },
            {
              "_beagleComponent_": "beagle:button",
              "text": "Click Me",
              "onPress": [
                {
                  "_beagleAction_": "beagle:alert",
                  "message": "Button Pressed!"
                }
              ]
            }
          ]
        }
        ''',
      ),
    );
  }
}