Блог

У меня есть ListView.builder внутри карточки, которая является частью столбца, и мне нужно, чтобы его высота была динамической. В настоящее время единственное решение, которое я могу получить для фактического отображения чего-либо, — это поместить ListView внутри контейнера с указанной высотой. Если я оберну конструктор во что-нибудь другое, например, в расширенное, виджет не отображается на экране. Вот мой текущий код;

 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 всегда прикрепляется к нижней части списка, вместо того, чтобы явно указывать размер контейнера для хранения списка.

ListView по умолчанию пытается заполнить все доступное пространство. Похоже, что ограничение высоты, которое он получает, не ограничено (бесконечно), что вызывает проблему. Чтобы не ListView занимать слишком много места, добавьте свойство в ListView called shrinkWrap и установите для него значение true . Это делает его таким большим, ListView как его содержимое (дочерние элементы).

Для более подробного объяснения и руководства по ограничениям посетите эти ссылки:

• https://flutter.dev/docs/development/ui/layout/box-constraints
• https://flutter.dev/docs/development/ui/layout/constraints