android - 颤动中的自定义时间轴视图
问题描述
我正在尝试制作自定义时间线视图,面对文本和圆圈对齐的问题。
编码
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)),
],
),
),
],
);
}
预期的:
得到
解决方案
推荐阅读
- c - 如何在 C 中打印字母的倒金字塔图案?
- python - 如何解决 Pymongo 的这个错误?找不到游标 id
- python-3.x - 机器人与 python 不和谐
- python - 以相同的方式为 Python 中的多个类重新定义 __str__ 方法
- google-analytics - 使用特定查询变量过滤 OUT 流量
- amazon-web-services - 如何减少查询时间 DynamoDB
- python - 错误:没有足够的值来解包(预期 3,得到 1)
- cypress - 使步骤定义动态处理任何传入的文本
- node.js - Express-fileupload 无法上传大尺寸文件
- c++ - 如何在 vscode 的 `cmake-kits.json` 或 `cmake-variants.json` 中更改 cmake 构建目录