Flutter:禁用sliverAppBar填充动画

问题描述 投票:0回答:1

我想将自定义菜单栏(全角)附加到sliverAppBar小部件,以使其固定在sliverAppBar背景的底部,并且始终可见。

为了解决这个问题,我将Row小部件放入FlexibleSpaceBar.title参数中,但是现在我遇到了一个意外问题。

[当我将FlexibleSpaceBar.title参数内的任何内容包装到Row小部件中时,它将开始为溢出的填充设置动画。它还将Row小部件扩展到屏幕边界之外。那是意外行为。

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

You can't watch [screencast here][1]

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,),
        ]
      )
    )
  )
),

如何在sliverAppBar中为FlexibleSpaceBar标题禁用此收缩,大小和动画?

flutter dart flutter-layout
1个回答
0
投票

我刚刚通过添加一个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(
      ...
    )
  )
),
© www.soinside.com 2019 - 2024. All rights reserved.