首页 > 建站教程 > APP开发,混合APP >  Flutter笔记6:DecoratedBox装饰盒子正文

Flutter笔记6:DecoratedBox装饰盒子

DecoratedBox装饰盒子,是用来给别的容器进行装饰的widget,使用方法如下:
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomAppBar组件',
      home: Scaffold(
        appBar: AppBar(title: Text('BottomAppBar组件')),
        body: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            //装饰盒子,对父组件进行装饰
            child: DecoratedBox(
              //背景和内容位置 background:背景在内容之下, foreground:背景在内容之上
              position: DecorationPosition.foreground,
              decoration: BoxDecoration(
                  //背景颜色
                  color: Colors.grey,
                  //背景图片
                  image: DecorationImage(
                    //背景色填充方式
                    fit: BoxFit.cover,
                    image: ExactAssetImage('assets/bg.jpg'),
                  ),
                  //圆角
                  borderRadius: BorderRadius.circular(150),
                  //边框
                  border: Border.all(
                      color: Colors.red,
                      //边框粗细
                      width: 6.0),
                  shape: BoxShape.circle),
              child: Text(
                '定位演示',
                style: TextStyle(fontSize: 30.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}