Question

我正在尝试在当前布局中添加水平分隔线，但是由于某种原因，分隔线没有出现。

下面是我尝试过的代码

 return Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
              flex: 1,
              child: Column(children: <Widget>[
                Text('Total Outstanding', textAlign: TextAlign.center,),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child:  Text('\$345.55',textAlign: TextAlign.center, style: TextStyle(color: Colors.green,)),
                ),

              ])),
          VerticalDivider( width: 0.0, indent: 0.0, color: black),
          Expanded(
              flex: 1,
              child: Column(children: [
                Text('Total Received', textAlign: TextAlign.center,),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child:   Text('\$1806.50',textAlign: TextAlign.center, style: TextStyle(color: Colors.green)),
                ),

              ],
              )
          ),Divider(color: Colors.black54),
        ],
    );

我期望Divider（color：Colors.black54），在我的代码中将绘制分隔线。参见下面的图片。我画的红线应该是分隔线出现的位置。有人可以帮助我修改代码，以便水平分隔线出现在红线处吗？在屏幕的开头和结尾处也应该有一些填充。预先感谢

Answer 1

Column(
  children: <Widget>[
    SizedBox(
      height: 56,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Total Outstanding',
                  textAlign: TextAlign.center,
                ),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child: Text('\$345.55',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.green,
                      )),
                ),
              ],
            ),
          ),
          VerticalDivider(width: 1.0, color: Colors.black),
          Expanded(
            flex: 1,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Total Received',
                  textAlign: TextAlign.center,
                ),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child: Text('\$1806.50', textAlign: TextAlign.center, style: TextStyle(color: Colors.green)),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    SizedBox(height: 12),
    Container(height: 2, color: Colors.black54),
  ],
),

在我的布局中显示分隔线时遇到问题

1 个答案: