Прокрутите карусель вверх при использовании GridView во Flutter - PullRequest
Новая
       17

Прокрутите карусель вверх при использовании GridView во Flutter

0 голосов
/ 13 июля 2020

Мое текущее дерево виджетов выглядит примерно так: 

return Container(
  child: SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        myCarouselWidget(),
        GridView.count(
          physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          padding: EdgeInsets.all(8),
          childAspectRatio: 3 / 4,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          children: myDummyProductList,
        ),
      ],
    ),
  ),
);

Теперь я хочу, чтобы при прокрутке карусель прокручивалась вверх, а gridView постепенно покрывал всю страницу.

Что я пробовал:

  1. физика: NeverScrollableScrollPhysics ()
  2. Удаление SingleChildScrollView и включение GridView в расширенный виджет сработали, но карусель не прокручивается вверх.

Заранее благодарим за помощь.

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Я нашел решение после некоторых экспериментов и исследований. Короче говоря, я использовал CustomScrollView и поместил карусель в SliverAppBar, которая скрывается при прокрутке вверх. Это мое дерево виджетов на данный момент: 

return Container(
  child: CustomScrollView(
    slivers: [
      SliverAppBar(
        floating: false,
        pinned: true,
        elevation: 4,
        backgroundColor: Theme.of(context).primaryColor,
        expandedHeight: carouselHeight,
        title: Text(
          "MyTitle",
        ),
        flexibleSpace: FlexibleSpaceBar(
          background: myCarousel
        ),
      ),
      SliverPadding(
        padding: EdgeInsets.all(14),
        sliver: SliverGrid.count(
          crossAxisCount: 2,
          childAspectRatio: 3 / 4,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          children: myDummyProductList,
        ),
      ),
    ],
  ),
);
1 голос
/ 13 июля 2020

Направление главной оси сетки - это направление, в котором она прокручивается. Наиболее часто используемые макеты сетки: GridView.count, который создает макет с фиксированным количеством листов по поперечной оси, и GridView.extent, который создает макет с листами, которые имеют максимальный размер по поперечной оси. Пользовательский SliverGridDelegate может создавать произвольное 2D-расположение дочерних элементов, включая невыровненные или перекрывающиеся расположения. 

CustomScrollView(
  primary: false,
  slivers: <Widget>[
    SliverPadding(
      padding: const EdgeInsets.all(20),
      sliver: SliverGrid.count(
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        crossAxisCount: 2,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("He'd have you all unravel at the"),
            color: Colors.green[100],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Heed not the rabble'),
            color: Colors.green[200],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Sound of screams but the'),
            color: Colors.green[300],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Who scream'),
            color: Colors.green[400],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Revolution is coming...'),
            color: Colors.green[500],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Revolution, they...'),
            color: Colors.green[600],
          ),
        ],
      ),
    ),
  ],
)

это представление приведенного выше кода

...