[英]How to create custom ListView Item like this in flutter?
I want to create listitem like this:我想像这样创建列表项:
But I can only create listItem like this:但我只能像这样创建 listItem:
With code like this:用这样的代码:
class incomingLotsItem extends StatelessWidget{
IncomingLots incomingLots; IncomingLots incomingLotsItem(DocumentSnapshot snapShot) {
传入LotsItem(文档快照快照){
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 Widget build(BuildContext context) { @override 小部件构建(BuildContext 上下文){
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;
} } } }
Kindly tell me where am I wrong?请告诉我我错在哪里?
Instead of one column with 5 rows, I would do something like that:我会做这样的事情,而不是一列有 5 行:
create one row and within it two columns, one for each side.创建一行并在其中创建两列,每边一列。 then, you can add rows to each columns (5 for the right and 3 for the left).
然后,您可以向每列添加行(右侧 5 行,左侧 3 行)。
I hope I helped you, if it's not clear enough, let me know!希望对您有所帮助,如果还不够清楚,请告诉我!
We need to use CrossAxisAlignment.start to create widget this way.我们需要使用 CrossAxisAlignment.start 以这种方式创建小部件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.