2020-...

Question

If I understood your question correctly, you are looking for something like this:

[Icon]   Order received
  |      2020-05-28 10:00 AM
  |
  |
[Icon]   On the way
  |      2020-05-29 10:00 AM
  |
  |
[Icon]   Delivered
         2020--05-29 11:00 AM

我有3个ListTile小部件，如下图所示，我想在图标之间添加垂直连接线，但不知道如何做。有谁能帮忙吗？谢谢。

    import 'package:flutter/material.dart';
    import 'package:font_awesome_flutter/font_awesome_flutter.dart';
    import 'package:home_chefs/common_widgets/text_widget.dart';
    import 'package:home_chefs/constants/color_palette.dart';
    import 'package:home_chefs/constants/font_enum.dart';
    import 'package:home_chefs/constants/form_styleguides.dart';

    class OrderStatusWidget extends StatefulWidget {
      @override
      _OrderStatusWidgetState createState() => _OrderStatusWidgetState();
    }

    class _OrderStatusWidgetState extends State<OrderStatusWidget> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: ColorPalette.white,
          body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(top: 30.0, bottom: 30.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    TextWidget(
                      text: 'Order status',
                      fontFamily: FontFamily.BalooRegular.toShortString(),
                      fontSize: FormStyleGuides.textSizeMedium,
                    ),
                    TextWidget(
                      text: 'Invoice: 12828',
                      fontFamily: FontFamily.BalooRegular.toShortString(),
                      fontSize: FormStyleGuides.textSizeMedium,
                    ),
                    Container(
                        height: 100.0,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(8.0)),
                            image: DecorationImage(
                                fit: BoxFit.contain,
                                image: AssetImage(
                                  'assets/images/trending/pho_ha_noi.jpg',
                                ))))
                  ],
                ),
              ),
              Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    ListTile(
                      leading: FaIcon(
                        FontAwesomeIcons.book,
                        color: ColorPalette.persimmon,
                      ),
                      title: Text('Order received'),
                      subtitle: Text('30/05/2020 10.00 AM'),
                      //contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
                    ),
                    ListTile(
                      leading: FaIcon(
                        FontAwesomeIcons.truck,
                        color: ColorPalette.persimmon,
                      ),
                      title: Text('On the way'),
                      subtitle: Text('30/05/2020 10.00 AM'),
                      //contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
                    ),
                    ListTile(
                      leading: FaIcon(
                        FontAwesomeIcons.solidFlag,
                        color: ColorPalette.persimmon,
                      ),
                      title: Text('Delivered'),
                      subtitle: Text('30/05/2020 11.00 AM'),
                      //contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
                    ),
                  ],
                ),
              ),
              Container(
                width: 100.0,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    RaisedButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(
                              FormStyleGuides.buttonBorderRadius),
                          side: BorderSide(color: ColorPalette.persimmon)),
                      color: ColorPalette.persimmon,
                      highlightColor: ColorPalette.persimmon,
                      onPressed: () {},
                      padding: EdgeInsets.fromLTRB(
                          FormStyleGuides.buttonPaddingLeft,
                          FormStyleGuides.buttonPaddingTop,
                          FormStyleGuides.buttonPaddingRight,
                          FormStyleGuides.buttonPaddingBottom),
                      child: TextWidget(
                        text: 'Confirm delivery',
                        color: ColorPalette.white,
                        fontSize: FormStyleGuides.textFormFieldLabelSize,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      }
    }

编辑：下面提供源代码。如上所述，我需要在ListTile小组件的图标之间画一条线。尝试了VerticalDivider，但ListTile小组件之间仍然有很大的差距。

Answer 1

我有3个ListTile小组件，如下图所示，我想在图标之间添加垂直连接线，但不知道该怎么做。有谁能帮忙吗？谢谢。图标]订单已收到