Flutter基础UI组件插件baseui的使用

baseui 是一个用于快速构建 Flutter 应用的基础 UI 组件库。通过 baseui，开发者可以轻松实现常见的 UI 功能，减少重复开发的工作量。本文将详细介绍如何安装和使用 baseui，并通过一个完整的示例展示其功能。

安装 baseui

在开始之前，请确保你已经配置好了 Flutter 环境。然后在项目的 pubspec.yaml 文件中添加 baseui 依赖：

dependencies:
  baseui: ^1.0.0  # 替换为最新版本号

运行以下命令以安装依赖：

flutter pub get

基本使用

导入 baseui

在使用 baseui 的组件之前，需要先导入库：

import 'package:baseui/baseui.dart';

示例代码

以下是一个简单的示例，展示了如何使用 baseui 中的按钮组件和文本框组件。

import 'package:flutter/material.dart';
import 'package:baseui/baseui.dart'; // 引入 baseui 库

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BaseUIExample(),
    );
  }
}

class BaseUIExample extends StatefulWidget {
  @override
  _BaseUIExampleState createState() => _BaseUIExampleState();
}

class _BaseUIExampleState extends State<BaseUIExample> {
  String _text = ''; // 用于存储输入框的值

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BaseUI 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 文本框组件
            BaseUITextField(
              placeholder: '请输入内容',
              onChanged: (value) {
                setState(() {
                  _text = value; // 更新输入框的值
                });
              },
            ),
            SizedBox(height: 20), // 添加间距

            // 按钮组件
            BaseUIButton(
              text: '提交',
              onPressed: () {
                if (_text.isNotEmpty) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('提交成功: $_text')),
                  );
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('请输入内容')),
                  );
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

运行效果

运行上述代码后，你会看到一个包含文本框和按钮的界面。用户可以在文本框中输入内容，点击按钮后会弹出提示框显示输入的内容。

常见组件

BaseUITextField

BaseUITextField 是一个封装好的文本框组件，支持占位符和回调函数。

BaseUITextField(
  placeholder: '请输入内容',
  onChanged: (value) {
    print('输入的内容: $value');
  },
)

BaseUIButton

BaseUIButton 是一个封装好的按钮组件，支持设置按钮文字和点击事件。

BaseUIButton(
  text: '点击我',
  onPressed: () {
    print('按钮被点击了');
  },
)