Question

我在卡片中有一个 ListView.builder，它是一个列的一部分，我需要它的高度是动态的。目前，我可以实际显示任何内容的唯一解决方案是将 ListView 放置在具有指定高度的容器内。如果我将构建器包装在其他任何东西中，例如 Expanded，小部件不会在屏幕上呈现。这是我当前的代码；

Card(
          elevation: 6,
          color: Colors.white,
          child: Container(
            width: double.infinity,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 16, left: 20),
                  child: Column(
                    children: [
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                            '${viewModel.property.propC}',
                            style: GoogleFonts.lato(
                                color: Colors.black, fontSize: 20)),
                      ),
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                            '${dateFormat.format(viewModel.property.propB)}',
                            style: GoogleFonts.lato(
                                color: Colors.black, fontSize: 20)),
                      ),
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                            '${timeFormat.format(viewModel.property.propA)}',
                            style: GoogleFonts.lato(
                                color: Colors.black, fontSize: 20)),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                      height: 200, child: buildList(context)),
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            primary: HexColor("#52cfd2"), elevation: 5),
                        onPressed: () {
                          return null;
                        },
                        child: Text('Press Me',
                            style: GoogleFonts.lato(
                                color: Colors.white, fontSize: 20))),
                  ),
                )
              ],
            ),
          ),
        )

列表小部件；

  Widget buildCustomerCarList(context) {
return ListView.builder(
  padding: const EdgeInsets.only(left: 10, right: 10),
  itemCount: viewModel.property.propertyD.length,
  itemBuilder: (BuildContext context, int index) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text('First name: ',
                  style: GoogleFonts.lato(
                      fontSize: 18, fontWeight: FontWeight.bold)),
              Text(
                  viewModel
                      .propA.property[index].firstname,
                  style: GoogleFonts.lato(fontSize: 18))
            ],
          ),
          Row(
            children: <Widget>[
              Text('Last name: ',
                  style: GoogleFonts.lato(
                      fontSize: 18, fontWeight: FontWeight.bold)),
              Text(
                  viewModel
                      .propA.property[index].lastname
                      .toString(),
                  style: GoogleFonts.lato(fontSize: 18))
            ],
          )
        ],
      ),
    );
  },
);

}

所需的最终结果是让列表自动占用它所需的空间，因此 ElevatedButton 始终固定在列表的底部，而不需要明确指定用于容纳列表的 Container 的大小。

Answer 1

ListView 默认尝试填充所有可用空间。看起来它收到的高度约束是无限的（无限的），这会导致问题。为防止 ListView 占用过多空间，请向 ListView 添加一个名为 shrinkWrap 的属性并将其设置为 true。这使得 ListView 变得和它的内容一样大（子级）。

有关限制的更深入解释和指南，请访问以下链接：

ListView.Builder 只显示在容器内

1 个答案: