一、插件介绍

multi_products是一个专为Flutter开发鸿蒙应用设计的多产品管理组件，提供了一套完整的产品管理、产品展示和交互功能。该组件基于Flutter Material Design实现，支持产品列表展示、产品详情查看、产品添加和编辑等核心功能，帮助开发者在OpenHarmony平台上快速构建产品管理类应用。

主要功能特性：

  • 支持产品列表的展示和管理
  • 提供产品详情查看功能
  • 支持产品添加和编辑操作
  • 采用响应式设计，适配不同屏幕尺寸
  • 与OpenHarmony原生动效和交互无缝集成
  • 支持产品数据的本地存储和管理

二、环境要求

在开始使用multi_products组件前，请确保您的开发环境满足以下要求：

  1. Flutter SDK: 2.19.6或以上版本
  2. Dart SDK: 2.19.6或以上版本
  3. OpenHarmony SDK: API 9或以上版本
  4. 开发工具: DevEco Studio 3.0或以上版本

三、依赖引入

由于multi_products组件是基于自定义修改的Flutter组件库，需要通过git形式引入。请按照以下步骤在您的项目中添加依赖：

  1. 打开项目根目录下的pubspec.yaml文件
  2. 在dependencies部分添加以下配置：
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  multi_products:
    git:
      url: "https://atomgit.com/openharmony-sig/flutter_multi_products.git"
      path: "multi_products"
  1. 保存文件后，执行以下命令获取依赖：
flutter pub get

四、API使用

1. 初始化产品管理组件

在使用产品管理功能前，需要初始化组件并配置相关参数：

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

void main() {
  // 初始化产品管理组件
  ProductManager.initialize();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '产品管理',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ProductListPage(),
    );
  }
}

2. 产品列表页面

使用ProductListPage组件展示产品列表：

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

class ProductListPage extends StatelessWidget {
  const ProductListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('产品列表'),
      ),
      body: ProductList(
        onProductTap: (product) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => ProductDetailPage(product: product),
            ),
          );
        },
        onAddProduct: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const ProductEditPage(),
            ),
          );
        },
      ),
    );
  }
}

3. 产品详情页面

使用ProductDetailPage组件查看产品详情：

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

class ProductDetailPage extends StatelessWidget {
  final Product product;

  const ProductDetailPage({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(product.name),
      ),
      body: ProductDetail(product: product),
    );
  }
}

4. 产品编辑页面

使用ProductEditPage组件添加或编辑产品：

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

class ProductEditPage extends StatelessWidget {
  final Product? product;

  const ProductEditPage({super.key, this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(product == null ? '添加产品' : '编辑产品'),
      ),
      body: ProductEditor(
        product: product,
        onSave: (newProduct) {
          if (product == null) {
            ProductManager.addProduct(newProduct);
          } else {
            ProductManager.updateProduct(newProduct);
          }
          Navigator.pop(context);
        },
      ),
    );
  }
}

5. 与OpenHarmony原生集成

通过MethodChannel实现Flutter与OpenHarmony原生功能的集成：

// Flutter侧代码
import 'package:flutter/services.dart';

const MethodChannel channel = MethodChannel('com.example.yourapp/product_channel');

// 获取原生产品数据
Future<List<Product>> getNativeProducts() async {
  try {
    final List<dynamic> products = await channel.invokeMethod('getProducts');
    return products.map((json) => Product.fromJson(json)).toList();
  } catch (e) {
    return [];
  }
}

// 保存产品数据到原生
Future<void> saveProductToNative(Product product) async {
  try {
    await channel.invokeMethod('saveProduct', product.toJson());
  } catch (e) {
    print('保存产品失败: $e');
  }
}

// OpenHarmony侧代码 (ProductPlugin.ets)
import { MethodChannel } from '@ohos.flutter';
import { ProductManager } from './productManager';

export default class ProductPlugin {
  private channel: MethodChannel | null = null;

  constructor(channelName: string) {
    this.channel = new MethodChannel(channelName);
    this.registerHandlers();
  }

  private registerHandlers(): void {
    this.channel?.setMethodCallHandler((method, args) => {
      switch (method) {
        case 'getProducts':
          return this.getProducts();
        case 'saveProduct':
          return this.saveProduct(args);
        default:
          return Promise.resolve(null);
      }
    });
  }

  private getProducts(): Promise<any> {
    const products = ProductManager.getInstance().getAllProducts();
    return Promise.resolve(products);
  }

  private saveProduct(productData: any): Promise<any> {
    ProductManager.getInstance().saveProduct(productData);
    return Promise.resolve(true);
  }
}

五、代码示例

完整的产品管理应用示例

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

void main() {
  ProductManager.initialize();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '产品管理应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ProductListPage(),
      routes: {
        '/productList': (context) => const ProductListPage(),
        '/productEdit': (context) => const ProductEditPage(),
      },
    );
  }
}

class ProductListPage extends StatefulWidget {
  const ProductListPage({super.key});

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  late List<Product> _products;

