放大图像并将图像居中到卡片小部件和剪辑溢出答案

【问题标题】：Zoom in and center image onto a Card Widget and clip overflow放大图像并将图像居中到卡片小部件和剪辑溢出
【发布时间】：2021-04-27 20:32:38
【问题描述】：

如何放大图像并将图像居中放置在卡片小部件上并剪裁任何溢出？我仍然很难理解 Flutter 中的布局。

这是我得到的：

您可以在屏幕上看到六个卡片小部件。点击其中一个，然后从手机中选择一张图片将该图像放在整个 Card 小部件上。但是，如您所见，存在溢出。代码如下：

  @override
  Widget build(BuildContext context) {
    final widget = this.widget;
    if (widget.name.isEmpty) {
      return Container();
    }
    return Card(
      child: Stack(
        children: [
          InkWell(
            onTap: widget.onTapInfo,
            highlightColor: const Color(0xffbb86fc),
            child: FutureBuilder<Widget>(
                future: widget.image.getImage(widget),    <-------  'See getImage function below.'
                initialData: child,
                builder: (_, snapshot) => _futureBuilder(snapshot)),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 20, right: 25),
            child: Align(
              alignment: Alignment.topRight,
              child: InkWell(
                onTap: widget.onTap,
                highlightColor: const Color(0xffbb86fc),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<Widget> getImage(TaskCard card) async {
    this.card = card;
    final con = card.con;
    Widget image;
    key =
        '${con.moduleType}${con.module}${card.submodule}${card.name}${card.runtimeType.toString()}';
    final path = Prefs.getString(key);
    if (path.isNotEmpty) {
      image = Image.file(File(path));//, fit: BoxFit.cover);
      _state?.child = ClipRect(               <--- 'ClipRect keeps it in Card, but what do I do next?'
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [Container(alignment: Alignment.bottomRight, child: image)],
        ),
      );
      // ignore: invalid_use_of_protected_member
      _state?.setState(() {});
    }
    return image;
  }

这就是我想要的：

注意它是如何在多余的边被剪掉的情况下稍微居中的。如何使用 ClipRect 做到这一点？请帮忙，我卡住了。

【问题讨论】：

标签： flutter

【解决方案1】：

使用Image.file，它具有BoxFit 的属性，fit:BoxFit.cover 应该在图像最适合的中心进行缩放/裁剪。示例：

Container(
        child: Image.file(
            myfile,
            
            fit: BoxFit.cover));

【讨论】：

【解决方案2】：

找到名为crop 的第三方解决方案。默认情况下，它会裁剪图像并返回通常是图像的中心部分。

  Future<Widget> getImage(TaskCard card) async {
this.card = card;
final con = card.con;
Widget image;

key =
    '${con.moduleType}${con.module}${card.submodule}${card.name}${card.runtimeType.toString()}';

final path = Prefs.getString(key);

if (path.isNotEmpty) {
  //
  final file = File(path);

  // ignore: avoid_slow_async_io
  final exists = await file.exists();

  if (exists) {
    //
    _state?.child =
        Crop(controller: CropController(), child: Image.file(file));
  }
}
return image;

}

【讨论】：