首页 > 建站教程 > APP开发,混合APP >  Flutter笔记31:DecorationImage装饰图片/背景图片正文

Flutter笔记31:DecorationImage装饰图片/背景图片

DecorationImage装饰图片主要配合BoxDecoraion使用,相当于给容器加背景,和css的背景图片很像,也有平铺方式、填充方法、位置等:
01class MyApp extends StatelessWidget {
02  const MyApp({Key key}) : super(key: key);
03 
04  @override
05  Widget build(BuildContext context) {
06    return MaterialApp(
07      title: 'DecorationImage装饰图片',
08      home: Scaffold(
09        appBar: AppBar(
10          title: Text('DecorationImage装饰图片'),
11        ),
12        body: Container(
13          child: Center(
14            child: Text(
15              '装饰图片组件DecorationImage',
16              style: TextStyle(
17                  color: Colors.white,
18                  fontSize: 30.0,
19                  fontWeight: FontWeight.bold),
20            ),
21          ),
22          width: 200.0,
23          height: 200.0,
24          //装饰
25          decoration: BoxDecoration(
26              color: Colors.greenAccent,
27              //装饰图片/背景图片
28              image: DecorationImage(
29                image: AssetImage('assets/images/1.jpg'),
30                //图片填充方式
31                fit: BoxFit.cover,
32                //图片位置
33                alignment: Alignment.topCenter,
34                //图片平铺方式
35                repeat: ImageRepeat.repeatY,
36              )),
37          margin: EdgeInsets.only(top: 20.0),
38        ),
39      ),
40    );
41  }
42}