我想用 Container 包装 Scaffold 以获得同样位于 AppBar 下方的渐变背景。基本上是全屏 gradient 背景。但是，我的尝试没有做任何事情。 有没有另一种方法，我可以保留 AppBar 功能，但将它放在跨越整个屏幕的 gradient 之上？

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: MyHomePage(title: 'Test'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          stops: [0.1, 0.5, 0.7, 0.9],
          colors: [
            Colors.yellow[800],
            Colors.yellow[700],
            Colors.yellow[600],
            Colors.yellow[400],
          ],
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Icon(Icons.menu),
          backgroundColor: Color(0x00000000),
          elevation: 0.0,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'dummy text',
              ),
              Text(
                '5',
                style: Theme.of(context).textTheme.display1,
              ),
              FloatingActionButton(
                backgroundColor: Colors.white,
                foregroundColor: Colors.black45,
                elevation: 0.0,
                onPressed: () {},
                tooltip: 'Play',
                child: Icon(Icons.play_arrow),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

最佳答案

你也可以像这样给AppBar添加渐变，

new Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Awesome AppBar')),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [
                  const Color(0xFF3366FF),
                  const Color(0xFF00CCFF),
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
        ),
        child: ...,
      ),
      body: ...,
    );

LinearGradient 参数:

• colors:要在渐变中使用的颜色数组，在本例中为两种蓝色。

• begin，end:第一种颜色和最后一种颜色的位置，本例中，

• FractionalOffset 允许我们将 x 和 y 的坐标视为 0 到 1 的范围。由于我们想要一个水平梯度，我们对两个度量使用相同的 Y，x 从 0.0(左)变为 1.0(右)。

• stops:此数组的大小应与颜色相同。它定义了颜色的分布方式。 [0.0, 1.0] 将从左到右填充它。 [0.0, 0.5] 将填充颜色从左到半条等。

• tileMode:如果停靠点没有填满整个区域怎么办。在这种情况下，我们添加了钳位(它将重用最后使用的颜色)，但随着我们的渐变从 0.0 变为 1.0，这并不是真正必要的。

• 您还可以向 Container 添加一个子项。例如:一些标志图像

      child: Align(
            alignment: Alignment.center,
            child: Image.asset(
              "images/logo.png",
              width: 128,
              height: 128,
            )),
      ),
  

希望这会有所帮助。

https://stackoverflow.com/questions/53408917/