卡片的颤振设计

Question

如何制作如下图所示的卡片列表视图？

Answer 1

您可以使用 Chips 和 Wrap 两个小部件来实现上述效果

首先列出您的 Strings 或您也可以使用任何动态数据列表。

List<String> itemList = ['Guitar', 'Music', 'Fishing'];

现在添加这行 code 以显示您的 Chips 包裹在 Wrap widget

          Wrap(
              spacing: 8.0,
              children: List<Widget>.generate(
                  itemList.length, // place the length of the array here
                  (int i) {
                return Chip(
                  onDeleted: () {
                    
                  },
                  deleteIconColor: Colors.white,
                  label: Padding(
                    padding: EdgeInsets.all(4.0),
                    child: Text("${itemList[i]}",
                        style: TextStyle(
                            color: Color(0xffffffff),
                            fontWeight: FontWeight.w400,
                            fontStyle: FontStyle.normal,
                            fontSize: 12.0),
                        textAlign: TextAlign.left),
                  ),
                );
              }).toList(),
            );

Answer 2

您可以使用芯片小部件。使用起来很简单。 这是一个例子：

Wrap(
  children: [
    Chip(
      label: Text('Dancing'),
    ),
    Chip(
      label: Text('Outdoors'),
    ),
    Chip(
      label: Text('Writer'),
    ),
  ]
)