如何在颤动中创建这样的自定义 ListView 项目？

Posted 2023-02-23

【中文标题】如何在颤动中创建这样的自定义 ListView 项目？

【英文标题】：How to create custom ListView Item like this in flutter?

【发布时间】：2020-01-05 00:25:20

【问题描述】：

我想像这样创建列表项：

但我只能像这样创建 listItem：

使用这样的代码：

class incomingLotsItem extends StatelessWidget

IncomingLots 传入LotsItem(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);

@覆盖 小部件构建（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;

请告诉我我哪里错了？

【参考方案1】：

我会做这样的事情，而不是一列有 5 行：

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

希望对你有所帮助，如果不够清楚，请告诉我！

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

【讨论】：

我试过这个，它不能解决我们的问题。如果这样做，第二列会被拉伸到第一列的高度，因为第一列的高度更高，这不会创建我们所需的 UI。我们需要完美对齐列/行中的每个文本。如果您有任何可以解决此问题的解决方案，请告诉我们。

我尝试了您的解决方案，它进行了一些修改，我们必须使用 CrossAxisAlignment.start 才能实际工作，默认情况下会将列的高度拉伸到最大值。

很高兴它最终工作了，我建议您编辑我的答案以包含您的修复以帮助他人。