GridView Flutter中项目上的徽章

inkz8wg9  于 2023-03-04  发布在  Flutter
关注(0)|答案(1)|浏览(120)

我在Flutter中有一个GridView,我必须在它上面放一个徽章。我必须实现这样的东西。

我如何在我的代码中添加这个标记,并确保它在不同的大小上都能完美地工作。

qyzbxkaa

qyzbxkaa1#

在Gridview Builder内部的Stack的帮助下,这很容易做到,如下所示

return Stack(
      children: [
        // The content of the item goes here
        Container(
          decoration: BoxDecoration(
            border: Border.all(),
          ),
          child: Center(
            child: Text('Item $index'),
          ),
        ),
        // The badge goes here
        Positioned(
          top: 0,
          right: 0,
          child: Container(
            padding: EdgeInsets.all(2),
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text(
              'Badge',
              style: TextStyle(
                color: Colors.white,
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );

相关问题