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

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