如何在flutter中创建具有动态宽度的网格视图

Question

嗨，我想使用以下参数在 flutter 中创建一个网格视图： 每行 1 - 3 项 2 - 固定开始和结束位置 3 - 每个项目的宽度必须根据项目内容设置 长话短说我想创建这个：

我尝试了这个包但它根据每个项目的内容设置了高度我阅读了文档但我什么也没找到。

我尝试使用以下代码创建网格视图：

StaggeredGrid.count(
                crossAxisCount: 3,
                crossAxisSpacing: 2 * Responsive().widthConfig,
                mainAxisSpacing: 2 * Responsive().heightConfig,
                children: List.generate(
                  categories.length,
                  (index) => CategoryCard(text: categories[index]),
                ),
              ),

和类别卡：

class CategoryCard extends StatefulWidget {
  final String text;
  const CategoryCard({super.key, required this.text});

  @override
  State<CategoryCard> createState() => _CategoryCardState();
}

class _CategoryCardState extends State<CategoryCard> {
  bool isSelected = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isSelected = !isSelected;
        });
      },
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: Responsive().heightConfig,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(
            2 * Responsive().imageConfig,
          ),
          color: isSelected ? AppTheme.primaryColor : Colors.white,
          border: Border.all(
            color: isSelected ? AppTheme.primaryColor : Colors.grey,
          ),
        ),
        child: Center(
          child: Text(
            widget.text,
            style: isSelected
                ? AppTheme.whiteText.labelSmall
                : AppTheme.blackText.labelSmall,
          ),
        ),
      ),
    );
  }
}

我该怎么办？

Answer 1

尝试使用

Wrap

Widget，它将按照您在图像上想要的方式进行操作

例如

Wrap(
  // also try to add/use runspacing and spacing for each widget/item
  // Also try to use wrap alignment where to start center/start/end
  children:[
    anywidgetWithdifferentWidth(),
    anywidgetWithdifferentWidth(),
    anywidgetWithdifferentWidth(),
  ]
),