Sliver 应用栏无法正确显示 - 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,
    ),

我希望即使向上滚动头像也能显示名称和图案，但更小

但是向上滚动时要隐藏的“常量”????

Answer 1

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

结果

这是一个可以帮助生成 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"),
                    ),
                  ),
                ],
              ),
            ),
          ),
     

Answer 2

您需要使用 SliverOverlapAbsorber/SliverOverlapInjector。 试试this希望它会起作用。