Flutter SliverAppBar 和 SliverList 有不同的滚动条

Posted 2023-02-23

【中文标题】Flutter SliverAppBar 和 SliverList 有不同的滚动条

【英文标题】：Flutter SliverAppBar and SliverList have different scrolls

【发布时间】：2020-10-07 21:59:34

【问题描述】：

[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 有自己的滚动条。

如果我尝试从 sliver appbar 滚动，那么只有两个滚动，但如果我从 sliver 列表滚动，则只有 sliver 列表滚动，并且 sliver appbar 具有其完全展开高度。

我曾尝试设置物理来移除内部滚动，但仍然有两种不同的滚动

【参考方案1】：

问题是你在 SliverList 中创建 Listview.builder，所以它看起来像一个嵌套滚动，忽略列和 ListView.builder，只需使用 SliverChildBuilderDelegate 按需创建项目

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

对于 Container 和 Bouncing 物理的颜色，您可以分别将它们添加到 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: [
        ...
      ]
    )
  )
);

【讨论】：

如果我在 CustomScrollView 条子内的 TabBarView 中有一个列表视图，我该如何实现？

您的意思是类似于 NestedScrollView 的第一个示例？ api.flutter.dev/flutter/widgets/NestedScrollView-class.html

lmao 是的，类似的东西，不敢相信我检查过其他地方，除了那里哈哈。谢谢