flutter scaffold 背景渐变颜色
时间: 2024-02-05 16:10:36 浏览: 419
背景颜色渐变
5星 · 资源好评率100%
要在 Flutter Scaffold 中设置渐变背景色,您可以使用 `Container` Widget 并将其放置在 `Scaffold` 的主体中。以下是一个示例代码片段,其中使用 `LinearGradient` 来创建一个水平渐变:
```dart
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.purple],
stops: [0.0, 1.0],
),
),
child: Center(
child: Text(
'Hello, World!',
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
),
);
}
}
```
在此示例中,`LinearGradient` 接受开始和结束位置,两个颜色和可选的停止列表。在这种情况下,渐变从顶部向下,从蓝色到紫色渐变。 `Container` 的内容是一个简单的居中文本小部件,其颜色与背景渐变相反,以使其更加突出。
阅读全文