英文:
Flutter Image bigger than container
问题
如何使图像在旋转并超出其容器时不显示在容器外部？
我还希望，如果图像处于正常位置并且大于其容器，它将被截断显示。
顺便问一下，图标可以采用相同的处理吗？
这是我的代码：
class CardList extends StatelessWidget {
const CardList({
Key? key,
required this.text,
required this.subText,
required this.trailing,
}) : super(key: key);
final String text;
final String subText;
final Widget trailing;
@override
Widget build(BuildContext context) {
GlobalKey _container = GlobalKey();
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant,
margin: EdgeInsets.symmetric(horizontal: 0.5.w, vertical: 0.5.h),
child: Row(
children: [
Container(
padding: EdgeInsets.only(left: 10.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoSizeText(text,
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subText.isNotEmpty
? AutoSizeText(
subText,
maxLines: 1,
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
fontWeight: FontWeight.w500),
)
: const SizedBox(
height: 0,
),
],
),
),
Container(
color: Colors.blue,
height: 100,
child: Transform.translate(
offset: Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: Image.asset(
'assets/images/map.png',
height: 300,
),
),
),
),
],
),
);
}
}
希望这对您有所帮助。
英文:
How can I make it so that if an image that is rotated and goes outside of its container does not show outside of it?
I would also like that if the image is in a normal position and if it is larger than its container, it will be shown cut off.
By the way, can I do the same treatment with the icons?
Here is my code
class CardList extends StatelessWidget {
const CardList({
Key? key,
required this.text,
required this.subText,
required this.trailing,
}) : super(key: key);
final String text;
final String subText;
final Widget trailing;
@override
Widget build(BuildContext context) {
GlobalKey _container = GlobalKey();
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant,
margin: EdgeInsets.symmetric(horizontal: 0.5.w, vertical: 0.5.h),
child: Row(
children: [
Container(
padding: EdgeInsets.only(left: 10.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoSizeText(text,
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subText.isNotEmpty
? AutoSizeText(
subText,
maxLines: 1,
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
fontWeight: FontWeight.w500),
)
: const SizedBox(
height: 0,
),
],
),
),
Container(
color: Colors.blue,
height: 100,
child: Transform.translate(
offset: Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: Image.asset(
'assets/images/map.png',
height: 300,
))),
),
],
));
}
}
答案1
得分: 1
通过使用容器的 clipBehavior 并将其设置为 antiAlias，您可以确保子组件 child 永远不会超出其父容器，如下所示：
Container(
clipBehavior: Clip.antiAlias, // 添加这一行
decoration: BoxDecoration( // 添加这一行
color: Colors.blue,
),
height: 100,
child: Transform.translate(
offset: Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: Image.asset(
'assets/images/map.png',
height: 300,
),
),
),
)
英文:
By using Container's clipBehavior and set it to antiAlias you can make sure the child widget never appear outside of its parent, like this:
Container(
clipBehavior: Clip.antiAlias, // add this
decoration: BoxDecoration(// add this
color: Colors.blue,
),
height: 100,
child: Transform.translate(
offset: Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: Image.asset(
'assets/images/map.png',
height: 300,
))),
),
答案2
得分: 0
尝试将您的图像小部件包装在ClipRRect小部件内，ClipRRect。
英文:
Try wrapping your image widget inside ClipRRect widget, ClipRRect.
答案3
得分: 0
尝试以下代码，希望对您有所帮助，参考ClipRRect，只需将我的图像更换为您的图像。
FittedBox(
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
constraints: BoxConstraints.tight(const Size(100, 100)),
color: Colors.blue,
child: Transform.translate(
offset: const Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: const FlutterLogo(size: 300),
),
),
),
),
)
结果-> 
英文:
Try below code hope its help to you, refer ClipRRect, just change my image with your image
FittedBox(
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
constraints: BoxConstraints.tight(const Size(100, 100)),
color: Colors.blue,
child: Transform.translate(
offset: const Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: const FlutterLogo(size: 300),
),
),
),
),
),
Result->
答案4
得分: 0
使用ClipRRect小部件将解决此问题。
如果将图像包装在旋转位置的ClipRRect小部件中，它将自动裁剪外部边缘。
ClipRRect(child: Image.network('your image'))
此外，在容器内的正常图像位置，如果角被圆角化而图像没有，您需要将图像放入ClipRRect小部件中，并使用borderRadius选项将图像圆角化以匹配容器的半径。
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network('Your Image')
)
)
英文:
Using ClipRRect Widget will solve that.
If you wrap your image inside a ClipRRect Widget in a rotation position, it will automatically cut the outward edges.
ClipRRect(child: Image.network('your image'))
Also, in a normal image position inside a container, if the corners are rounded and the image is not, you need to put your image inside a ClipRRect widget, and borderRadius option allows you to round your image to match the container radius.
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network('Your Image')
)
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论