Flutter - 小部件在 NestedScrollView 中不滚动

Question

我正在尝试制作一个包含SliverAppBar、一些带有文本的小部件和一个List 的页面。

我使用了一个包含 Sliver 标头的 NestedScrollView 和一个 Column，它本身包含带有文本和列表的小部件。

这里是build 函数：

@override Widget build(BuildContext context) {

var _bar = widget.bar ;

_screenWidth = MediaQuery.of(context).size.width ;

return Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          expandedHeight: 200.0,
          floating: false,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(_bar.name,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.0,
                  )),
              background: Image.network(
                "https://s1.qwant.com/thumbr/0x380/1/2/2a39f1f558f2cbbec11a08e43493bde861d612add6be643dbc5ad6fe0b16fc/BDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg?u=https%3A%2F%2Fimages.bwwstatic.com%2Fcolumnpic6%2FBDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg&q=0&b=1&p=0&a=1",
                fit: BoxFit.cover,
              )),
        ),
      ];
    },
    body: _offer(_bar),
  ),
);
}

_offer 函数是主要问题，这里是：

Widget _offer(Bar bar) {
return Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Container(
          width: _screenWidth / 4,
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: Image.network("https://s1.qwant.com/thumbr/0x380/3/9/60c4de7be57ee1b7d24d07dde941c3027588bc313699cba9ef9ef8fb6c7fda/1280px-Hard_Rock_Cafe_Logo.svg.png?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F2%2F2c%2FHard_Rock_Cafe_Logo.svg%2F1280px-Hard_Rock_Cafe_Logo.svg.png&q=0&b=1&p=0&a=1").image
              )
          ),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              bar.name.toUpperCase(),
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text(
              "Bar category" + " - " + "Bar address",
              style: TextStyle(
                  fontWeight: FontWeight.bold
              ),
            ),
            Text(
              "Opening hours" + " - " + "01.12.12.12.12",
              style: TextStyle(
                  fontWeight: FontWeight.bold
              ),
            ),
            Text(
              "Happy Hour de 20h a 23h",
              style: TextStyle(
                color: Colors.deepOrange,
                fontWeight: FontWeight.bold,
              ),
            )
          ],
        ),
      ],
    ),
    Image.asset("assets/favorites.png"),
    Padding(padding: EdgeInsets.all(20),),
    Center(
      child: Text(
        "Menu".toUpperCase(),
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 25
        ),
      ),
    ),
    Padding(padding: EdgeInsets.all(20)),
    Flexible(
      fit: FlexFit.loose,
      child: CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
                return productItem(context, _productsList[index]);
              },
              childCount: _productsList.length,
            ),
          ),
        ],
      ),
    )
  ],
);
}

结果如下：

gif链接：https://ibb.co/x8j6vvm

（如果有人知道如何在问题中集成 gif，请随时编辑它！）

我希望从第二个“TestName1”到心脏图像的数据与页面的其余部分一起完全滚动。我怎样才能做到这一点？

Answer 1

使用CustomScrollView 消除了添加NestedScrollView 的问题。您可以将SilverAppBar 添加到CustomScrollView 以实现此功能。

CustomScrollView(
 slivers: <Widget>[
  SliverAppBar(
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text(_bar.name,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.0,
              )),
          background: Image.network(
            "https://s1.qwant.com/thumbr/0x380/1/2/2a39f1f558f2cbbec11a08e43493bde861d612add6be643dbc5ad6fe0b16fc/BDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg?u=https%3A%2F%2Fimages.bwwstatic.com%2Fcolumnpic6%2FBDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg&q=0&b=1&p=0&a=1",
            fit: BoxFit.cover,
          )),
    ),
  SliverFixedExtentList(
    itemExtent: 150.0,
    delegate: SliverChildListDelegate(
      [
       // Your Can Add you body items here.
      ],
    ),
   ),
 ],
),

希望这会有所帮助。