Дополнительное «Пространство» В представлении списка и Трепетание Карты

#flutter #listview

Вопрос:

У меня есть это «дополнительное пространство» в моем первом элементе listview, который представляет собой карту, помещенную в контейнер. Как мне его удалить?

введите описание изображения здесь

  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(15.0),
        height: 300,
        child: Column(children: [
          Row(children: [
            Expanded(
                child: Text("Lowest Fuel Price",
                    style: TextStyle(
                        fontWeight: FontWeight.w500,
                        color: Theme.orange3,
                        fontSize: 16.0)))
          ]),
          Container(
            height: 250,
            child: Card(
                elevation: 3,
                child: ListView.builder(
                    itemCount: cheapest.length,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      final item = cheapest[index];
                      return Column(
                        children: <Widget>[
                          Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Text(
                                  item.petrolType,
                                  style: TextStyle(
                                      color: Theme.gray1, fontSize: 18),
                                ),
                                Text(
                                  "$"   item.petrolPrice,
                                  style: TextStyle(
                                      color: Theme.gray1, fontSize: 25),
                                ),
                                Image(
                                    fit: BoxFit.fill,
                                    image: new AssetImage(
                                        'assets/images/fuel_station/'  
                                            item.petrolStation.toLowerCase()  
                                            '.png')),
                              ]),
                          index != cheapest.length - 1
                              ? Divider(
                                  color: Colors.grey,
                                )
                              : Divider(color: Colors.white)
                        ],
                      );
                    })),
          )
        ]));
  }
 

Ответ №1:

https://api.flutter.dev/flutter/widgets/ListView-class.html

По умолчанию ListView автоматически заполнит прокручиваемые края списка, чтобы избежать частичных препятствий, обозначенных заполнением MediaQuery. Чтобы избежать такого поведения, переопределите свойство с нулевым заполнением.

         Card(
          elevation: 3,
          child: MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: ListView.builder(),
          ),
        ),
 

Комментарии:

1. выглядит странно, когда я снимаю верх. у последнего элемента теперь есть заполнение, хотя «removeBottom: true»

2. Попробуйте сделать высоту вашего контейнера динамичной. У вас есть 2 контейнера, высота которых равна 300 и 250, я подозреваю, что проблема в 300. Попробуйте использовать BoxConstraints.tightForFinite() в поле ограничения контейнера.

3. Мне пришлось придать ему некоторую верхнюю обивку после removeTop = true, чтобы придать ему более однородный вид, и добавить tightForFinite устраняет проблему двойной высоты

4. Нет проблем, если этот ответ решит ваш вопрос, пожалуйста, примите его.