Skip to content

Commit 099ea9e

Browse files
author
wangchangsheng
committed
commit-添加自定义控件
1 parent b6f1916 commit 099ea9e

19 files changed

+838
-22
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
<img src="https://github.com/WinWang/open_eye/blob/master/screenshot/12.png" width="400px">
3434

35-
35+
<img src="https://github.com/WinWang/open_eye/blob/master/screenshot/13.png" width="400px">
3636

3737

3838

‎assets/images/icon_custom.png

4.71 KB
Loading

‎assets/images/icon_text_tag.png

1.65 KB
Loading

‎assets/images/movie-lazy.gif

3.82 KB
Loading

‎lib/business/complain/complain_submit_page.dart

+2
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,8 @@ class ComplainSubmitController extends BaseController<GatewayApi> {
250250
Get.offNamed(
251251
AppRoutes.complainHomePage + AppRoutes.complainMyRecordPage,
252252
arguments: value.resObject);
253+
}else{
254+
showToast(value.resMessage);
253255
}
254256
}, handleError: false);
255257
}

‎lib/business/complain/widget/item_feedback_record_widget.dart

+30
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import 'package:open_eye/res/colors.dart';
66
import 'package:open_eye/res/style.dart';
77
import 'package:open_eye/route/router_utils.dart';
88
import 'package:open_eye/widget/base_network_image.dart';
9+
import 'package:open_eye/widget/image_extends.dart';
910

