如何将彩色线条设置到卡的结尾，在翩翩起舞？

Question

我正在努力使这对我的费用清单可用。

预期的输出。

我的输出。

我尝试使用 verticalDivider( thickness:2.0, color:Colors.red ) 和 Container( width:2.0, color:Colors.red ) 包裹 IntrinsticHeight...它必须占用卡片的高度，这是我的卡片视图的输出代码。

Card(
     margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
     elevation: 2.0,
        child: InkWell(
                       splashColor: Colors.blue.withAlpha(30),
                       onTap: () async{
                           //no action
                      },
                       child: Container(
                         padding: EdgeInsets.all(10.0),
                         width: double.infinity,
                         //height: 150,   //set to wrap
                           child:new Row(
                           children: <Widget>[


                         Container(
                              color: Colors.deepPurple[50],
                         padding: new EdgeInsets.all(5.0),
                         child: Text('$id', style: TextStyle(color: Colors.deepPurple, fontSize: 25.0, fontWeight: FontWeight.bold,),)
                         ),

                         SizedBox(width:15.0),

                         //add expanded to get full view area
                         Expanded(     
                           child: Column(
                             mainAxisSize: MainAxisSize.min,
                             crossAxisAlignment: CrossAxisAlignment.stretch,
                             children: <Widget>[

                               Row(
                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: <Widget>[

                                      Text('$transfer', style: TextStyle(fontSize: 18.0, color: Colors.black54, letterSpacing: 1.5, ), overflow: TextOverflow.ellipsis,),
                                      Text("\u20B9 $amt", style: TextStyle(fontSize: 20.0, color: Colors.red, fontWeight: FontWeight.bold, ), overflow: TextOverflow.ellipsis,),
                                  ],
                               ),

                             ],
                           ),
                         ),

                         SizedBox(width:10.0),

                         VerticalDivider(thickness: 2.0, color: Colors.red,),

                           ],
                       ),
                       ),
                       ),
 );

如何实现这个预期的输出？

先谢谢你。

Answer 1

你可以将Card包在一个容器中，然后添加以下属性。

decoration: BoxDecoration(
          border: Border(right: BorderSide(color: Colors.red,width: 3,)),
         ),

你的代码会变成这样... ...

Container(
        decoration: BoxDecoration(
          border: Border(right: BorderSide(color: Colors.red,width: 3,)),
        ),
              child: Card(

          margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
          elevation: 2.0,
          child: InkWell(
            splashColor: Colors.blue.withAlpha(30),
            onTap: () async {
              //no action
            },
            child: Container(
              padding: EdgeInsets.all(10.0),
              width: double.infinity,
              //height: 150,   //set to wrap
              child: new Row(
                children: <Widget>[
                  Container(
                      color: Colors.deepPurple[50],
                      padding: new EdgeInsets.all(5.0),
                      child: Text(
                        'jdjjd',
                        style: TextStyle(
                          color: Colors.deepPurple,
                          fontSize: 25.0,
                          fontWeight: FontWeight.bold,
                        ),
                      )),

                  SizedBox(width: 15.0),

                  //add expanded to get full view area
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text(
                              'transfer',
                              style: TextStyle(
                                fontSize: 18.0,
                                color: Colors.black54,
                                letterSpacing: 1.5,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                            Text(
                              "\u20B9",
                              style: TextStyle(
                                fontSize: 20.0,
                                color: Colors.red,
                                fontWeight: FontWeight.bold,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),

                  SizedBox(width: 10.0),

                  // VerticalDivider(
                  //   thickness: 2.0,
                  //   color: Colors.red,
                  // ),
                ],
              ),
            ),
          ),
        ),
      ),

请注意，我已经删除了字符串中的变量，以便于编译。

Answer 2

我们必须使用定义了高度和宽度的卡片，然后我们可以修正 verticalDivider() 和 Container()......容器很适合我的情况，感谢前面的回答，帮助我达到预期的结果。

让我们看看代码。

Card(
    margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
    elevation: 2.0,
      child: InkWell(
                  splashColor: Colors.blue.withAlpha(30),
                  onTap: () async{
                      //no action
                 },
                  child: Container(
                    padding: EdgeInsets.fromLTRB(10,0,0,0),
                    width: double.infinity,
                    height: 60,       //75  //no wrap to set indicator at end
                      child:new Row(
                      children: <Widget>[


                    Container(
                         color: Colors.deepPurple[50],
                    padding: new EdgeInsets.all(5.0),
                    child: Text('$id', style: TextStyle(color: Colors.deepPurple, fontSize: 25.0, fontWeight: FontWeight.bold,),)
                    ),

                    SizedBox(width:15.0),

                    //add expanded to get full view area
                    Expanded(     
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[

                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children: <Widget>[

                                 Text('$transfer', style: TextStyle(fontSize: 18.0, color: Colors.black54, letterSpacing: 1.5, ), overflow: TextOverflow.ellipsis,),
                                 Text("\u20B9 $amt", style: TextStyle(fontSize: 20.0, color: uiColor, fontWeight: FontWeight.bold, ), overflow: TextOverflow.ellipsis,),
                             ],
                          ),

                        ],
                      ),
                    ),

                    SizedBox(width:20.0),

                    Container(
                      decoration: BoxDecoration(
                          border: Border(right: BorderSide(color: Colors.red,width: 3,)),
                        ),
                    ),

                      ],
                  ),
                  ),
                  ),
  );

这个边框只有在你的父部件有定义的高度限制时才会显示，因为容器和垂直分割器都取决于高度。

最后的输出。

希望这能帮助到大家!