Flutter UI组件库插件erb_ui的使用

Flutter UI组件库插件erb_ui的使用

erb_ui 是一个简单且通用的 Flutter UI 组件库。通过这个库，你可以快速构建应用界面，并且可以复用一些常用的 UI 组件。

安装

首先，在你的 pubspec.yaml 文件中添加 erb_ui 依赖：

dependencies:
  erb_ui: ^1.0.0

然后运行 flutter pub get 来获取该依赖。

使用

以下是一个简单的示例，展示了如何使用 erb_ui 中的一些组件。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('erb_ui 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用 ErbButton
              ErbButton(
                text: '点击我',
                onPressed: () {
                  print('按钮被点击了');
                },
              ),
              
              // 使用 ErbTextField
              ErbTextField(
                hintText: '输入文字',
                onChanged: (value) {
                  print('输入的文字是: $value');
                },
              ),
              
              // 使用 ErbCheckbox
              ErbCheckbox(
                value: false,
                onChanged: (bool? value) {
                  print('复选框状态改变为: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了 ErbButton、ErbTextField 和 ErbCheckbox 这三个组件。这些组件提供了简单的界面元素，你可以通过它们来构建用户界面。

更多组件

erb_ui 库中还包含了很多其他组件，如 ErbRadioButton、ErbSwitch 等等。你可以根据需求选择合适的组件进行使用。

// 使用 ErbRadioButton
ErbRadioButton(
  value: true,
  groupValue: true,
  onChanged: (bool? value) {
    print('单选按钮状态改变为: $value');
  },
),

// 使用 ErbSwitch
ErbSwitch(
  value: false,
  onChanged: (bool value) {
    print('开关状态改变为: $value');
  },
),