Флаттер: добавить элемент под GridView

Question

Мне нужно добавить элемент под GridView во флаттере.Он должен быть виден только после того, как человек полностью прокрутит сетку вниз.

Элемент должен быть во всю ширину, поэтому вопрос о его последнем элементе в виде сетки исключен.

Как я могу это сделать?

Answer 1

Вам понадобится Щепка , чтобы достичь этого.Идея здесь состоит в том, чтобы иметь много списков и прокручивать каждый из них полностью, прежде чем начинать прокручивать второй.

Для использования слипы вам нужно CustomScrollView, у которого есть свойство под названием slivers, которое на практике, работает почти так же, как children для нескольких дочерних виджетов.

Существует множество гибких виджетов, чтобы вы могли выбрать, какой из них соответствует вашим потребностям.Если вам нужна Сетка, вы должны использовать SliverGrid.Вы можете передать дочерние элементы Grid через свойство delegate.

Насколько мне известно, нет скользящего виджета, который ограничивал бы вас только одним дочерним элементом - все они являются множественными дочерними виджетами - поэтому последнийупомянутый вами виджет должен быть внутри Списка (или чего бы вы ни предпочли).

Похоже, вам нужно что-то вроде этого:

Container(
  child: CustomScrollView(
    slivers: [
      // This one is scrolled first
      SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        delegate: SliverChildListDelegate([
          // Place your children here
        ]),
      ),
      // Then this one becomes visible and start scrolling as well
      SliverList(
        delegate: SliverChildListDelegate([
          // Place that last widget here
        ]),
      ),
    ],
  ),
);

Answer 2

Сначала создайте столбец, добавьте свой Grid Code в поле First Children, а затем используйте Expanded (), чтобы отобразить ваш последний элемент.

См. Код ниже.

Container(
  child: Column(
    children: <Widget>[
      //your grid code
      // grid code
      Expanded(
        child: Container(
          child:Column(
            //your last item.
          )
        ),
      ),
    ],
  )
)