颤动:禁用sliverAppBar填充动画

Question

我想附加自定义菜单栏(全宽)到sliverAppBar小工具，以便它将坚持底部的sliverAppBar背景，并将始终可见。

为了解决这个问题，我在FlexibleSpaceBar.title参数中加入了Row小部件，但是现在我遇到了一个意想不到的问题。

当我将FlexibleSpaceBar.title参数中的任何内容包装到Row小部件中时，它就会开始对溢出的填充进行动画处理。此外，它还将Row小部件扩展到屏幕边界之外。这是意想不到的行为。

我不想在SliverList滚动上缩小标题填充或调整标题大小。

​

​

SliverAppBar(
  expandedHeight: 200.0,
  floating: false,
  pinned: true,
  elevation: 0.0,
  flexibleSpace: SafeArea(child: // <-- SafeArea doesn't work for FlexibleSpaceBar.title in this case
    FlexibleSpaceBar(
      background: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(
            'assets/images/store.png',
            fit: BoxFit.cover,
            width: 120,
            height: 120,
          ),
        ],
      ),
      collapseMode: CollapseMode.none,
      titlePadding: EdgeInsetsDirectional.only(start: 100, bottom: 0), // <-- have to add 100 to padding to keep in safe area on the screen
      title: Row( // <-- animation enables by default if wrapped in a Row widget
        children: [
          Icon(Icons.menu, size: 40, color: Colors.white,),
        ]
      )
    )
  )
),

如何在FlexibleSpaceBar标题的sliverAppBar中禁用此收缩、大小和动画？

Answer 1

我刚刚通过添加另一个sliverAppBar而不是使用FlexibleSpaceBar.title来解决这个问题。

SliverAppBar( // <-- just hiding logo
  expandedHeight: 200.0,
  floating: false,
  pinned: true,
  elevation: 0.0,
  flexibleSpace: SafeArea(child:
    FlexibleSpaceBar(
      background: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(
            'assets/images/store.png',
            fit: BoxFit.cover,
            width: 120,
            height: 120,
          ),
        ],
      ),
    )
  )
),
SliverAppBar( // <-- custom sticky menu bar
  floating: false,
  pinned: true,
  elevation: 0.0,
  flexibleSpace: SafeArea(child:
    FlexibleSpaceBar(
      ...
    )
  )
),