先上效果图:
上完整代码:
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_jijin/layout/style/JColor.dart';
import 'package:flutter_jijin/layout/style/JTextStyle.dart';
/**
* 圆圈加线样式的垂直进度widget
*/
class ProgressVerticalextends StatelessWidget {
static const doubletopHeight =30.0;
static const doublecircleRadius =6.0;
static const doublemarginLeft =24.0;
static const doublebottomLineHeight =100.0;
final boolisLeftTopLine; //左边顶部是否需要画线，第一条数据为false
final boolisLeftBottomLine; //左边底部是否需要画线，最后条数据为false
final text1;
final text2;
const ProgressVertical(this.text1, this.text2,
{Key key, this.isLeftTopLine =true, this.isLeftBottomLine =true})
:super(key: key);
@override
Widgetbuild(BuildContext context) {
// TODO: implement build
return new Container(
height:
bottomLineHeight +2 *circleRadius +topHeight /2 -circleRadius,
child:new Row(
children: [
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
isLeftTopLine
?new CustomPaint(
painter:Draw("lineTop"),
)
:new CustomPaint(
painter:Draw(""),
),
new CustomPaint(
painter:Draw("point"),
),
isLeftBottomLine
?new CustomPaint(
painter:Draw("lineBottom"),
)
:new CustomPaint(
painter:Draw(""),
),
],
),
new Expanded(
child:new Container(
margin:const EdgeInsets.only(left:marginLeft),
child:new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
height:topHeight,
alignment: Alignment.centerLeft,
child:new Text(
text1,
style: JTextStyle.commonTextStyleBlack,
maxLines:1,
overflow: TextOverflow.ellipsis,
),
)
,
new Container(
margin:const EdgeInsets.only(top:6),
child:new Text(
text2,
style: JTextStyle.smallTextStyleGray,
maxLines:3,
overflow: TextOverflow.ellipsis,
),
)
],
)),
)
],
));
}
}
///新建类继承于CustomPainter并且实现CustomPainter里面的paint（）和shouldRepaint方法
class Drawextends CustomPainter {
Paintpainter;
final type;
Draw(this.type) {
painter =Paint()
..color =Color(JColor.gray)
..strokeCap = StrokeCap.round
..isAntiAlias =true
..strokeWidth =1
..style = PaintingStyle.fill;
}
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
switch (type) {
case "point":
canvas.drawPoints(
PointMode.points,
[
Offset(
ProgressVertical.circleRadius, ProgressVertical.topHeight /2)
],
painter
..strokeWidth = ProgressVertical.circleRadius *
2); //Offset的位置是画笔中心的位置，此处是圆心的位置，需要计算半径
break;
case "lineTop":
canvas.drawLine(
Offset(ProgressVertical.circleRadius, 0),
Offset(ProgressVertical.circleRadius,
ProgressVertical.topHeight /2 - ProgressVertical.circleRadius),
painter);
break;
case "lineBottom":
canvas.drawLine(
Offset(ProgressVertical.circleRadius,
ProgressVertical.topHeight /2 + ProgressVertical.circleRadius),
Offset(
ProgressVertical.circleRadius,
ProgressVertical.topHeight /2 +
ProgressVertical.circleRadius +
ProgressVertical.bottomLineHeight),
painter);
break;
}
}
///控制自定义View是否需要重绘的，返回false代表这个View在构建完成后不需要重绘。
@override
boolshouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
上面有一些自己定义的style,可以任意修改为自己想要的,
使用时:
@override
Widgetbuild(BuildContext context) {
// TODO: implement build
return new Scaffold(
body:new Container(
width: Util.getScreenWidth(context),
height: Util.getScreenHeight(context),
color: Colors.white,
child:new SafeArea(child: _wProgress()),
)
);
}
Widget_wProgress(){
return Container(
margin:const EdgeInsets.only(left:32,top:24,right:24,bottom:60),
child:new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new ProgressVertical("右边标题1","右边内容1,这里的内容是测试内容,最多不超过三行,超过的内容以三个点的形式表现,该行的内容就超过了三行的限制,"
"会以点点的形式展现出来以点点的形式展现出来以点点的形式展现出来",isLeftTopLine:false,),
new ProgressVertical("网络服务协议","您需要进行身份证,姓名,银行卡号,手机号四要素认证,如果认证不通过,可以用它"),
new ProgressVertical("投资者信息及承诺函确认","您需要进行身份证,姓名,银行卡号,手机号四要素认证,如果认证不通过,可以用它"),
new ProgressVertical("风险测评","您需要进行身份证,姓名,银行卡号,手机号四要素认证,如果认证不通过,可以用它",isLeftBottomLine:false,),
],),
);
}
