在Card内部有一列,其中包含2个Flexible小部件(flex属性为3,1),每个小部件都包含一个Container小部件 这是代码:
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.red,
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(child: Text('Request')
),
)
)
],
),
),
);
现在我要放置图像以覆盖所有红色区域,
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.red,
child: Image.network(
'https://placeimg.com/640/480/any', fit: BoxFit.cover,)
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(child: Text('Request')
),
)
)
],
),
),
);
}
我尝试更改适合度:BoxFit.cover,但是什么也没发生
如何在不更改容器尺寸的情况下使图像覆盖容器(带有红色区域)?
添加行和其他列
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20,
color: Colors.black
)
),
)
),
)
)
],
),
),
Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20,
color: Colors.black
)
),
)
),
)
)
],
),
),
],
),
);
}
答案 0 :(得分:2)
使用decoration
的{{1}}属性为其提供一个Container
:
Image
结果:
编辑:“为什么我在 Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
中使用它时为什么我的图像没有显示?”?:
您需要通过将Row
或Card
包装在Width
小部件中来SizedBox
。
以您的代码为例添加了一个演示:
Container
注意:建议根据设备屏幕的宽度为class Help extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 150, // give width here
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20, color: Colors.black)),
)),
))
],
),
),
),
SizedBox(
width: 150, // give width here
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20, color: Colors.black)),
)),
))
],
),
),
),
],
),
),
);
}
}
设置宽度。
结果: