Flutter SliverAppBar и SliverList имеют разные прокрутки - PullRequest
Новая
       99

Flutter SliverAppBar и SliverList имеют разные прокрутки

0 голосов
/ 18 июня 2020 
[Initial Postion][1]
[Scrolling from SliverList side][2]
[Scrolling from SliverAppBar side][3]


class ProductScreen extends StatelessWidget {
  static const routeName = "/product-screen";

  @override
  Widget build(BuildContext context) {
    final _subCategory = Provider.of<SubCategoryProvider>(
      context,
      listen: false,
    );

    final _mediaQuery = MediaQuery.of(context);

    return Scaffold(
      body: SafeArea(
        bottom: true,
        top: true,
        left: true,
        right: true,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text("${_subCategory.currentSubCategoryName()}"),
                background: Container(
                  margin: const EdgeInsets.only(
                    top: 4,
                    bottom: 50.0,
                  ),
                  child: Image.asset(
                    'asset/images/grocery.jpeg',
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                 Column(
                    children: <Widget>[
                      Container(
                        height: _mediaQuery.size.height - kToolbarHeight,
                        color: Color.fromARGB(0xff, 0xff, 0xcd, 0x3c),
                        child: ListView.builder(
                          physics: BouncingScrollPhysics(),
                          itemCount: _subCategory.differentProductCount(),
                          itemBuilder: (ctx, pdIndex) {
                            return Column(
                              children: <Widget>[
                                Container(
                                  height: 30.0,
                                  margin:
                                      const EdgeInsets.symmetric(vertical: 5.0),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      width: 1.0,
                                      color: Colors.black,
                                    ),
                                    borderRadius: BorderRadius.circular(20.0),
                                  ),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(left: 8.0),
                                        child: Text(
                                          "${_subCategory.currentProductName(pdIndex)}",
                                          style: TextStyle(
                                            fontSize: 18.0,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                      Icon(Icons.arrow_drop_down, size: 30.0),
                                    ],
                                  ),
                                ),
                                Container(
                                    height: 270.0 *
                                        _subCategory
                                            .differentCompanyCount(pdIndex),
                                    child: ListView.builder(
                                      physics: ClampingScrollPhysics(),
                                      itemCount: _subCategory
                                          .differentCompanyCount(pdIndex),
                                      itemBuilder: (ctx, cyIndex) {
                                        return Column(
                                          children: <Widget>[
                                            Container(
                                                height: 250.0,
                                                margin: const EdgeInsets.only(
                                                    bottom: 20.0),
                                                color: cyIndex.isEven
                                                    ? Colors.green
                                                    : Colors.pink),
                                          ],
                                        );
                                      },
                                    )),
                              ],
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Sliver AppBar имеет свою другую прокрутку, а SliverList имеет свою собственную прокрутку.

Если я пытаюсь прокрутить с панели приложений ленты, то прокручиваются только обе полосы, но если я прокручиваю из списка ленты, прокручивается только список лент и Панель приложений splver имеет полную развернутую высоту.

Я пробовал использовать физику настроек, чтобы удалить внутреннюю прокрутку, но все же есть две разные прокрутки

1 Ответ

0 голосов
/ 18 июня 2020

Проблема в том, что вы создаете Listview.builder внутри SliverList, поэтому он выглядит как вложенная прокрутка, игнорирует столбец и ListView.builder и просто использует SliverChildBuilderDelegate для создания элементов по запросу 

SliverList(
   delegate: SliverChildBuilderDelegate(
    (BuildContext context, int pdIndex) {
      return Column(
        children: [
          //... The children inside the column of ListView.builder
        ]
      );
    }
    childCount: _subCategory.differentProductCount(),
  ),
),

И для цвета физики Контейнера и Отскока вы можете добавить их к физике Scaffold backgroundColor и CustomScrollView соответственно. 

return Scaffold(
  backgroundColor: Color.fromARGB(0xff, 0xff, 0xcd, 0x3c),
  body: SafeArea( //bottom, top, left and right are true by default so no need to add them
    child: CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        ...
      ]
    )
  )
);
...