如何在Flutter中创建自定义ListView Item？

Question

我要创建这样的列表项：

但是我只能这样创建listItem：

使用如下代码：

class incomingLotsItem extends StatelessWidget{

IncomingLots传入Lots；   entryLotsItem（DocumentSnapshot snapShot）{

String acceptanceDate = snapShot.data['acceptanceDate'];
String lotNumber = snapShot.data['lotNumber'];
String ddtDate = snapShot.data['ddtDate'];
String foodName = snapShot.data['foodName'];
String dueDtae = snapShot.data['dueDtae'];
String ddtNumber = snapShot.data['ddtNumber'];
String origin = snapShot.data['origin'];
String quantity = snapShot.data['quantity'] + snapShot.data['um'];

incomingLots = IncomingLots(acceptanceDate,lotNumber,ddtDate,foodName,dueDtae,ddtNumber,origin,quantity);

}

@override   小部件build（BuildContext context）{

Widget row1 = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Date acceptance: "+incomingLots.dateAcceptance.split(" ")[0].replaceAll("-", "/"),style: TextStyle(fontSize: 12, color: Colors.black), textAlign: TextAlign.left,)),
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Nr. DDT: "+incomingLots.ddtNumber,style: TextStyle(fontSize: 12, color: Colors.black),),),
  ],
);
Widget row2 = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Lot number: "+incomingLots.lotNumber,style: TextStyle(fontSize: 12, color: Colors.black)),),
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Origin: "+incomingLots.origin,style: TextStyle(fontSize: 12, color: Colors.black),),),
  ],
);
Widget row3 = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0), child: Text("Date DDT: "+incomingLots.ddtDate.split(" ")[0].replaceAll("-", "/"),style: TextStyle(fontSize: 12, color: Colors.black))),
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Qty: "+incomingLots.quantity,style: TextStyle(fontSize: 12, color: Colors.black),),),
  ],
);

Widget row4 = Row(
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Food name: "+incomingLots.foodName,style: TextStyle(fontSize: 12, color: Colors.black)),),
  ],
);
Widget row5 = Row(
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Due date: "+incomingLots.dueDate.split(" ")[0].replaceAll("-", "/"),style: TextStyle(fontSize: 12, color: Colors.black,),))
  ],
);

Widget column = Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    row1,row2,row3,row4,row5
  ],
);

return column;

} }

请告诉我我在哪里错了？

Answer 1

我将执行以下操作，而不是使用5行的一列：

创建一行，并在其中创建两列，每侧一行。 然后，您可以在每列中添加行（右侧为5，左侧为3）。

希望我能帮助您，如果还不够清楚，请告诉我！

我们需要使用CrossAxisAlignment.start通过这种方式创建小部件。