image - FlexibleSpaceBar 背景图像在折叠时保持一定的不透明度

Question

我在我的项目中使用 SliverAppBar。我在“灵活空间”参数中设置了背景颜色和背景图像。但是，当应用栏折叠时，图像并没有完全淡出成为我选择的“背景颜色”，但我在“灵活空间”中选择的背景图像即使失去了一定程度的不透明度，仍然在背景中可见。

这是小部件中的代码。谢谢。

import 'package:flutter/material.dart';
import './last-announcements.dart';
import './your-announcements.dart';
import './search-bar.dart';

class HomeOverview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const immageUrl = 'assets/images/Logo.png';
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          backgroundColor: Theme.of(context).primaryColor,          
          flexibleSpace: FlexibleSpaceBar(
              background: Padding(
                padding: const EdgeInsets.only(top: 25.0),
                child: Image(
                  image: AssetImage(immageUrl),
                  alignment: Alignment.topCenter,
                ),
              ),      
              centerTitle: true,
              title: Container(
                width: double.infinity,
                height: 50,
                color: Theme.of(context).primaryColor,
                margin: EdgeInsets.only(left: 10, right: 10),
                child: SearchBar(),
              )),
          expandedHeight: 250,
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          YourAnnouncemets(),
          LastAnnouncements(),
        ]))
      ],
    );
  }
} 

Answer 1

在脚手架内尝试，脚手架主体内的 CustomScrollView 居中，因此背景颜色保留在灵活空间后面。

 return Scaffold(
  backgroundColor: Theme.of(context).primaryColor,
    body: Center(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              backgroundColor: Theme
                  .of(context)
                  .primaryColor,
              flexibleSpace: FlexibleSpaceBar(
                title: Text("Fleet"),
                background: Container(
                  decoration: BoxDecoration(
                    // borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      image: AssetImage("assets/carfinance.jpeg"),
                      fit: BoxFit.fill,
                    ),
                    boxShadow: [
                      BoxShadow(
                          blurRadius: 40,
                          offset: Offset(2, 4),
                          color: colors.AppColor.gradientSecond
                      )
                    ],
                  ),
                ),
                //padding: EdgeInsets.only(bottom: 100),
              ),
              expandedHeight: 250,
            ),
            SliverList(
                delegate: SliverChildListDelegate([
                  // YourAnnouncemets(),
                  // LastAnnouncements(),
                ])
            ),
          ],
        )
    )
);