如何使容器宽度与其内容动态同步？颤动

Question

所以我想实现这一目标

​

我试过用卷纸，但它不是这样的。有人知道怎么把它弄成这样吗？

代码

Wrap(
              children: [
                GridView(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 100,
                    mainAxisSpacing: 10,
                    mainAxisExtent: 40,
                    crossAxisSpacing: 8,
                  ),
                  children: [
                    ReviewWidget('Tempat tidak sesuai dengan foto'),
                    ReviewWidget('Tempat tidak ditemukan'),
                    ReviewWidget('Tailor tidak dapat ditemui'),
                    ReviewWidget('tidak sesuai dengan foto'),
                    ReviewWidget('tailor jele'),
                  ],
                ),
              ],
            ),

结果：

​

​

Answer 1

GridView强制它的子程序在默认的纵横比上，所以它的子程序在屏幕上占据相同的空间。

基于我所理解的，您希望小部件根据其内容占用空间，因此这里不需要gridView，只需使用Wrap并将您的子部件包装在其中：

Wrap(
          children: [
                ReviewWidget('Tempat tidak sesuai dengan foto'),
                ReviewWidget('Tempat tidak ditemukan'),
                ReviewWidget('Tailor tidak dapat ditemui'),
                ReviewWidget('tidak sesuai dengan foto'),
                ReviewWidget('tailor jele'),
          ],
        ),

并确保ReviewWidget不受硬编码宽度和高度的限制，因此它将接受内容小部件的大小

如果需要，还可以向该小部件添加填充，Ex：

Padding(padding: const EdgeInsets.all(10), child: ReviewWidget())

希望这能有所帮助