如果只用Container包装子控件而没有任何其他参数的设置,代码如下:
body:new Container(
color: Colors.blue,
child: Text('老金说事'),
alignment: Alignment.center,
height: ScreenUtil.getScreenH(context)/8,
width: ScreenUtil.getScreenW(context),
margin: EdgeInsets.all(20),
)
背景是圆角矩形
body:new Container(
child: Text('老金说事'),
alignment: Alignment.center,
height: 50,
width: ScreenUtil.getScreenW(context),
margin: EdgeInsets.only(top: 20),
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue
),
)
除了背景我们可以设置边框效果,代码如下:
body:new Container(
child: Text('老金说事'),
alignment: Alignment.center,
height: 50,
width: ScreenUtil.getScreenW(context),
margin: EdgeInsets.all(20),
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Colors.blue,
width: 2,
)
),
)
我们也可以通过此方式创建圆角图片和圆形图片,代码如下:
body:new Container(
alignment: Alignment.center,
height: 200,
width: 200,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Colors.blue,
width: 2,
)
),
)
);
body:new Container(
alignment: Alignment.center,
height: 200,
width: 200,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
border: Border.all(
color: Colors.blue,
width: 2,
)
),
)
);