Flutter：将Widget列表放入容器并仅显示可容纳元素

要实现仅显示容器能容纳的元素、不触发滚动的效果，你需要调整GridView的核心属性，并确保父容器有明确的尺寸约束：

• 禁用滚动行为：给GridView添加physics: const NeverScrollableScrollPhysics()，这样内容超出容器时不会出现滚动条，直接截断超出部分。
• 约束容器高度：shrinkWrap: true会让GridView根据子元素大小收缩，但必须给它的父容器设置固定高度或动态获取可用空间，否则它仍会尝试展示所有元素。

修改后的完整代码如下：

return Padding(
  padding: const EdgeInsets.only(left: 5.0, right: 5.0),
  // 用固定高度容器约束GridView的最大高度，可根据布局需求调整数值
  child: Container(
    height: 450,
    child: GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(), // 禁用滚动
      itemCount: allPokes.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
      itemBuilder: (context, index) {
        return Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  allPokes[index].name.toString(),
                  style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 24,
                      color: Colors.white),
                ),
                const SizedBox(height: 10),
                Row(
                  children: List.generate(
                      (allPokes[index].type!.length), (i) {
                    List<Type?> allTypes = allPokes[index].type!;
                    return typeContainer(allTypes[i].toString());
                  }),
                ),
              ],
            ),
          ),
        );
      },
    ),
  ),
);

灵活适配容器高度的方案 #

如果不想写死高度，可通过LayoutBuilder动态获取父容器的可用空间：

child: LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      height: constraints.maxHeight,
      child: GridView.builder(
        // 其他属性保持不变
      ),
    );
  },
)

内容的提问来源于stack exchange，提问作者werner