Flutter通用UI组件插件im_common

Flutter通用UI组件插件`im_common_ui`的使用

简介

kit.im_common_ui 是一个提供通用UI组件和路由注册功能的插件。它可以帮助开发者快速构建具有统一风格的应用界面。

添加依赖

在使用 im_common_ui 插件之前，首先需要将其添加为项目的依赖项。

打开你的 Flutter 项目的 pubspec.yaml 文件。
在 dependencies 下添加以下内容：

dependencies:
  im_common_ui: ^1.0.0

保存文件后，运行以下命令以安装依赖：

flutter pub get

使用示例

以下是使用 im_common_ui 插件的完整示例代码，展示如何加载通用组件并实现简单的页面跳转。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IM Common UI Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IM Common UI 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondPage()),
                );
              },
              child: Text('跳转到第二个页面'),
            ),
            SizedBox(height: 20),
            IMCommonButton( // 使用 im_common_ui 提供的通用按钮
              text: '通用按钮',
              onPressed: () {
                print('点击了通用按钮');
              },
            )
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: Text('这是第二个页面'),
      ),
    );
  }
}

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

vueper 1楼•8 天前

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

im_common_ui 是一个为 Flutter 应用程序设计的通用 UI 组件插件，通常用于即时通讯（IM）应用的开发。它提供了一系列预构建的 UI 组件，如聊天列表、消息气泡、输入框等，帮助开发者快速构建 IM 应用的用户界面。

安装

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

dependencies:
  flutter:
    sdk: flutter
  im_common_ui: ^latest_version

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

使用示例

以下是一些常见的使用示例：

1. 聊天列表

im_common_ui 提供了一个 ChatList 组件，用于显示聊天会话列表。

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

class ChatListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat List'),
      ),
      body: ChatList(
        chats: [
          ChatItem(
            avatar: 'https://via.placeholder.com/150',
            name: 'John Doe',
            lastMessage: 'Hello!',
            lastMessageTime: '10:00 AM',
            unreadCount: 2,
          ),
          ChatItem(
            avatar: 'https://via.placeholder.com/150',
            name: 'Jane Smith',
            lastMessage: 'How are you?',
            lastMessageTime: '9:30 AM',
            unreadCount: 0,
          ),
        ],
        onTap: (chat) {
          // Handle chat item tap
          print('Chat with ${chat.name} tapped');
        },
      ),
    );
  }
}

2. 消息气泡

im_common_ui 提供了 MessageBubble 组件，用于显示单条消息。

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

class MessageBubblePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Message Bubble'),
      ),
      body: ListView(
        children: [
          MessageBubble(
            message: 'Hello!',
            isMe: true,
            time: '10:00 AM',
          ),
          MessageBubble(
            message: 'Hi there!',
            isMe: false,
            time: '10:01 AM',
          ),
        ],
      ),
    );
  }
}

3. 消息输入框

im_common_ui 提供了 MessageInput 组件，用于输入和发送消息。

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

class MessageInputPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Message Input'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                MessageBubble(
                  message: 'Hello!',
                  isMe: true,
                  time: '10:00 AM',
                ),
                MessageBubble(
                  message: 'Hi there!',
                  isMe: false,
                  time: '10:01 AM',
                ),
              ],
            ),
          ),
          MessageInput(
            onSend: (message) {
              // Handle sending message
              print('Message sent: $message');
            },
          ),
        ],
      ),
    );
  }
}

自定义

im_common_ui 的组件通常支持自定义样式和行为。你可以通过传递不同的参数来调整组件的外观和功能。例如，MessageBubble 组件允许你自定义消息的背景颜色、文本样式等。

MessageBubble(
  message: 'Custom Message',
  isMe: true,
  time: '10:00 AM',
  backgroundColor: Colors.blue,
  textStyle: TextStyle(color: Colors.white),
)