flutter - 如何将图像摆在卡片边框上？

Question

我是新手，我正在共享一个图像，其中有卡并且其边框有图像(如您所见，图像中显示的日期即2020年7月)。我对如何实现此功能一无所知。请帮我。
我写了下面的代码来创建卡。该代码在卡内显示日期图像。我是否需要关注其他一些小部件，而不是卡片和列表对象？

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    color: Colors.grey[100],
    border: Border.all(
      width: 1, //
      //                <--- border width here
    ),
  );
}
Widget _myListView(BuildContext context) {
return new ListView.separated(
  padding: const EdgeInsets.all(8),
  itemCount: 1,
  itemBuilder: (BuildContext context, int index) {
    return  Padding(
        padding: const EdgeInsets.all(0.0),
        child:
        Column(
            children: <Widget>[
        Container(
            decoration:  myBoxDecoration(),
            height: 180,


            child :
            Card(
                    child: Ink(
                      color: Colors.grey[200],
                      child : ListTile(
                        onTap: () {
                        },
                        title: Column(
                            children: <Widget>[
                              Row(
                               children: <Widget>[
                              Container(
                                child:

                                Center(child: Text('JULY , 2020' ,  style: TextStyle(
                                    fontWeight: FontWeight.bold ,
                                    fontSize: 20,
                                    color: Colors.white
                                ),),),
                                width: 190.0,
                                height: 30,
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage("assets/images/apply_leave.png"),
                                    fit: BoxFit.fill,
                                    //  alignment: Alignment.center,
                                  ),
                                ),
                              ),
                              Container(
                                 child:Text('' ,  style: TextStyle(
                                     fontWeight: FontWeight.bold ,
                                     fontSize: 20,
                                     color: Colors.black
                                 ),)
                              )


                              ]
                              ),
                              SizedBox(height: 20.0),

                             Expanded(
                               child :
                               Row(
                                   children: <Widget>[
                                Text('FEE SCEDULE' , style: TextStyle(
                                 fontWeight: FontWeight.bold ,
                                 color: Colors.black,


                                   )),
                                     SizedBox(width: 80.0),
                                     Text('JULY-SEPT' , style: TextStyle(
                                       fontWeight: FontWeight.bold ,
                                       color: Colors.black,


                                     ))

                                   ])
                             ),
                              Expanded(
                                  child :
                                  Row(
                                      children: <Widget>[
                                        Text('DUE DATE' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        )),
                                        SizedBox(width: 105.0),
                                        Text('10-06-2020' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        ))

                                      ])
                              ),
                              Expanded(
                                  child :
                                  Row(
                                      children: <Widget>[
                                        Text('END DATE' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        )),
                                        SizedBox(width: 105.0),
                                        Text('19-07-2020' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        ))

                                      ])
                              )

                            ]




                      ),
                    ),
                  ),
                )


        ),
              Container(
                child:  Card(
                  color:  Colors.black,

                  child: Padding(
                    padding: const EdgeInsets.all(14.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,


                      children: <Widget>[
                        Text('Total Amount:',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
                        Text('254684'+'/-',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
                      ],
                    ),
                  ),
                  //
                ),

              )
    ]
        )
    );
  },
  separatorBuilder: (BuildContext context,
      int index) => const Divider(),
);

}

Answer 1

如果我对您的理解正确，则希望将图像放在带有边框的容器上方。您可以使用Stack。

将容器包装在其中，并将其放在子级列表的开头，这样它将显示在图像下方，以及其他所有内容。使用定位重新排列堆栈中的小部件。您可能需要将堆栈包装在Container中以更好地放置它。