我正在尝试制作自定义时间轴 View ,但在对齐文本和圆圈时遇到问题。
代码
Widget orderTimeLine() {
return Container(
decoration: BoxDecoration(color: Colors.white),
margin: EdgeInsets.only(
bottom: SizeConfig.safeBlockHorizontal * 3,
),
padding: EdgeInsets.only(
top: SizeConfig.safeBlockHorizontal * 3,
left: SizeConfig.safeBlockHorizontal * 7,
bottom: SizeConfig.safeBlockHorizontal * 3,
),
child: Column(
children: <Widget>[
timelineRow("Order Confirmed", orderDateTime),
timelineRow("Order Inprocess", orderDateTime),
timelineRow("Order Processed", ""),
timelineRow("Order Shipped", ""),
timelineLastRow("Order Delivered", ""),
],
),
);
}
Widget timelineRow(String title, String subTile) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 18,
height: 18,
decoration: new BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
child: Text(""),
),
Container(
width: 3,
height: 50,
decoration: new BoxDecoration(
color: Colors.green,
shape: BoxShape.rectangle,
),
child: Text(""),
),
],
),
),
Expanded(
flex: 9,
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('${title}\n ${subTile}',
style: TextStyle(
fontFamily: "regular",
fontSize: 14,
color: Colors.black54)),
],
),
),
],
);
}
Widget timelineLastRow(String title, String subTile) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 18,
height: 18,
decoration: new BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
child: Text(""),
),
Container(
width: 3,
height: 20,
decoration: new BoxDecoration(
color: Colors.transparent,
shape: BoxShape.rectangle,
),
child: Text(""),
),
],
),
),
Expanded(
flex: 9,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('${title}\n ${subTile}',
style: TextStyle(
fontFamily: "regular",
fontSize: 14,
color: Colors.black54)),
],
),
),
],
);
}
预期:
获取
最佳答案
关于android - flutter 中的自定义时间轴 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57903601/