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)),
            ],
          ),
        ),
      ],
    );
  }

Widget orderTimeLine（）{
返回容器(
装饰：盒子装饰（颜色：彩色。白色），
页边距：仅限边距(
底部：SizeConfig.safeBlockHorizontal*3，
),
填充：仅限边缘设置(
顶部：SizeConfig.safeBlockHorizontal*3，
左：SizeConfig.safeBlockHorizontal*7，
底部：SizeConfig.safeBlockHorizontal*3，
),
子：列(
儿童：[
timelineRow（“订单确认”，订单日期时间），
timelineRow（“处理中的订单”，orderDateTime），
timelineRow（“已处理订单”），
timelineRow（“已发货订单”），
TimeLineAstrow（“订单交付”和“），
],
),
);
}
小部件timelineRow（字符串标题、字符串子文件）{
返回行(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
扩大(
弹性：1，
子：列(
//mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
容器(
宽度：18，
身高：18，
装饰：新盒子装饰(
颜色：颜色。绿色，
形状：BoxShape.circle，
),
子项：文本（“”），
),
容器(
宽度：3，
身高：50，
装饰：新盒子装饰(
颜色：颜色。绿色，
形状：BoxShape.rectangle，
),
子项：文本（“”），
),
],
),
),
扩大(
弹性：9，
子：列(
//mainAxisAlignment:mainAxisAlignment.center，
mainAxisSize:mainAxisSize.min，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
文本（'${title}\n${subTile}'，
样式：TextStyle(
fontFamily：“常规”，
尺寸：14，
颜色：颜色。黑色，
],
),
),
],
);
}
小部件TimeLineAstrow（字符串标题、字符串子文件）{
返回行(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
扩大(
弹性：1，
子：列(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.max，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
容器(
宽度：18，
身高：18，
装饰：新盒子装饰(
颜色：颜色。绿色，
形状：BoxShape.circle，
),
子项：文本（“”），
),
容器(
宽度：3，
身高：20，
装饰：新盒子装饰(
颜色：颜色。透明，
形状：BoxShape.rectangle，
),
子项：文本（“”），
),
],
),
),
扩大(
弹性：9，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
mainAxisSize:mainAxisSize.max，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
文本（'${title}\n${subTile}'，
样式：TextStyle(
fontFamily：“常规”，
尺寸：14，
颜色：颜色。黑色，
],
),
),
],
);
}

预期：

得到

---

您需要为行设置CrossAxisAliging：

  Widget timelineRow(String title, String subTile) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start, # <- this

小部件timelineRow（字符串标题、字符串子文件）{
返回行(
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.start，#您可以使用

此外，存储库还包含一些使用此包构建的示例

Hello Farhana，从代码的第一眼来看，您应该添加一个条件，说明如果子文件为空，则颜色应为灰色。您能理解吗？@DiogoRosa我的问题与灰色无关，我的问题是标题与圆圈对齐。@Farhana您需要为t设置
crossAxisAlignment:crossAxisAlignment.start，
他是一个小部件