1
[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 の高さが完全に拡張されます。

内部スクロールを削除するために物理演算を設定しようとしましたが、それでも2つの異なるスクロールがあります

4

1 に答える 1