diff --git a/README.md b/README.md index b3769fe3..c7892c84 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,8 @@ A new Flutter project. ## Getting Started -This project is a starting point for a Flutter application. +## Widget Guide Book -A few resources to get you started if this is your first Flutter project: - -- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab) -- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook) - -For help getting started with Flutter, view our -[online documentation](https://flutter.dev/docs), which offers tutorials, -samples, guidance on mobile development, and a full API reference. +* BeeDatePicker - 时间选择器 +* BeeImagePicker - 图片选择器 +* GridImagePicker - 网格图片选择器 diff --git a/lib/pages/goods_deto_page/deto_create_page/deto_create_page.dart b/lib/pages/goods_deto_page/deto_create_page/deto_create_page.dart index 14db6d84..40c37dc7 100644 --- a/lib/pages/goods_deto_page/deto_create_page/deto_create_page.dart +++ b/lib/pages/goods_deto_page/deto_create_page/deto_create_page.dart @@ -1,4 +1,5 @@ import 'package:akuCommunity/widget/bee_scaffold.dart'; +import 'package:akuCommunity/widget/picker/grid_image_picker.dart'; import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:akuCommunity/utils/headers.dart'; @@ -187,7 +188,7 @@ class _DetoCreatePageState extends State { ), ), ), - CommonImagePicker(), + GridImagePicker(), ], ), ), diff --git a/lib/painters/plus_painter.dart b/lib/painters/plus_painter.dart new file mode 100644 index 00000000..c7cd7de3 --- /dev/null +++ b/lib/painters/plus_painter.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class PlusPainter extends CustomPainter { + @override + void paint(Canvas canvas, Size size) { + Paint paint = Paint() + ..color = Color(0xFFD8D8D8) + ..strokeWidth = 8.w + ..strokeCap = StrokeCap.round; + canvas.drawLine(Offset(0, 40.w), Offset(80.w, 40.w), paint); + canvas.drawLine(Offset(40.w, 0), Offset(40.w, 80.w), paint); + } + + @override + bool shouldRepaint(PlusPainter oldDelegate) => false; + + @override + bool shouldRebuildSemantics(PlusPainter oldDelegate) => false; +} diff --git a/lib/widget/picker/bee_image_picker.dart b/lib/widget/picker/bee_image_picker.dart new file mode 100644 index 00000000..fd7c7e38 --- /dev/null +++ b/lib/widget/picker/bee_image_picker.dart @@ -0,0 +1,38 @@ +import 'dart:io'; + +import 'package:flutter/cupertino.dart'; +import 'package:get/get.dart'; +import 'package:image_picker/image_picker.dart'; +import 'package:velocity_x/velocity_x.dart'; + +class BeeImagePicker { + static Future pick({ + String title, + }) async { + PickedFile file = await Get.bottomSheet(CupertinoActionSheet( + title: title.text.isIntrinsic.make(), + actions: [ + CupertinoDialogAction( + onPressed: () async => Get.back( + result: await ImagePicker().getImage(source: ImageSource.gallery), + ), + child: '相册'.text.isIntrinsic.make(), + ), + CupertinoDialogAction( + onPressed: () async => Get.back( + result: await ImagePicker().getImage(source: ImageSource.camera), + ), + child: '相机'.text.isIntrinsic.make(), + ), + ], + cancelButton: CupertinoDialogAction( + onPressed: Get.back, + child: '取消'.text.isIntrinsic.make(), + ), + )); + if (file != null) + return File(file.path); + else + return null; + } +} diff --git a/lib/widget/picker/grid_image_picker.dart b/lib/widget/picker/grid_image_picker.dart new file mode 100644 index 00000000..49e8c42f --- /dev/null +++ b/lib/widget/picker/grid_image_picker.dart @@ -0,0 +1,115 @@ +import 'dart:io'; +import 'package:akuCommunity/painters/plus_painter.dart'; +import 'package:akuCommunity/widget/picker/bee_image_picker.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:get/get.dart'; +import 'package:velocity_x/velocity_x.dart'; + +///网格图片选择 +/// +///返回`File`数组 +/// +///```dart +///GridImagePicker( +/// onChange:(files){ +/// //YOUR CODE HERE. +/// }, +/// padding:EdgeInsets.zero, +///), +///``` +class GridImagePicker extends StatefulWidget { + ///文件选择回调 + final Function(List files) onChange; + + ///Padding + final EdgeInsetsGeometry padding; + GridImagePicker({ + Key key, + @required this.onChange, + this.padding = EdgeInsets.zero, + }) : super(key: key); + + @override + _GridImagePickerState createState() => _GridImagePickerState(); +} + +class _GridImagePickerState extends State { + List _files = []; + int get displayLength => _files.length < 9 ? (_files.length + 1) : 9; + Widget _buildSelect() { + return MaterialButton( + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + elevation: 0, + color: Colors.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.w), + side: BorderSide( + color: Color(0xFF979797), + width: 1.w, + ), + ), + child: CustomPaint( + painter: PlusPainter(), + size: Size(80.w, 80.w), + ), + onPressed: () async { + File file = await BeeImagePicker.pick(title: '选择图片'); + if (file != null) _files.insert(0, file); + setState(() {}); + widget.onChange(_files); + }, + ); + } + + Widget _buildItem(File file) { + return Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8.w), + image: DecorationImage( + image: FileImage(file), + ), + ), + child: MaterialButton( + onPressed: () {}, + onLongPress: () async { + bool result = await Get.dialog(CupertinoAlertDialog( + title: '删除该图片？'.text.isIntrinsic.make(), + actions: [ + CupertinoDialogAction( + child: '取消'.text.isIntrinsic.make(), + onPressed: Get.back, + ), + CupertinoDialogAction( + child: '确定'.text.red600.isIntrinsic.make(), + onPressed: () => Get.back(result: true), + ), + ], + )); + if (result == true) _files.remove(file); + setState(() {}); + }, + ), + ); + } + + @override + Widget build(BuildContext context) { + return GridView.builder( + shrinkWrap: true, + padding: widget.padding, + physics: NeverScrollableScrollPhysics(), + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 3, + crossAxisSpacing: 16.w, + mainAxisSpacing: 16.w, + ), + itemBuilder: (context, index) { + if (index == 0) return _buildSelect(); + return _buildItem(_files[index - 1]); + }, + itemCount: displayLength, + ); + } +}