flutter scaffold 背景图
时间: 2023-09-08 19:12:15 浏览: 103
要设置Flutter Scaffold的背景图,可以使用Stack和Container组件来实现。具体步骤如下:
1. 在Scaffold组件中,使用Stack组件作为它的body属性,Stack组件可以让多个组件重叠在一起。
```dart
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Stack(
children: [
// 背景图组件会放在这里
Center(
child: Text('Hello, World!'),
),
],
),
);
```
2. 在Stack组件中添加一个Container组件作为背景图,通过decoration属性将图片资源设置为背景图片。
```dart
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/bg.jpg'),
fit: BoxFit.cover,
),
),
),
Center(
child: Text('Hello, World!'),
),
],
),
);
```
在这个例子中,Scaffold的背景图被设置为assets/images/bg.jpg这张图片。需要将图片放到项目的assets/images文件夹下,并在pubspec.yaml文件中声明。
```yaml
flutter:
assets:
- assets/images/bg.jpg
```
这样就完成了Flutter Scaffold的背景图设置。
阅读全文
相关推荐


















