Question

我有一个黑色背景的脚手架，并且它的抽屉也为黑色。由于打开抽屉时发生的淡入淡出效果是淡入“ Colors.black54”（不透明度为54％的黑色），因此抽屉的边框不可见。

我希望它以不透明度54％淡入灰色。

我发现可以完成此操作的唯一方法是直接修改Flutter的源代码文件“ drawer.dart”（第382行），但这不是实际的解决方案，更多的是hack。

return new Scaffold(
  backgroundColor: Colors.black,
  drawer: new Drawer(
    child: new Container(
      color: Colors.black,
      child: new Center(
        child: new Text(
          'Test',
          style: new TextStyle(
            color: Colors.white
          )
        )
      ),
    ),
  ),
);

Answer 1

当您拉出抽屉时，我将使Scaffold的backgroundColor变为白色/灰色。

AnimatedController(
  builder: (...) {
    Color col = Color.lerp(
      Colors.white,
      Colors.black,
      Curves.someCurve.transform(controller.value);
    return Scaffold(
      key: _key,
      backgroundColor: col,
      drawer: ...
    );
  }

Answer 2

我在Github上提出了一个问题，并得到了这个答案，它可以为您完成所有工作（但在稳定的flutter渠道上尚不存在，仅在1.6.0及更高版本上可用）。

“如果您使用的是Flutter v1.6.0及更高版本，则可以将抽屉ScrimColor传递到Scaffold。这是最近在＃31025中添加的。在有关Flutter通道的文档中，请参阅有关使用更高Flutter版本的更多信息。” < / p>

https://github.com/flutter/flutter/issues/34171#issuecomment-500590613

return new Scaffold(
  backgroundColor: Colors.black,
  drawerScrimColor: Colors.grey.withOpacity(0.54),
  drawer: new Drawer(
    child: new Container(
      color: Colors.black,
      child: new Center(
        child: new Text(
          'Test',
          style: new TextStyle(
            color: Colors.white
          )
        )
      ),
    ),
  ),
);

打开抽屉小部件时如何修改背景的淡入淡出效果？

2 个答案: