颤振降低容器的高度

Question

我将一些 json 数据传递给另一个显示为卡片的小部件。问题是容器会自动占用很大的高度。

这是页面当前的样子。我提供的黑色边框是所需的高度。

这就是我传递数据的方式：

      GridView.count(
        crossAxisCount: 1,
        physics: const ClampingScrollPhysics(),
        shrinkWrap: true,
        children: List.generate(
          widget.recipe!.recipeSteps!.length,
          (index) {
            return Container(
              constraints: BoxConstraints.tightForFinite(height: 10),
              child: StepsCard(
                recipeStep: widget.recipe!.recipeSteps![index].name,
              ),
            );
          },
        ),
      ),

这是StepsCard()的代码：

class StepsCard extends StatelessWidget {
  final String? recipeStep;

  StepsCard({required this.recipeStep});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 5, bottom: 5),
      child: Container(
          height: 20,
          decoration: BoxDecoration(
            // color: Color(0xfff8f8fa),
            color: Colors.red,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text("image"),
              Text(this.recipeStep!),
            ],
          )),
    );
  }
}

如何创建我标记为黑色的大小的容器？

更新 1：我尝试为两个容器提供高度（高度：10），但这在任何级别都不起作用

更新 2：

这是我根据@7mada 给出的建议尝试过的代码

      Container(
        height: 100,
        child: ListView.builder(
          itemCount: widget.recipe!.recipeSteps!.length,
          itemBuilder: (BuildContext context, int index) {
            return StepsCard(
                recipeStep: widget.recipe!.recipeSteps![index].name);
          },
        ),
      ),

它给了我一个高度为 100 的容器，并使里面的内容可滚动，这是有问题的，因为 StepsCard() 位于列的底部，我不想要高度限制。

更新 3：

  Widget _buildItems(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 40,
          ),
          appBar(context),
          SizedBox(
            height: 20,
          ),
          VideoCard(
            url: widget.recipe!.recipeVideoLink,
          ),
          RecipeIntroCard(
            recipeName: widget.recipe!.recipeName,
            category: widget.recipe!.category,
            time: widget.recipe!.time,
            recipeAuthor: widget.recipe!.recipeAuthor,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                "Ingredients",
                style: TextStyle(
                  color: Color(0xff18172b),
                  fontSize: 25,
                  fontFamily: "Poppins",
                  fontWeight: FontWeight.w400,
                ),
              ),
            ],
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            height: 80.0,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.recipe!.ingredients!.length,
              itemBuilder: (BuildContext context, int index) {
                return IngredientCard(
                  name: widget.recipe!.ingredients![index].name,
                  amount: widget.recipe!.ingredients![index].amount,
                );
              },
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "Steps",
                  style: TextStyle(
                    color: Color(0xff18172b),
                    fontSize: 25,
                    fontFamily: "Poppins",
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: widget.recipe!.recipeSteps!.length,
              itemBuilder: (BuildContext context, int index) {
                return StepsCard(
                    recipeStep: widget.recipe!.recipeSteps![index].name);
              },
            ),
          ),
        ],
      ),
    );
  }

Answer 1

您尚未将高度传递给外部容器。你可以这样做

  GridView.count(
    crossAxisCount: 1,
    physics: const ClampingScrollPhysics(),
    shrinkWrap: true,
    children: List.generate(
      widget.recipe!.recipeSteps!.length,
      (index) {
        return Container(
          height: 30.0,
          constraints: BoxConstraints.tightForFinite(height: 10),
          child: StepsCard(
            recipeStep: widget.recipe!.recipeSteps![index].name,
          ),
        );
      },
    ),
  ),

Answer 2

更改GridView 中的childAspectRatio 值以获得所需的高度，但是我建议您使用ListView.builder 或GridView.builder 这样您就可以拥有itemExtent，让您在拥有更好的性能。