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的背景图片很像,也有平铺方式、填充方法、位置等: