颤振设计列表项

Question

我想设计如下图所示的内容：

主要小部件是Card，技能的小部件是Chip。技能长度可以在3字到12字之间，所以可以显示的chips个数是可变的。这是我的模型：

class NurseListItem {
  late String imageUrl;
  late String nurseName;
  late String userType;
  late List<String> skills;
  late bool isBusy;
}

如何创建这个 listItem 小部件？

Answer 1

尝试下面的代码我已经尝试了上面的图片，比如 Widget 希望对你有帮助。

Card(
     shape: RoundedRectangleBorder(
     side: BorderSide(
            color: Colors.green.shade300,
           ),
          borderRadius: BorderRadius.circular(15.0),
         ),
         child: Column(
                children: [
                   ListTile(
                     leading: Icon(Icons.check),
                     title: Text('User Name'),
                     subtitle: Text('User Type'),
                     trailing: FlutterLogo(size: 100),
                   ),
                   ButtonBar(
                     alignment: MainAxisAlignment.spaceEvenly,
                     children: [
                       Container(
                         padding: const EdgeInsets.all(5.0),
                         decoration: BoxDecoration(
                          border: Border.all(color: Colors.green),
                          borderRadius: BorderRadius.circular(5),
                        ),
                        child: Text('Skill 0'),
                       ),
                       Container(
                         padding: const EdgeInsets.all(5.0),
                         decoration: BoxDecoration(
                          border: Border.all(color: Colors.green),
                          borderRadius: BorderRadius.circular(5),
                        ),
                        child: Text('Skill 1'),
                       ),
                       Container(
                          padding: const EdgeInsets.all(5.0),
                          decoration: BoxDecoration(
                          border: Border.all(color: Colors.green),
                          borderRadius: BorderRadius.circular(5),
                        ),
                        child: Text('Skill 2'),
                       ),
                       Container(
                         padding: const EdgeInsets.all(5.0),
                          decoration: BoxDecoration(
                          border: Border.all(color: Colors.green),
                          borderRadius: BorderRadius.circular(5),
                        ),
                        child: Text('Skill 3'),
                       ),
                      ],
                     )
                    ],
                  ),
                 )

你的屏幕看起来像这样 ->