TrionesDev Antd Flutter

Appearance

ImagesWall 图片墙 ​

图片墙组件，用于实现图片上传、预览和管理功能，支持多种图片源和自定义上传逻辑。

何时使用 ​

当需要实现图片上传功能，允许用户从相册选择图片或拍照上传，并对已上传的图片进行预览、删除等操作时使用。

代码演示 ​

import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/widgets.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

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

  @override
  State<StatefulWidget> createState() => _ImageUploadPageState();
}

class _ImageUploadPageState extends State<ImagesWallPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: AntScaffold(
        appBar: AntAppBar(title: Text("ImagesWall 图片墙")),
        body: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              DemoBlock(
                title: "基本使用",
                child: Column(children: [AntImagesWall()]),
              ),
              DemoBlock(
                title: "最大张数",
                child: Column(children: [AntImagesWall(maxCount: 5)]),
              ),
              DemoBlock(
                title: "图片大小限制",
                child: Column(
                  children: [
                    AntImagesWall(
                      maxSize: 1,
                      uploadRequest: (file, onSuccess) async {
                        return "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
                      },
                    ),
                  ],
                ),
              ),
              DemoBlock(
                title: "上传",
                child: Column(
                  children: [
                    AntImagesWall(
                      uploadRequest: (file, onSuccess) async {
                        return "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
                      },
                    ),
                  ],
                ),
              ),
              DemoBlock(
                title: "赋值",
                child: AntImagesWall(
                  value: [
                    AntImagesWallItemStruct(
                      path:
                          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                      status: AntImageStatus.done,
                    ),
                    AntImagesWallItemStruct(
                      path:
                          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                      status: AntImageStatus.error,
                    ),
                  ],
                  onChange: (value) {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

API ​

图片墙的属性说明如下：

属性说明类型默认值
value当前值List<AntImagesWallItemStruct>?null
maxCount最大图片数量int?null
disabled是否禁用boolfalse
crossAxisCount列数int?5
onChange值改变回调ValueChanged<List<AntImagesWallItemStruct>>?null
uploadRequest上传请求Future<String?> Function(Uint8List fileContent, String? fileName)?null
multiSelect是否多选bool?true
maxSize图片最大大小(MB)int?null

AntImagesWallItemStruct 属性 ​

属性说明类型默认值
uid唯一标识String?null
status图片状态AntImageStatus?done
image图片组件Image?null
path图片路径String?null
type图片类型AntImageType?null
fileName文件名String?null
errorMessage错误信息String?null

AntImageStatus 枚举值 ​

值说明
done已完成
uploading上传中
error上传错误
removed已移除

AntImageType 枚举值 ​

值说明
asset本地资源
network网络图片
file文件图片