使 SliverAppBar 具有图像作为背景而不是颜色

Posted 2023-02-23

【中文标题】使 SliverAppBar 具有图像作为背景而不是颜色

【英文标题】：Make SliverAppBar have an image as a background instead of a color

【发布时间】：2020-03-17 02:57:21

【问题描述】：

我有一个带有背景图片的 SliverAppBar。

折叠时，它有蓝色作为背景：

但我希望它在折叠时显示背景图像，而不是蓝色：

我怎样才能做到这一点？

我已经尝试为应用栏设置透明背景色， 但它没有用。

代码：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  var scrollController = ScrollController();

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home());
  


class Home extends StatefulWidget 
  @override
  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) 
              return [
                SliverAppBar(
                  expandedHeight: 200.0,
                  floating: false,
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                      title: Text("Collapsing Toolbar",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          )),
                      background: Image.network(
                        "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                        fit: BoxFit.cover,
                      )),
                ),
                SliverPadding(
                  padding: new EdgeInsets.all(16.0),
                  sliver: new SliverList(
                    delegate: new SliverChildListDelegate([
                      TabBar(
                        labelColor: Colors.black87,
                        unselectedLabelColor: Colors.grey,
                        tabs: [
                          new Tab(icon: new Icon(Icons.info), text: "Tab 1"),
                          new Tab(
                              icon: new Icon(Icons.lightbulb_outline),
                              text: "Tab 2"),
                        ],
                      ),
                    ]),
                  ),
                ),
              ];
            ,
            body: Center(
              child: Text("Sample text"),
            ),
          ),
        ));
  

【参考方案1】：

请查看以下代码：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  var scrollController = ScrollController();

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home());
  


class Home extends StatefulWidget 
  @override
  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) 
          return [
            SliverAppBar(
              expandedHeight: 200.0,
              floating: true,
              pinned: true,
              snap: true,
              actionsIconTheme: IconThemeData(opacity: 0.0),
              flexibleSpace: Stack(
                children: <Widget>[
                  Positioned.fill(
                      child: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  ))
                ],
              ),
            ),
            SliverPadding(
              padding: new EdgeInsets.all(16.0),
              sliver: new SliverList(
                delegate: new SliverChildListDelegate([
                  TabBar(
                    labelColor: Colors.black87,
                    unselectedLabelColor: Colors.grey,
                    tabs: [
                      new Tab(icon: new Icon(Icons.info), text: "Tab 1"),
                      new Tab(
                          icon: new Icon(Icons.lightbulb_outline),
                          text: "Tab 2"),
                    ],
                  ),
                ]),
              ),
            ),
          ];
        ,
        body: Center(
          child: Text("Sample text"),
        ),
      ),
    ));
  

【讨论】：

不鼓励仅使用代码的解决方案，请尝试在答案中添加更多详细信息，而不仅仅是发布代码。