Flutter通用UI组件插件common_ui的使用

本文档将详细介绍如何使用common_ui插件，该插件包含一组小型UI组件。通过这些组件，您可以快速构建具有统一风格的应用界面。

Getting Started（开始使用）

在当前版本中，common_ui包含以下类：

ListItem
ListItemTile
ListSection
SectionTile

安装插件

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

dependencies:
  common_ui: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

示例代码

以下是一个完整的示例，展示如何使用common_ui中的组件来创建一个简单的列表页面。

import 'package:flutter/material.dart';
import 'package:common_ui/common_ui.dart'; // 导入common_ui包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CommonUIExample(), // 使用CommonUIExample作为主页
    );
  }
}

class CommonUIExample extends StatelessWidget {
  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Common UI Example'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListItemTile( // 使用ListItemTile组件
            title: items[index],
            onTap: () {
              print('${items[index]} clicked'); // 点击事件处理
            },
          );
        },
      ),
    );
  }
}

代码说明

导入包：
```
import 'package:common_ui/common_ui.dart';
```
导入common_ui包以便使用其提供的组件。

创建主应用：

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

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

定义了一个简单的Flutter应用，并将其主页设置为CommonUIExample。

使用组件：

class CommonUIExample extends StatelessWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Common UI Example'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListItemTile(
            title: items[index],
            onTap: () {
              print('${items[index]} clicked');
            },
          );
        },
      ),
    );
  }
}

vueper 1楼

更多关于Flutter通用UI组件插件common_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

common_ui 是一个通用的 Flutter UI 组件库，旨在提供一套可复用的、高质量的 UI 组件，帮助开发者快速构建应用程序的界面。以下是如何使用 common_ui 插件的基本步骤和示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 common_ui 插件的依赖。

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

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

2. 导入包

在你的 Dart 文件中导入 common_ui 包。

import 'package:common_ui/common_ui.dart';

3. 使用组件

common_ui 提供了多种常用的 UI 组件，以下是一些常见组件的使用示例。

3.1 按钮组件

common_ui 提供了多种样式的按钮组件，例如 PrimaryButton、SecondaryButton 等。

PrimaryButton(
  onPressed: () {
    print('Primary Button Pressed');
  },
  text: 'Primary Button',
);

SecondaryButton(
  onPressed: () {
    print('Secondary Button Pressed');
  },
  text: 'Secondary Button',
);

3.2 输入框组件

common_ui 提供了 CommonTextField 组件，支持多种输入类型和验证功能。

CommonTextField(
  hintText: 'Enter your email',
  onChanged: (value) {
    print('Email: $value');
  },
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your email';
    }
    return null;
  },
);

3.3 加载指示器

common_ui 提供了 CommonLoadingIndicator 组件，用于显示加载状态。

CommonLoadingIndicator(
  size: 40.0,
  color: Colors.blue,
);

3.4 对话框组件

common_ui 提供了 CommonDialog 组件，用于显示提示对话框。

CommonDialog.show(
  context: context,
  title: '提示',
  content: '这是一个提示对话框',
  onConfirm: () {
    print('确认按钮被点击');
  },
);

3.5 卡片组件

common_ui 提供了 CommonCard 组件，用于显示带有阴影的卡片。

CommonCard(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('这是一个卡片组件'),
  ),
);

4. 自定义主题

common_ui 支持自定义主题，你可以通过 CommonTheme 来设置全局的主题样式。

MaterialApp(
  theme: CommonTheme.lightTheme,
  home: MyHomePage(),
);

5. 其他组件

common_ui 还提供了许多其他组件，如 CommonAppBar、CommonBottomNavigationBar、CommonSnackBar 等，你可以根据需要在项目中使用。

6. 示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: CommonTheme.lightTheme,
      home: Scaffold(
        appBar: CommonAppBar(
          title: Text('Common UI Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PrimaryButton(
                onPressed: () {
                  CommonDialog.show(
                    context: context,
                    title: '提示',
                    content: '你点击了主按钮',
                    onConfirm: () {
                      print('确认按钮被点击');
                    },
                  );
                },
                text: 'Primary Button',
              ),
              SizedBox(height: 20),
              CommonTextField(
                hintText: 'Enter your email',
                onChanged: (value) {
                  print('Email: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}