Browse Source

1.修复android头像裁剪bug

2.增加商品详情图片预览
tags/0.0.2+2
杨华轩 4 years ago
parent
commit
174e72d21b
3 changed files with 116 additions and 44 deletions
  1. +1
    -0
      example/android/app/src/main/AndroidManifest.xml
  2. +36
    -15
      lib/widgets/goods_details/detail_img/goods_details_img.dart
  3. +79
    -29
      lib/widgets/goods_details/slide_banner/goods_details_slide_banner_widget.dart

+ 1
- 0
example/android/app/src/main/AndroidManifest.xml View File

@@ -47,6 +47,7 @@
android:resource="@style/NormalTheme" android:resource="@style/NormalTheme"
/> />
</activity> </activity>
<activity android:name="com.yalantis.ucrop.UCropActivity" android:theme="@style/Theme.AppCompat.NoActionBar"/>
<!-- <!--
Don't delete the meta-data below. Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java This is used by the Flutter tool to generate GeneratedPluginRegistrant.java


+ 36
- 15
lib/widgets/goods_details/detail_img/goods_details_img.dart View File

@@ -19,26 +19,33 @@ class GoodsDetailsImgWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocProvider<GoodsDetailsImgBloc>( return BlocProvider<GoodsDetailsImgBloc>(
create: (_) => GoodsDetailsImgBloc(repository: GoodsDetailsImgRepository()),//..add(GoodsDetailsImgInitEvent(model: model)),
child: GoodsDetailsImgWidgetContainer(model, key: UniqueKey(),),
create: (_) =>
GoodsDetailsImgBloc(repository: GoodsDetailsImgRepository()),
//..add(GoodsDetailsImgInitEvent(model: model)),
child: GoodsDetailsImgWidgetContainer(
model,
key: UniqueKey(),
),
); );
} }
} }


class GoodsDetailsImgWidgetContainer extends StatefulWidget { class GoodsDetailsImgWidgetContainer extends StatefulWidget {

final Map<String, dynamic> model; final Map<String, dynamic> model;

const GoodsDetailsImgWidgetContainer(this.model, {Key key}) : super(key: key); const GoodsDetailsImgWidgetContainer(this.model, {Key key}) : super(key: key);


@override @override
_GoodsDetailsImgWidgetContainerState createState() => _GoodsDetailsImgWidgetContainerState();
_GoodsDetailsImgWidgetContainerState createState() =>
_GoodsDetailsImgWidgetContainerState();
} }


class _GoodsDetailsImgWidgetContainerState extends State<GoodsDetailsImgWidgetContainer> {
class _GoodsDetailsImgWidgetContainerState
extends State<GoodsDetailsImgWidgetContainer> {
@override @override
void initState() { void initState() {
BlocProvider.of<GoodsDetailsImgBloc>(context).add(GoodsDetailsImgInitEvent(model: widget?.model));
BlocProvider.of<GoodsDetailsImgBloc>(context)
.add(GoodsDetailsImgInitEvent(model: widget?.model));
super.initState(); super.initState();
} }


@@ -76,6 +83,7 @@ class _GoodsDetailsImgWidgetContainerState extends State<GoodsDetailsImgWidgetCo
children: <Widget>[ children: <Widget>[
/// 标题 /// 标题
_getTitleWidget(model), _getTitleWidget(model),

/// 图片列表 /// 图片列表
_getImgListWidget(model), _getImgListWidget(model),
], ],
@@ -83,18 +91,27 @@ class _GoodsDetailsImgWidgetContainerState extends State<GoodsDetailsImgWidgetCo
} }


