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

DecorationImage装饰图片主要配合BoxDecoraion使用，相当于给容器加背景，和css的背景图片很像，也有平铺方式、填充方法、位置等：

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),
        ),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！