class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DecorationImage装饰图片',
home: Scaffold(
appBar: AppBar(
title: Text('DecorationImage装饰图片'),
),
body: Container(
child: Center(
child: Text(
'装饰图片组件DecorationImage',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold),
),
),
width: 200.0,
height: 200.0,
//装饰
decoration: BoxDecoration(
color: Colors.greenAccent,
//装饰图片/背景图片
image: DecorationImage(
image: AssetImage('assets/images/1.jpg'),
//图片填充方式
fit: BoxFit.cover,
//图片位置
alignment: Alignment.topCenter,
//图片平铺方式
repeat: ImageRepeat.repeatY,
)),
margin: EdgeInsets.only(top: 20.0),
),
),
);
}
} Flutter笔记31:DecorationImage装饰图片/背景图片
DecorationImage装饰图片主要配合BoxDecoraion使用,相当于给容器加背景,和css的背景图片很像,也有平铺方式、填充方法、位置等:
