Flutter Как вертикальная прокрутка экрана с помощью ListView по горизонтали и GridView - PullRequest
Новая
       23

Flutter Как вертикальная прокрутка экрана с помощью ListView по горизонтали и GridView

3 голосов
/ 25 марта 2019

У меня есть макет, как прикрепленное изображение.Я хочу иметь на том же экране и в горизонтальном виде ListView с популярными / последними элементами и ниже GridView с полным списком элементов.

ListView должен иметь горизонтальную прокрутку, но также, весь экран может вертикальной прокрутки,Темная полоса справа имитирует полосу прокрутки (не обязательно, только для иллюстрации).

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

Я пробовал использовать виджеты Stack и Column, но ничего не работает.Любая идея, как структурировать этот макет?

enter image description here

1 Ответ

3 голосов
/ 25 марта 2019

Вы можете использовать Slivers, попробуйте этот пример, который я сделал: 

    @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: new AppBar(),
            body: CustomScrollView(
              slivers: [
                SliverToBoxAdapter(
                  child: SizedBox(
                    height: 100,
                    child: ListView.builder(
                        itemExtent: 150,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) => Container(
                              margin: EdgeInsets.all(5.0),
                              color: Colors.orangeAccent,
                            ),
                        itemCount: 20),
                  ),
                ),
                SliverGrid(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    childAspectRatio: 1.5,
                  ),
                  delegate: SliverChildBuilderDelegate(
                    (context, index) => Container(
                          margin: EdgeInsets.all(5.0),
                          color: Colors.yellow,
                        ),
                  ),
                )
              ],
            ));
      }

Также вы можете узнать больше о Слайвере по этой ссылке: https://medium.com/flutter-io/slivers-demystified-6ff68ab0296f

...