11+
// ignore: must_be_immutable
1012
class ItemFeedbackRecordWidget extends CommonStatelessWidget {
1113
FeedbackListItemEntity itemEntity;
1214

@@ -100,6 +102,34 @@ class ItemFeedbackRecordWidget extends CommonStatelessWidget {
100102
// fit: BoxFit.fitWidth,
101103
// );
102104

105+
// return GestureDetector(
106+
// child: SizedBox(
107+
// width: 250.w,
108+
// // height: 250.w,
109+
// child: ImageExends(
110+
// imgUrl: itemEntity.content ?? "",
111+
// // "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.sucai.redocn.com%2Fattachments%2Fimages%2F201108%2F20110803%2FRedocn_2011073014594209.jpg&refer=http%3A%2F%2Fimg.sucai.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647776775&t=68a94bf059e39da45132b775c3504a13",
112+
// // width: 250.w,
113+
// // height: 200.w,
114+
// // fit: BoxFit.cover,
115+
// ),
116+
// ),
117+
// onTap: () {
118+
// RouterUtils.toPreviewPhotoView(itemEntity.content);
119+
// });
120+
121+
// return GestureDetector(
122+
// child: Image.network(
123+
// itemEntity.content ?? "",
124+
// // "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.sucai.redocn.com%2Fattachments%2Fimages%2F201108%2F20110803%2FRedocn_2011073014594209.jpg&refer=http%3A%2F%2Fimg.sucai.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647776775&t=68a94bf059e39da45132b775c3504a13",
125+
// width: 250.w,
126+
// height: 200.w,
127+
// fit: BoxFit.cover,
128+
// ),
129+
// onTap: () {
130+
// RouterUtils.toPreviewPhotoView(itemEntity.content);
131+
// });
132+
103133
return GestureDetector(
104134
child: BaseNetworkImage(
105135
itemEntity.content ?? "",

‎lib/business/custom_paint_page/CustomPaintPage.dart

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import 'package:flutter/cupertino.dart';
2+
import 'package:flutter_screenutil/flutter_screenutil.dart';
3+
import 'package:get/get.dart';
4+
import 'package:open_eye/base/controller/base_controller.dart';
5+
import 'package:open_eye/base/pageWidget/base_stateless_widget.dart';
6+
import 'package:open_eye/business/custom_paint_page/painter/circel_chart_painter.dart';
7+
import 'package:open_eye/business/custom_paint_page/painter/vote_painter.dart';
8+
import 'package:open_eye/business/custom_paint_page/widget/bar_chart_widget.dart';
9+
import 'package:open_eye/business/custom_paint_page/widget/line_chart_widget.dart';
10+
import 'package:open_eye/res/style.dart';
11+
12+
class CustomPaintPage extends BaseStatelessWidget<CustomPaintController> {
13+
const CustomPaintPage({Key? key}) : super(key: key);
14+
15+
@override
16+
Widget buildContent(BuildContext context) {
17+
return SingleChildScrollView(
18+
child: Column(
19+
crossAxisAlignment: CrossAxisAlignment.center,
20+
children: [
21+
Text("折线图", style: Styles.style_black_32),
22+
Container(
23+
padding: EdgeInsets.all(25.w),
24+
child: LineChartWidget(chartList: controller.lineCharttList.value),
25+
),
26+
Text("饼图", style: Styles.style_black_32),
27+
Container(
28+
margin: EdgeInsets.only(top: 30.w, bottom: 30.w),
29+
alignment: Alignment.center,
30+
child: CustomPaint(
31+
painter: CircleChartPainter(controller.circleChartList.value),
32+
size: Size(300.w, 300.w),
33+
),
34+
),
35+
Text("柱状图", style: Styles.style_black_32),
36+
Container(
37+
padding: EdgeInsets.all(25.w),
38+
child: BarChartWidget(controller.circleChartList.value),
39+
),
40+
Text("投票控件", style: Styles.style_black_32),
41+
Container(
42+
padding: EdgeInsets.only(left: 30.w, right: 30.w),
43+
child: CustomPaint(
44+
size: Size(double.infinity, 40.w),
45+
painter: VotePainter(
46+
controller.posiNum.value, controller.nageNum.value),
47+
),
48+
)
49+
],
50+
),
51+
);
52+
}
53+
54+
@override
55+
String titleString() {
56+
return "自定义控件";
57+
}
58+
59+
@override
60+
bool useLoadSir() {
61+
return false;
62+
}
63+
}
64+
65+
class CustomPaintController extends BaseController {
66+
RxList<int> lineCharttList = <int>[5, 10, 8, 6, 7, 2, 15, 14, 13, 9].obs;
67+
RxList<double> circleChartList =
68+
<double>[5, 10, 8, 6, 7, 2, 15, 14, 13, 9].obs;
69+
70+
RxDouble nageNum = 50.0.obs;
71+
RxDouble posiNum = 110.0.obs;
72+
73+
@override
74+
void onReady() {
75+
super.onReady();
76+
}
77+
78+
@override
79+
void loadNet() {}
80+
}
81+
82+
class CustomPaintBinding implements Bindings {
83+
@override
84+
void dependencies() {
85+
Get.lazyPut(() => CustomPaintController());
86+
}
87+
}

‎lib/business/custom_paint_page/painter/bar_chart_painter.dart

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import 'dart:math';
2+
import 'dart:ui' as ui;
3+
4+
import 'package:flutter/material.dart';
5+
import 'package:flutter_screenutil/flutter_screenutil.dart';
6+
import 'package:open_eye/res/colors.dart';
7+
import 'package:open_eye/utils/log_utils.dart';
8+
import 'package:path_drawing/path_drawing.dart';
9+
10+
class BarChartPainter extends CustomPainter {
11+
List<double> chartList;
12+
late Paint barPaint;
13+
late Paint backPaint;
14+
late Paint dashLinePaint;
15+
ui.Image? tagImage;
16+
double maxValue = 0;
17+
double minValue = 0;
18+
double perHeight = 0;
19+
double perValue = 0;
20+
21+
bool hasTouchDonw;
22+
double dx;
23+
double dy;
24+
25+
BarChartPainter(
26+
this.chartList, this.hasTouchDonw, this.dx, this.dy, this.tagImage) {
27+
///柱状图画笔
28+
backPaint = Paint()
29+
..isAntiAlias = true
30+
..style = PaintingStyle.stroke
31+
..strokeWidth = 2.w
32+
..color = ColorStyle.color_CCCCCC;
33+
34+
///背景画笔
35+
barPaint = Paint()
36+
..isAntiAlias = true
37+
..style = PaintingStyle.fill
38+
..strokeWidth = 30.w
39+
..color = ColorStyle.color_EA4C43;
40+
41+
///虚线画笔
42+
dashLinePaint = Paint()
43+
..isAntiAlias = true
44+
..style = PaintingStyle.stroke
45+
..strokeWidth = 2.w
46+
..color = ColorStyle.color_CCCCCC;
47+
48+
for (var value in chartList) {
49+
maxValue = max(value, maxValue);
50+
minValue = min(value, minValue);
51+
}
52+
maxValue = maxValue + maxValue * 0.2;
53+
}
54+
55+
@override
56+
void paint(Canvas canvas, Size size) {
57+
var rect = Offset.zero & size;
58+
drawBackground(rect, size, canvas);
59+
drawBarchart(rect, size, canvas);
60+
drawSelectValue(size, canvas);
61+
}
62+
63+
@override
64+
bool shouldRepaint(covariant CustomPainter oldDelegate) {
65+
return true;
66+
}
67+
68+
///绘制背景
69+
void drawBackground(Rect rect, Size size, Canvas canvas) {
70+
//绘制底框
71+
canvas.drawRect(rect, backPaint);
72+
//绘制左边刻度
73+
perValue = (maxValue - minValue) / 4;
74+
perHeight = (size.height - 20.w) / 4;
75+
for (int i = 0; i < 5; i++) {
76+
///绘制刻度文字
77+
ui.ParagraphBuilder paragraphBuilder =
78+
ui.ParagraphBuilder(ui.ParagraphStyle(fontSize: 20.sp))
79+
..pushStyle(ui.TextStyle(
80+
color: ColorStyle.color_666666,
81+
textBaseline: TextBaseline.ideographic))
82+
..addText((perValue * i).toString());
83+
var paragraph = paragraphBuilder.build()
84+
..layout(ui.ParagraphConstraints(width: 80.w));
85+
canvas.drawParagraph(
86+
paragraph, Offset(0, size.height - i * perHeight - 20.w));
87+
}
88+
}
89+
90+
///绘制柱子
91+
void drawBarchart(Rect rect, Size size, Canvas canvas) {
92+
var perWidth = size.width / (chartList.length + 1);
93+
var heightValue = size.height / (maxValue - minValue);
94+
LogD("msg>>>>>>>${size.height}");
95+
for (int i = 0; i < chartList.length; i++) {
96+
var itemValue = chartList[i];
97+
var xPosition = perWidth * (i + 1);
98+
var yPosition = size.height - heightValue * itemValue;
99+
canvas.drawLine(Offset(xPosition, size.height),
100+
Offset(xPosition, yPosition), barPaint);
101+
}
102+
}
103+
104+
///绘制选中数据
105+
void drawSelectValue(Size size, Canvas canvas) {
106+
if (hasTouchDonw && dx > 0 && dy > 0) {
107+
var perWidth = size.width / (chartList.length + 1);
108+
var index = (dx / perWidth).round(); //理论上应该选中的Bar
109+
LogD("选中角标>>>>>>>>>$index");
110+
var xPosition = index * perWidth;
111+
var heightValue = size.height / (maxValue - minValue);
112+
var itemValue = chartList[index - 1];
113+
var yPosition = size.height - heightValue * itemValue;
114+
115+
///绘制选中竖线
116+
var linePath = Path();
117+
linePath.moveTo(xPosition, 0);
118+
linePath.lineTo(xPosition, size.height);
119+
var dashPathLine =
120+
dashPath(linePath, dashArray: CircularIntervalList([4, 4]));
121+
canvas.drawPath(dashPathLine, dashLinePaint);
122+
//绘制选中背景标签
123+
if (tagImage != null) {
124+
var src = Rect.fromLTWH(0, 0, tagImage?.width.toDouble() ?? 0,
125+
tagImage?.height.toDouble() ?? 0);
126+
var dsc = Rect.fromLTWH(xPosition - 40.w, yPosition - 60.w, 80.w, 60.w);
127+
canvas.drawImageRect(tagImage!, src, dsc, dashLinePaint);
128+
//绘制文字
129+
ui.ParagraphBuilder paragraphBuilder = ui.ParagraphBuilder(
130+
ui.ParagraphStyle(fontSize: 20.sp, textAlign: TextAlign.center))
131+
..pushStyle(ui.TextStyle(
132+
color: ColorStyle.color_111111,
133+
textBaseline: TextBaseline.ideographic))
134+
..addText(itemValue.toString());
135+
var paragraph = paragraphBuilder.build()
136+
..layout(ui.ParagraphConstraints(width: 80.w));
137+
canvas.drawParagraph(
138+
paragraph, Offset(xPosition - 40.w, yPosition - 40.w));
139+
}
140+
}
141+
}
142+
}

‎lib/business/custom_paint_page/painter/circel_chart_painter.dart

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import 'dart:math';
2+
3+
import 'package:flutter/material.dart';
4+
import 'package:open_eye/res/colors.dart';
5+
import 'package:open_eye/utils/log_utils.dart';
6+
7+
class CircleChartPainter extends CustomPainter {
8+
List<double> chartList;
9+
double totalValue = 0;
10+
11+
var colorList = [
12+
ColorStyle.color_EA4C43,
13+
ColorStyle.color_FE8C28,
14+
ColorStyle.color_FFAE2E,
15+
ColorStyle.color_FBE240,
16+
ColorStyle.color_24CF5F,
17+
ColorStyle.color_1A2F51,
18+
ColorStyle.color_EA4C43,
19+
ColorStyle.color_FE8C28,
20+
ColorStyle.color_FFAE2E,
21+
ColorStyle.color_FBE240,
22+
ColorStyle.color_24CF5F,
23+
ColorStyle.color_1A2F51,
24+
];
25+
26+
late Paint circlePaint;
27+
28+
CircleChartPainter(this.chartList) {
29+
circlePaint = Paint()
30+
..style = PaintingStyle.fill
31+
..color = ColorStyle.color_black
32+
..isAntiAlias = true;
33+
for (var value in chartList) {
34+
totalValue += value;
35+
}
36+
}
37+
38+
@override
39+
void paint(Canvas canvas, Size size) {
40+
var rect = Offset.zero & size;
41+
42+
///Android和Flutter一样的API，用的却不同，Android是角度，FLutter需要用弧度，比较坑
43+
///弧度 = 角度 * PI/180；
44+
///
45+
///角度 = 弧度 * 180/PI；
46+
double startAngle = -90 * pi / 180;
47+
var percentAngle = 360 / totalValue;
48+
for (int i = 0; i < chartList.length; i++) {
49+
var value = chartList[i];
50+
circlePaint.color = colorList[i];
51+
var percent = value / totalValue;
52+
var angel = percentAngle * value * pi / 180;
53+
LogD("$startAngle角度>>>>>>$angel<<<<<<");
54+
canvas.drawArc(rect, startAngle, angel, true, circlePaint);
55+
startAngle += angel;
56+
}
57+
}
58+
59+
@override
60+
bool shouldRepaint(covariant CustomPainter oldDelegate) {
61+
return true;
62+
}
63+
}

0 commit comments

Comments
 (0)