  @override
  void initState() {
    super.initState();
    _products = ProductManager.getProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('产品列表'),
      ),
      body: ListView.builder(
        itemCount: _products.length,
        itemBuilder: (context, index) {
          final product = _products[index];
          return ListTile(
            title: Text(product.name),
            subtitle: Text('${product.price.toStringAsFixed(2)}元'),
            trailing: IconButton(
              icon: const Icon(Icons.edit),
              onPressed: () async {
                final updatedProduct = await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ProductEditPage(product: product),
                  ),
                );
                if (updatedProduct != null) {
                  setState(() {
                    _products = ProductManager.getProducts();
                  });
                }
              },
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ProductDetailPage(product: product),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final newProduct = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const ProductEditPage(),
            ),
          );
          if (newProduct != null) {
            setState(() {
              _products = ProductManager.getProducts();
            });
          }
        },
        tooltip: '添加产品',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class ProductDetailPage extends StatelessWidget {
  final Product product;

  const ProductDetailPage({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(product.name),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              product.name,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Text('价格: ${product.price.toStringAsFixed(2)}元'),
            const SizedBox(height: 8),
            Text('库存: ${product.stock}件'),
            const SizedBox(height: 8),
            Text('描述: ${product.description}'),
          ],
        ),
      ),
    );
  }
}

class ProductEditPage extends StatefulWidget {
  final Product? product;

  const ProductEditPage({super.key, this.product});

  @override
  State<ProductEditPage> createState() => _ProductEditPageState();
}

class _ProductEditPageState extends State<ProductEditPage> {
  final _formKey = GlobalKey<FormState>();
  late TextEditingController _nameController;
  late TextEditingController _priceController;
  late TextEditingController _stockController;
  late TextEditingController _descriptionController;

  @override
  void initState() {
    super.initState();
    _nameController = TextEditingController(text: widget.product?.name ?? '');
    _priceController = TextEditingController(text: widget.product?.price.toString() ?? '');
    _stockController = TextEditingController(text: widget.product?.stock.toString() ?? '');
    _descriptionController = TextEditingController(text: widget.product?.description ?? '');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.product == null ? '添加产品' : '编辑产品'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: const InputDecoration(labelText: '产品名称'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入产品名称';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _priceController,
                decoration: const InputDecoration(labelText: '产品价格'),
                keyboardType: TextInputType.numberWithOptions(decimal: true),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入产品价格';
                  }
                  if (double.tryParse(value) == null) {
                    return '请输入有效的价格';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _stockController,
                decoration: const InputDecoration(labelText: '产品库存'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入产品库存';
                  }
                  if (int.tryParse(value) == null) {
                    return '请输入有效的库存数量';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _descriptionController,
                decoration: const InputDecoration(labelText: '产品描述'),
                maxLines: 3,
              ),
              const SizedBox(height: 32),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    final product = Product(
                      id: widget.product?.id ?? DateTime.now().millisecondsSinceEpoch.toString(),
                      name: _nameController.text,
                      price: double.parse(_priceController.text),
                      stock: int.parse(_stockController.text),
                      description: _descriptionController.text,
                    );

                    if (widget.product == null) {
                      ProductManager.addProduct(product);
                    } else {
                      ProductManager.updateProduct(product);
                    }

                    Navigator.pop(context, product);
                  }
                },
                child: Text(widget.product == null ? '添加产品' : '保存修改'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _nameController.dispose();
    _priceController.dispose();
    _stockController.dispose();
    _descriptionController.dispose();
    super.dispose();
  }
}

OpenHarmony页面集成示例

// Index.ets
import { FlutterPage, FlutterView } from '@ohos.flutter';

@Entry
@Component
struct Index {
  private flutterViewId: string = 'multi_products_view';

  build() {
    Column() {
      FlutterPage({
        viewId: this.flutterViewId,
        onLoad: () => {
          console.log('Flutter产品管理页面加载完成');
        }
      })
    }.width('100%').height('100%');
  }
}

六、总结

multi_products组件为Flutter开发者提供了一套完整的产品管理解决方案，专门针对OpenHarmony平台进行了适配和优化。通过该组件，开发者可以：

  1. 快速构建产品列表和详情页面
  2. 实现产品的添加、编辑和删除功能
  3. 与OpenHarmony原生动效和交互无缝集成
  4. 支持响应式设计，适配不同屏幕尺寸
  5. 实现产品数据的本地存储和管理

该组件的鸿蒙化适配，使得开发者可以在OpenHarmony平台上享受到与Flutter原生开发相同的产品管理功能体验，同时支持跨平台开发的一致性。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# flutter # harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

别只测功能：一套可落地的鸿蒙分布式压力测试方案

avatar 人工智能6S服务平台
cover

昇腾AI处理器混合精度训练利器——apex for Ascend编译与优化全解析

avatar 人工智能6S服务平台
cover

鸿蒙语音控制实战：从语音识别到业务执行的完整链路

avatar 人工智能6S服务平台