Sliver App Bar 显示不正确 - Flutter

Question

我正在尝试显示我设计中显示的 SliverAppBar

但我不确定是否可以在 Flutter 中完成

到目前为止，这是我的代码

        SliverAppBar(
      // title: ,
      backgroundColor: Colors.grey[200],
      expandedHeight: 300,
      centerTitle: true,
      shape: const ContinuousRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              bottomRight: Radius.circular(100))),
      actions: <Widget>[
CircleAvatar(
              radius: 20,
              // foregroundColor: Colors.red,
              backgroundImage: AssetImage(
                'assets/img/categories/player.png',
              ),
            ),
      ],
      flexibleSpace: FlexibleSpaceBar(
        background: Container(),
        centerTitle: true,

        title: Container(
          height: 40,
          child: Column(
            children: [
              Text("Mrs Surname Name",
                  style: TextStyle(
                    fontFamily: 'Kannada Sangam MN',
                    fontWeight: FontWeight.w500,
                    fontSize: 20,
                    // color: AppTheme.high_emphasis,
                  )),

            ],
          ),
        ),

      ),
      pinned: true,
      floating: false,
      elevation: 0,
    ),

我希望名字和主题即使在向上滚动时也能显示头像但较小

但是向上滚动时要隐藏的“Constantes”

Answer 1

您需要使用 SliverOverlapAbsorber/SliverOverlapInjector。尝试 this 希望它能奏效。

Answer 2

我们可以使用SliverAppBar title来保存name & Motif，因为它对UI总是可见的。在下一部分头像图像也始终可见，但会根据滚动减小尺寸，在这种情况下将其放在 flexibleSpace:FlexibleSpaceBar(title: Avatar) 内将是更好的选择。对于其他人，信息将根据滚动消失，因此我们可以使用 FlexibleSpaceBar( background:) 并使用 column 填充它。但是会有重叠，我们可以使用 const SizedBox(height: kToolbarHeight,), at 1st child of Column.

来欺骗它

结果

这是一个可以帮助制作UI的示例，您可以像这样调整装饰。

      SliverAppBar(
            pinned: true,
            backgroundColor: Colors.grey[200],
            expandedHeight: 300,
            title: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text(
                  "Mrs, Surname Name",
                  style: TextStyle(
                    fontSize: 16,
                  ),
                ),
                Text(
                  "Mrs, Surname Name",
                  style: TextStyle(
                    fontSize: 26,
                  ),
                ),
              ],
            ),
            shape: const ContinuousRectangleBorder(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            flexibleSpace: FlexibleSpaceBar(
               background: Container(
                color: Colors.grey[200],
                padding: const EdgeInsets.only(left: 16),
                child: Column(
                  ///* however we can use sizedBox to handle upperSpaces
                  crossAxisAlignment: CrossAxisAlignment.start,
                  // mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    ///* like this
                    const SizedBox(
                      height: kToolbarHeight,
                    ),
                    ...List.generate(
                      4,
                      (index) => Text("others info"),
                    )
                  ],
                ),
              ),
              title: Row(
                ///* not sure why i cant avoid using Row here
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(),
                  Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: 70,
                      width: 70,
                      alignment: Alignment.center,
                      decoration: const BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.deepOrange,
                      ),
                      child: Text("img"),
                    ),
                  ),
                ],
              ),
            ),
          ),

Sliver App Bar 显示不正确 - Flutter

Sliver App Bar not displaying correctly - Flutter

flutter

dart

flutter-layout

flutter-sliver