/// 图片列表 /// 图片列表
Widget _getImgListWidget(GoodsDetailsImgModel model){
Widget _getImgListWidget(GoodsDetailsImgModel model) {
int length = model?.image_detail_list?.length ?? 0; int length = model?.image_detail_list?.length ?? 0;
if(length > 0) {
if (length > 0) {
return Column( return Column(
children: model.image_detail_list.map((item) { children: model.image_detail_list.map((item) {
return CachedNetworkImage(
imageUrl: item ?? '',
fit: BoxFit.fitWidth,
return GestureDetector(
onTap: () {
if(item!=null){
PhotoPreview.showPhotoPreviewByimages(
context, [item],
currentIndex: 0);
}
},
child: CachedNetworkImage(
imageUrl: item ?? '',
fit: BoxFit.fitWidth,
),
); );
}).toList(), }).toList(),
); );
}else{
} else {
return Container(); return Container();
} }
} }
@@ -105,7 +122,8 @@ class _GoodsDetailsImgWidgetContainerState extends State<GoodsDetailsImgWidgetCo
color: Colors.white, color: Colors.white,
margin: const EdgeInsets.only(top: 6), margin: const EdgeInsets.only(top: 6),
width: double.infinity, width: double.infinity,
padding: const EdgeInsets.only(top: 15, bottom: 15, left: 12.5, right: 12.5),
padding:
const EdgeInsets.only(top: 15, bottom: 15, left: 12.5, right: 12.5),
child: _getLeftWidget(model), child: _getLeftWidget(model),
); );
} }
@@ -119,7 +137,10 @@ class _GoodsDetailsImgWidgetContainerState extends State<GoodsDetailsImgWidgetCo
width: 12, width: 12,
), ),
const SizedBox(width: 2.5), const SizedBox(width: 2.5),
Text(model?.title ?? '商品详情', style: TextStyle(color: HexColor.fromHex(model?.title_color ?? '#333333'), fontSize: 12)),
Text(model?.title ?? '商品详情',
style: TextStyle(
color: HexColor.fromHex(model?.title_color ?? '#333333'),
fontSize: 12)),
], ],
); );
} }


+ 79
- 29
lib/widgets/goods_details/slide_banner/goods_details_slide_banner_widget.dart View File

