是否可以在不将脚手架背景包裹在容器中的情况下为其提供渐变色

Question

我们可以在不将脚手架包裹在容器中的情况下为其提供渐变背景吗？

Widget build(BuildContext context) {
return Scaffold(
//-----------------------------------
//main background
backgroundColor: Colors.blue[400],
body: PageView.builder(
controller: pageController,
onPageChanged: (val) {
setState(() {
currentIndex = val;
});

Answer 1

我们可以创建一个自定义的Scaffold类来完成它：

class CustomScaffold extends StatelessWidget {
CustomScaffold(this.body, this.gradient); // and maybe other Scaffold properties
final Widget body;
final LineGradient gradient;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(child: this.body, decoration: BoxDecoration(gradient: this.gradient)),
);
}
}

这样使用：

Widget build(BuildContext context) {
LinearGradient _gradient = LinearGradient(colors: [gradientStart, gradientEnd],
begin: const FractionalOffset(0.5, 0.0),
end: const FractionalOffset(0.0, 0.5),
stops: [0.0,1.0],
tileMode: TileMode.clamp
);
return CustomScaffold(
gradient: _gradient,
body: PageView.builder(
controller: pageController,
onPageChanged: (val) {
setState(() {
currentIndex = val;
});
},
),
);
}

Answer 2

否，Scaffold的后台属性只接受一个Color。如果您想显示颜色渐变，我认为根据定义，这应该被视为Scaffold的body的一部分

但这确实很容易做到，例如使用本教程。