1.轴线
class MySeparatorVertical extends StatelessWidget {
final Color color;
const MySeparatorVertical({
this.color = Colors.black});
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final height = constraints.constrainHeight();
final dashWidth = 4.0;
final dashCount = (height / (2 * dashWidth)).floor();
//实线
/*return Flex(
direction: Axis.vertical,
children: [
Container(
width: 1,
height: height,
color: color,
)
],
);*/
//虚线
return Flex(
children: List.generate(dashCount, (_) {
return SizedBox(
width: 1,
height: dashWidth,
child: DecoratedBox(
decoration: BoxDecoration(color: color),
),
);
}),
mainAxisAlignment: MainAxisAlignment.spaceBetween,
direction: Axis.vertical,
);
},
);
}
}
2.布局
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.fromLTRB(20, 30, 20, 30),
color: Colors.white,
child: Column(
children: widget.expressList.map((element) {
return _expressItem(element);
}).toList(),
),
)
Widget _expressItem(Data item) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Stack(
children: [
Container(
padding: EdgeInsets.only(left: 37),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 4,
),
Row(
children: [
Expanded(
child: Text(
'${
item.context}',
style:
TextStyle(fontSize: 14, color: Color(0xffa3a3a3)),
))
],
),
SizedBox(
height: 12.0,
),
Text(
'${
item.time}',
style: TextStyle(fontSize: 12, color: Color(0xff666666)),
softWrap: true,
),
SizedBox(
height: 12.0,
),
],
),
),
Positioned(
left: 0,
width: 37,
bottom: 0,
top: 0,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
item == widget.expressList[0]?Container(
height: 28.w,
width: 28.w,
child: Image.asset(PathConfig.iconSelect,),
):
ClipOval(
child: Container(
width: 22.w,
height: 22.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: Colors.white,
border: Border.all(color: Color(0xffe5e5e5),width: 1)
),
),
),
item == widget.expressList[widget.expressList.length-1]?Container():
Expanded(
child: Container(
width: 27,
child: MySeparatorVertical(
color: Color(0xffe5e5e5),
),
))
],
),
))
],
))
],
);
}