Flutter 图像大于容器

ujv3wf0j  于 2023-01-09  发布在  Flutter
关注(0)|答案(4)|浏览(149)

我怎样才能使一个图像旋转到它的容器之外时不会显示在容器之外呢?我也希望如果图像在正常位置并且比容器大,它会显示为被截断。顺便问一下,我可以对图标做同样的处理吗?
下面是我的代码

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,
                          ))),
                ),
              ],
            ));
  }
}
nvbavucw

nvbavucw1#

通过使用Container的clipBehavior并将其设置为antiAlias,您可以确保child小部件永远不会出现在其父小部件之外,如下所示:

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,
            ))),
  ),
2nc8po8w

2nc8po8w2#

尝试将图像小部件 Package 在ClipRRect小部件ClipRRect中。

zvms9eto

zvms9eto3#

尝试下面的代码希望它对你有帮助,参考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),
                ),
              ),
            ),
          ),
        ),

结果-〉

gev0vcfq

gev0vcfq4#

使用ClipRRect小工具可以解决这个问题。
如果你在一个ClipRectWidget内的旋转位置包裹你的图像,它会自动剪切向外的边缘。
第一个月
此外,在容器内的正常图像位置中,如果角是圆的而图像不是,则需要将图像放在ClipRect小部件内,borderRadius选项允许您圆化图像以匹配容器半径。

Container(
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
    child: ClipRRect(
        borderRadius: BorderRadius.circular(5),
        child: Image.network('Your Image')
    )
)

相关问题