在 Flutter 中剪辑后删除多余的部分 [英] Remove extra part after clipping in Flutter

问题描述

剪辑允许我只绘制我想要显示的部分.怎么去掉多余的部分没有画出来但还是占空间?

Clipping allows me to draw only the part which I want to show. How do I remove the extra part which is not drawn but still takes up space?

代码

import 'package:flutter/material.dart';

class ClipTut extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: <Widget>[
            ClipRect(
              clipper: CustomRect(),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 4, color: Colors.black),
                  color: Colors.blue,
                ),
                width: 200.0,
                height: 200.0,
              ),
            ),
            Container(
              height: 200,
              width: 100,
              decoration: BoxDecoration(
                border: Border.all(width: 4, color: Colors.black),
                color: Colors.green,
              ),
            )
          ],
        ),
      ),
    );
  }
}

class CustomRect extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => Rect.fromLTRB(0, 0.0, size.width/2, size.height);

  @override
  bool shouldReclip(CustomRect oldClipper) => true;
}

推荐答案

我的解决方案

我最近遇到了类似的问题(我需要将图像剪成两半)并在 flutter api 站点(使用其他对齐点来改变切片行为)- 没有多余的空间:

My Solution

I had a similar problem recently (I needed to clip the image in half) and found this sample code on the flutter api site (use the other alignment points to change slicing behaviors) - no extra space left over:

ClipRect(
  child: Align(
    alignment: Alignment.topCenter,
    heightFactor: 0.5,
    child: Image.network(userAvatarUrl),
  ),
)

这篇关于在 Flutter 中剪辑后删除多余的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！