@@ -19,8 +19,13 @@ class GoodsDetailsSlideBannerWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocProvider<GoodsDetailsSlideBannerBloc>( return BlocProvider<GoodsDetailsSlideBannerBloc>(
create: (_) => GoodsDetailsSlideBannerBloc(repository: GoodsDetailsSlideBannerRepository()),//..add(GoodsDetailsSlideBannerInitEvent(model: model)),
child: GoodsDetailsSlideBannerContainer(model, key: UniqueKey(),),
create: (_) => GoodsDetailsSlideBannerBloc(
repository: GoodsDetailsSlideBannerRepository()),
//..add(GoodsDetailsSlideBannerInitEvent(model: model)),
child: GoodsDetailsSlideBannerContainer(
model,
key: UniqueKey(),
),
); );
} }
} }
@@ -28,27 +33,35 @@ class GoodsDetailsSlideBannerWidget extends StatelessWidget {
class GoodsDetailsSlideBannerContainer extends StatefulWidget { class GoodsDetailsSlideBannerContainer extends StatefulWidget {
final Map<String, dynamic> model; final Map<String, dynamic> model;


const GoodsDetailsSlideBannerContainer(this.model, {Key key}) : super(key: key);
const GoodsDetailsSlideBannerContainer(this.model, {Key key})
: super(key: key);


@override @override
_GoodsDetailsSlideBannerContainerState createState() => _GoodsDetailsSlideBannerContainerState();
_GoodsDetailsSlideBannerContainerState createState() =>
_GoodsDetailsSlideBannerContainerState();
} }


class _GoodsDetailsSlideBannerContainerState extends State<GoodsDetailsSlideBannerContainer> {
class _GoodsDetailsSlideBannerContainerState
extends State<GoodsDetailsSlideBannerContainer> {
/// 子元素点击事件 /// 子元素点击事件
void _itemOnClick(String model) {
void _itemOnClick(String model, List<String> images, int index) {
print('点击了 $model'); print('点击了 $model');
if(images!=null){
PhotoPreview.showPhotoPreviewByimages(context, images, currentIndex: index);
}
} }


@override @override
void initState() { void initState() {
BlocProvider.of<GoodsDetailsSlideBannerBloc>(context).add(GoodsDetailsSlideBannerInitEvent(model: widget?.model));
BlocProvider.of<GoodsDetailsSlideBannerBloc>(context)
.add(GoodsDetailsSlideBannerInitEvent(model: widget?.model));
super.initState(); super.initState();
} }


@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocConsumer<GoodsDetailsSlideBannerBloc, GoodsDetailsSlideBannerState>(
return BlocConsumer<GoodsDetailsSlideBannerBloc,
GoodsDetailsSlideBannerState>(
listener: (BuildContext context, GoodsDetailsSlideBannerState state) { listener: (BuildContext context, GoodsDetailsSlideBannerState state) {
if (state is GoodsDetailsSlideBannerErrorState) { if (state is GoodsDetailsSlideBannerErrorState) {
print('数据加载出错'); print('数据加载出错');
@@ -64,7 +77,8 @@ class _GoodsDetailsSlideBannerContainerState extends State<GoodsDetailsSlideBann
builder: (context, state) { builder: (context, state) {
print('currente state = $state'); print('currente state = $state');
if (state is GoodsDetailsSlideBannerLoadedState) { if (state is GoodsDetailsSlideBannerLoadedState) {
if (!EmptyUtil.isEmpty(state.model) && !EmptyUtil.isEmpty(state.model.image_list)) {
if (!EmptyUtil.isEmpty(state.model) &&
!EmptyUtil.isEmpty(state.model.image_list)) {
return _getMainWidget(state.model); return _getMainWidget(state.model);
} }
} }
@@ -90,56 +104,80 @@ class _GoodsDetailsSlideBannerContainerState extends State<GoodsDetailsSlideBann
itemCount: datas?.image_list?.length ?? 0, itemCount: datas?.image_list?.length ?? 0,
loop: true, loop: true,
autoplay: true, autoplay: true,
onTap: (index) => _itemOnClick(datas.image_list[index]),
pagination: _getSwiperStyleByType(datas, datas?.image_list?.length ?? 0),
onTap: (index) =>
_itemOnClick(datas.image_list[index], datas.image_list, index),
pagination:
_getSwiperStyleByType(datas, datas?.image_list?.length ?? 0),
), ),
); );
} }


/// 获取进度样式 /// 获取进度样式
SwiperPlugin _getSwiperStyleByType(GoodsDetailsSlideBannerModel model, int pageCount) {
SwiperPlugin _getSwiperStyleByType(
GoodsDetailsSlideBannerModel model, int pageCount) {
if ('1' != model.pagination_open) { if ('1' != model.pagination_open) {
return null; return null;
} }


if ('type_number' == model.pagination) { if ('type_number' == model.pagination) {
return _getNumswiperPlugin(pageCount, model.pagination_select_color, model.pagination_unselect_color);
return _getNumswiperPlugin(pageCount, model.pagination_select_color,
model.pagination_unselect_color);
} }
if ('type_point' == model.pagination) { if ('type_point' == model.pagination) {
return _swiperCustomPaginationDito(pageCount, model.pagination_select_color, model.pagination_unselect_color);
return _swiperCustomPaginationDito(pageCount,
model.pagination_select_color, model.pagination_unselect_color);
} }
if ('type_bar' == model.pagination) { if ('type_bar' == model.pagination) {
return _swiperCustomPagination(pageCount, model.pagination_select_color, model.pagination_unselect_color);
return _swiperCustomPagination(pageCount, model.pagination_select_color,
model.pagination_unselect_color);
} }
return null; return null;
} }


/// 数字样式 /// 数字样式
SwiperPlugin _getNumswiperPlugin(int pageCount, String selectColor, String unselectColor) {
return SwiperCustomPagination(builder: (BuildContext context, SwiperPluginConfig config) {
SwiperPlugin _getNumswiperPlugin(
int pageCount, String selectColor, String unselectColor) {
return SwiperCustomPagination(
builder: (BuildContext context, SwiperPluginConfig config) {
return Align( return Align(
alignment: Alignment(0.0, 0.9), alignment: Alignment(0.0, 0.9),
child: Container( child: Container(
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 18), padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 18),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(13), color: HexColor.fromHex('#4D000000')),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(13),
color: HexColor.fromHex('#4D000000')),
child: RichText( child: RichText(
text: TextSpan(text: '${config.activeIndex + 1}', style: TextStyle(fontSize: 12, color: HexColor.fromHex(selectColor)), children: [
TextSpan(text: '/', style: TextStyle(fontSize: 12, color: HexColor.fromHex(unselectColor))),
TextSpan(text: '$pageCount', style: TextStyle(fontSize: 12, color: HexColor.fromHex(unselectColor))),
]),
text: TextSpan(
text: '${config.activeIndex + 1}',
style: TextStyle(
fontSize: 12, color: HexColor.fromHex(selectColor)),
children: [
TextSpan(
text: '/',
style: TextStyle(
fontSize: 12,
color: HexColor.fromHex(unselectColor))),
TextSpan(
text: '$pageCount',
style: TextStyle(
fontSize: 12,
color: HexColor.fromHex(unselectColor))),
]),
)), )),
); );
}); });
} }


/// 自定义进度条 /// 自定义进度条
SwiperPlugin _swiperCustomPagination(int pageCount, String selectColor, String unselectColor) {
SwiperPlugin _swiperCustomPagination(
int pageCount, String selectColor, String unselectColor) {
List list = []; List list = [];
for (int i = 0; i < pageCount; i++) { for (int i = 0; i < pageCount; i++) {
list.add(i); list.add(i);
} }


return SwiperCustomPagination(builder: (BuildContext context, SwiperPluginConfig config) {
return SwiperCustomPagination(
builder: (BuildContext context, SwiperPluginConfig config) {
return Align( return Align(
alignment: Alignment(0.0, 0.9), alignment: Alignment(0.0, 0.9),
child: Row( child: Row(
@@ -148,10 +186,13 @@ class _GoodsDetailsSlideBannerContainerState extends State<GoodsDetailsSlideBann
children: list.map((index) { children: list.map((index) {
var borderRadius; var borderRadius;
if (index == 0) { if (index == 0) {
borderRadius = BorderRadius.only(topLeft: Radius.circular(2), bottomLeft: Radius.circular(2));
borderRadius = BorderRadius.only(
topLeft: Radius.circular(2), bottomLeft: Radius.circular(2));
} }
if (index == list.length - 1) { if (index == list.length - 1) {
borderRadius = BorderRadius.only(topRight: Radius.circular(2), bottomRight: Radius.circular(2));
borderRadius = BorderRadius.only(
topRight: Radius.circular(2),
bottomRight: Radius.circular(2));
} }


if (index == config.activeIndex) { if (index == config.activeIndex) {
@@ -161,7 +202,11 @@ class _GoodsDetailsSlideBannerContainerState extends State<GoodsDetailsSlideBann
return Container( return Container(
height: 4, height: 4,
width: 25, width: 25,
decoration: BoxDecoration(borderRadius: borderRadius, color: index == config.activeIndex ? HexColor.fromHex(selectColor) : HexColor.fromHex(unselectColor)),
decoration: BoxDecoration(
borderRadius: borderRadius,
color: index == config.activeIndex
? HexColor.fromHex(selectColor)
: HexColor.fromHex(unselectColor)),
); );
}).toList(), }).toList(),
), ),
@@ -170,9 +215,14 @@ class _GoodsDetailsSlideBannerContainerState extends State<GoodsDetailsSlideBann
} }


/// 圆形进度条 /// 圆形进度条
SwiperPlugin _swiperCustomPaginationDito(int pageCount, String selectColor, String unselectColor) {
SwiperPlugin _swiperCustomPaginationDito(
int pageCount, String selectColor, String unselectColor) {
return SwiperPagination( return SwiperPagination(
margin: const EdgeInsets.only(), margin: const EdgeInsets.only(),
builder: DotSwiperPaginationBuilder(color: HexColor.fromHex(unselectColor), activeColor: HexColor.fromHex(selectColor), size: 8, activeSize: 8));
builder: DotSwiperPaginationBuilder(
color: HexColor.fromHex(unselectColor),
activeColor: HexColor.fromHex(selectColor),
size: 8,
activeSize: 8));
} }
} }

Loading…
Cancel
Save