时间戳

首页 > 解决方案 > Flutter 使用图像作为框架来覆盖图片

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

问题描述

我想将 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")),
                    ),
                ),
            ],
        ),
    ),
);

}

标签： flutteroverlay

解决方案

您可以适合图像，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),
            ),
          ],
        ),
      ),
    );
  }
}

推荐阅读