在SliverAppBar中使用渐变效果（Flutter）？

Question

有没有人在SliverAppBar中使用过Gradient？当FlexibleSpace扩展时，我可以这样做，但它折叠时变成了纯色。是否有可能解决这个问题？

- Cleudice Santos

---

你能发一下你使用SliverAppBar的代码吗？当我测试时，我没有任何问题来显示渐变。 - rmtmckenzie

@rmtmckenzie，你是怎么做到的？能发一下代码吗？你知道如何使用CupertinoSliverAppBar实现吗？ - Benjamin

@Benjamin 我会发布SliverAppBar的代码，但CupertinoSliverAppBar听起来像是一个新问题，应该另外提问。如果你在评论中提问并@我，我会看看能否解决它 =) - rmtmckenzie

@rmtmckenzie，我刚刚在这里发布了新问题。谢谢！ - Benjamin

Answer 1

将一个新的Container Widget包装在FlexibleSpaceBar内，然后在容器下添加BoxDecoration和LinearGradient。

- Yuan25

---

请将文本内容翻译成中文。只返回翻译后的文本，请添加代码片段而不是截图。 - Hamed

Answer 2

除非我漏了什么，这应该可以做到你所要求的。

在滚动之前，它看起来像这样：

在这样滚动后：

import 'package:flutter/material.dart';

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

class GradientAppBar extends StatefulWidget {
  @override
  _GradientAppBarState createState() => _GradientAppBarState();
}

class _GradientAppBarState extends State<GradientAppBar> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              pinned: true,
              expandedHeight: 100,
              flexibleSpace: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.black,
                      Colors.white,
                    ],
                  ),
                ),
              ),
              title: Text("This app bar has a gradient!"),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Container(
                    color: Colors.blue,
                    height: 500,
                  ),
                  Divider(),
                  Container(
                    color: Colors.black12,
                    height: 500,
                  ),
                  Divider(),
                  Container(
                    color: Colors.lightBlue,
                    height: 500,
                  ),
                  Divider(),
                  Container(
                    color: Colors.lightGreen,
                    height: 500,
                  ),
                  Divider(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

- rmtmckenzie

Answer 3

从Flutter文档中展示这个：

    CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('grid item $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('list item $index'),
          );
        },
      ),
    ),
  ],
)

- Suliman Farzat

---

链接失效，答案不充分。 - Christian X