Flutter如何处理框内固定大小的图像？
Posted
技术标签:
【中文标题】Flutter如何处理框内固定大小的图像？【英文标题】：Flutter how to handle image with fixed size inside box? 【发布时间】：2019-07-20 00:26:31 【问题描述】：我是 Flutter 的新手，我喜欢它，但我不习惯构建布局。
我正在开发一个包含卡片 ListView 的应用程序。 每张卡片都在一个容器内，包含一个图像（具有固定的高度和宽度）和一个文本。
我无法将图像正确放入卡片中。我希望图像覆盖框的宽度。 谢谢。
这是代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
final title = 'MyApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: <Widget>[
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.asset(
'img/britannia.jpg',
width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
],
),
),
);
【问题讨论】：
Each card has a fixed size - 固定大小是多少？
每个容器必须（例如）150 高。我想要的是根据容器的高度缩放图像（容器包含卡片）。尽管源图像尺寸，我希望像第一张图片一样显示图像。
您是否尝试过使用扩展类？ docs.flutter.io/flutter/widgets/Expanded-class.html
我已经更新了代码和图片。我必须将 Image 小部件或 ClipRRect 小部件包装在 Expanded 内？
如何在flutter中将小图像放入大容器中？请建议。谢谢。
【参考方案1】：
如果使用 fit 属性可行，我让这张非常清晰的备忘单（章节 fit 属性）详细说明所有内容：https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20
【讨论】：
你想适应 witdh 吗？那么fitWidth 应该可以解决问题，不是吗？？
但是你为什么要给你的图片加上高度和宽度呢？那你就不会有欲望效果了……你应该给你定义高度card小部件【参考方案2】：
您需要在Column 中添加-crossAxisAlignment: CrossAxisAlignment.stretch,，以便孩子们可以占用水平空间。
工作代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
final title = 'MyApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: <Widget>[
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // add this
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
],
),
),
);
输出：
【讨论】：
如何在flutter中将小图像放入大容器中？请建议。谢谢。【参考方案3】：这对我有用
Image.network(imageUrl, fit: BoxFit.fitWidth,),
【讨论】：
【参考方案4】：我用过这个并且和我一起工作得很好！
Container(
width: MediaQuery.of(context).size.width,
height: 175,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(YOUTUBE_THUMBNAIL_PART_ONE +
video.key +
YOUTUBE_THUMBNAIL_PART_TWO),
),
)),
【讨论】：
【参考方案5】：我有同样的问题，我只是在 Image.asset 类中添加了 fit:BoxFit.fill 在使用 MediaQuery 类获取屏幕宽度后**
Container(
child:Image.asset(link,fit: BoxFit.fill,)
width: screensize.width,
height: 150,
))
【讨论】：
Container 小部件中没有 fit 属性
@KirillKarmazin 我刚刚注意到我犯的错误。我编辑了我的答案，现在应该可以了。感谢您的关注。【参考方案6】：
我不知道怎么做.. 但这确实可以在容器中保持固定大小的图像 只需在容器中添加对齐方式
Container(
height: double.infinity,
alignment: Alignment.center, // This is needed
child: Image.asset(
Constants.ASSETS_IMAGES + "logo.png",
fit: BoxFit.contain,
width: 300,
),
);
【讨论】：
对齐也奇怪地解决了我的问题【参考方案7】：您想要做的可能是使用较大容器的大小。 在这种情况下，您的媒体应该占据整个专用空间：
return Container(
alignment: Alignment.center,
height: double.infinity,
width: double.infinity,
child: Image.asset(
'', //TODO fill path
height: double.infinity,
width: double.infinity,
fit: BoxFit.cover,
),
);
您可以使用fit 值：
BoxFit.cover 会覆盖整个容器
BoxFit.fitWidth 将适合宽度并最终放置水平白条来填充空间
BoxFit.fitHeight 将适合高度并最终放置垂直的白条来填充空间
【讨论】：
【参考方案8】： Image.asset(
'assets/images/desert.jpg',
height: 150,
width: MediaQuery.of(context).size.width,
fit:BoxFit.cover
)
【讨论】：
【参考方案9】：您只需要Image 类的fit 属性：
Image.asset(
'your_image_asset',
fit: BoxFit.fill, // Expands to fill parent (changes aspect ratio)
)
或
Image.asset(
'your_image_asset',
fit: BoxFit.cover, // Zooms the image (maintains aspect ratio)
)
【讨论】：
【参考方案10】：child: Container(
alignment: Alignment.center,// use aligment
child: Image.asset(
'assets/images/call.png',
height: 45,
width: 45,
fit: BoxFit.cover,
),
),
如果你想带边框，可以使用它
Center(
child: Container(
margin: EdgeInsets.only(top: 75),
width: 120,
height: 120,
alignment: Alignment.center,
child: Image.asset(
"assets/images/call.png",
fit: BoxFit.cover,
height: 45,
width: 45,
),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.all(new Radius.circular(120)),
border: new Border.all(
color: Colors.blue,
width: 4.0,
),
),
),
)
【讨论】：
【参考方案11】：将 Image 小部件放入容器中，并为容器提供对齐中心，并为图像提供特定的宽度-高度。
return Container(
alignment: Alignment.center,// use aligment
color: Color.fromRGBO(0, 96, 91, 1.0),
child: Image.asset('assets/images/splash_logo.png',
height: 150,
width: 150,
fit: BoxFit.cover),
);【讨论】：
以上是关于Flutter如何处理框内固定大小的图像？的主要内容，如果未能解决你的问题，请参考以下文章