Flutter 使用图像作为框架来覆盖图片

Question

我想在图片上方放一个iPhone的边框图片。图片的尺寸大于相框。我想剪裁图片的延伸边缘，使其不超过框架。

我的代码在下面，调整后它适用于 iPhone 11。但它在其他尺寸不同的设备上坏了。实际上代码并没有裁剪图片，它只是调整框架的大小以适应框架的大小。不好，我想剪掉图片的延伸部分，这样会更好

谁能帮我解决这个叠加效果？谢谢！

Widget build(BuildContext context) {
return Container(
    color: Colors.transparent,
    width: 400,
    height: 600,
    clipBehavior:  Clip.hardEdge,
    child: ClipRect(
        clipBehavior: Clip.hardEdge,
        child: Stack(
            children: <Widget>[
                Padding(
                    padding: const EdgeInsets.only(left: 67.5,right: 67,top: 9,bottom: 9),
                    child: Column(
                        children: <Widget>[
                            Expanded(child: Image(image:AssetImage("Object.png"))),
                        ],
                    ),
                ),
                Container(
                    child: Center(
                        child: Image(
                            image: AssetImage("Frame.png")),
                    ),
                ),
            ],
        ),
    ),
);

}

Answer 1

您可以使用 BoxFit.fitHeight 适合图像，然后使用 ClipRRect 剪掉角落。

输出：

代码：

import 'package:flutter/material.dart';

main() => runApp(MyApp());

final String url =
    "https://media.idownloadblog.com/wp-content/uploads/2018/09/iPhone-XS-advertising-wallpaper-any-iPhone-2-768x1365.png";

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
       home: MaterialApp(
        home: HomeScreen(),
      ));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 500,
        width: 250,
        child: Stack(
          children: <Widget>[
            SizedBox(
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(25)),
                child: Image.network(
                  url,
                  fit: BoxFit.fitHeight,
                ),
              ),
              height: 500,
              width: 250,
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(25)),
                  border: Border.all(width: 4, color: Colors.blue),
                  shape: BoxShape.rectangle),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter 使用图像作为框架来覆盖图片

Flutter use an image as frame to cover a picture

overlay

flutter