如何在Flutter中裁剪图像?(How do I crop an image in Flutter?)

编程入门 行业动态 更新时间:2024-10-18 20:28:30
如何在Flutter中裁剪图像?(How do I crop an image in Flutter?)

假设我有一个长方形的肖像图像:

我想裁剪它,使其呈现如下:

我如何在Flutter中做到这一点?

(我不需要调整图像大小。)

(图片来自https://flic.kr/p/nwXTDb )

Let's say I have a rectangular, portrait image:

I'd like to crop it, such that it's rendered like this:

How can I do this in Flutter?

(I don't need to resize the image.)

(Image from https://flic.kr/p/nwXTDb)

最满意答案

我可能会使用带有DecorationImage的BoxDecoration 。 您可以使用alignment和fit属性来确定图像如何裁剪。 如果您不想在Container上硬编码高度,则可以使用AspectRatio小部件。

截图

import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new MyHomePage(), )); } class MyHomePage extends StatelessWidget { Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Image Crop Example"), ), body: new Center( child: new AspectRatio( aspectRatio: 487 / 451, child: new Container( decoration: new BoxDecoration( image: new DecorationImage( fit: BoxFit.fitWidth, alignment: FractionalOffset.topCenter, image: new NetworkImage('https://i.stack.imgur.com/lkd0a.png'), ) ), ), ), ), ); } }

I would probably use a BoxDecoration with a DecorationImage. You can use the alignment and fit properties to determine how your image is cropped. You can use an AspectRatio widget if you don't want to hard code a height on the Container.

screenshot

import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new MyHomePage(), )); } class MyHomePage extends StatelessWidget { Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Image Crop Example"), ), body: new Center( child: new AspectRatio( aspectRatio: 487 / 451, child: new Container( decoration: new BoxDecoration( image: new DecorationImage( fit: BoxFit.fitWidth, alignment: FractionalOffset.topCenter, image: new NetworkImage('https://i.stack.imgur.com/lkd0a.png'), ) ), ), ), ), ); } }

更多推荐

本文发布于:2023-08-06 04:33:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1444485.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:图像   如何在   image   Flutter   crop

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!