ListView - 卡片（颤动布局）

Posted 2023-02-23

【中文标题】ListView - 卡片（颤动布局）

【英文标题】：ListView - Card (Flutter Layout)

【发布时间】：2021-12-06 00:55:22

【问题描述】：

颤抖！

我需要在 Flutter 中重新创建此布局，以便在 ListView 中显示为项目。 两种布局（Emma 和 Tonny）都是相同的。唯一的区别是颜色取决于其他一些数据/状态，稍后我将以编程方式决定。

我已经有 ListView.builder 如下：

ListView.builder(
    itemCount: WeeklyList.contacts.length,
    itemBuilder: (BuildContext context, int index)     
    return InkWell(
      onTap: () => onTapMe(WeeklyList.contacts[index]),
      child: TripItemCard(index, WeeklyList.contacts[index]));
)

还有....主要失踪的人：

Widget TripItemCard(int index, Info info)       
    return SizedBox(
            height: 116,
            child: Card(
        
            //.... Card Layout.....
        
            )
);

注意：我用 SizedBox 包装了卡片，以便能够为所有卡片指定高度。

总共有 8 个小部件：

    1- The Card
    2- Picture
    3- Fullname
    4- Role
    5- PickUp Label
    6- PickUp Time
    7- DropOff Label
    8- DropOff Time

最后也是非常重要的事情

1- Please be advised that there are 2 TEXTs (Name and DropOff Status) who have BACKGROUND and TEXT color... and both of them... fully expanded (width). This is very important to maintain the horizontal color balance.

2- Also PickUp and DropOff are aligned to the right where the PickUp and DropOff Time/Status respectively are aligned to the left.

请.Help();

谢谢.dart

【参考方案1】：

基本布局应如下所示，您可以在其中添加细节。

Row(children: [
            Image.asset(name),
            Column(
              children: [
                Container(
                  color: const color,
                  child: const Text(data),
                ),
                Text(data),
                Text(data),
                Text(data),
                ],
            ),],),