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

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

收起时,它具有蓝色作为背景:

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

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

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

使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"),));
  }
}
calary 回答:使SliverAppBar具有图像作为背景而不是颜色

enter image description here请检查以下代码:

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"),));
  }
}
本文链接:https://www.f2er.com/3059767.html

大家都在问