flutter - Flutter 使网络图像占据全角
问题描述
我有这张卡,我想让任何图像占据卡的整个宽度,我尝试将宽度设置为 double.infinity 和 3000,但它不起作用。我也想在图像顶部写文字我该怎么做?如果我这样做会影响应用程序的性能吗?
return Card(
clipBehavior: Clip.antiAlias,
elevation: 5,
margin: EdgeInsets.fromLTRB(10, 20, 10, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Expanded(
flex: 8,
child: new Container(
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.0),
child: CachedNetworkImage(
fadeInDuration: Duration(milliseconds: 2000),
width: 3000,
imageUrl:
'https://images.alphacoders.com/560/thumb-350-560228.jpg',
placeholder: (context, url) =>
new CircularProgressIndicator(),
),
),
),
),
new Expanded(
flex: 2,
child: new Container(
child: MaterialButton(
minWidth: double.infinity,
color: Color(orange),
onPressed: () {},
child: Text(
'Read More',
style: TextStyle(color: Colors.white),
),
),
color: Colors.green,
))
],
),
);
解决方案
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/200x150",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter:
ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),```
Check out this in which fit parameter will solve your question
推荐阅读
- javascript - 无法使用 for/while LOOP Javascript/Jquery 获得最终结果
- java - 使用Apache poi在特定列中查找excel中的最后一行没有
- javascript - javascript:保存表值以用作默认值
- react-native - 如何在不改变孩子位置的情况下将视图对齐到中心?
- java - 从Java中的像素读取RGB值
- android - 在片段中隐藏和显示布局会导致 GridView 闪烁
- java - 如何创建一个类标签来用java构建一个广播变量spark?
- c# - UWP 使用 Prism ViewModel 和接口绑定停止工作
- kubernetes - 从 kubelet 和 cri-o 获取 pod 统计信息的问题
- java - Unable to login karaf after the exception: Caused by: java.lang.NoClassDefFoundError: Could not initialize class javax.xml.bind.DatatypeConverterImpl