在Flutter中修剪后删除多余的部分

时间:2019-10-25 08:07:49

标签: android flutter dart flutter-layout clip

剪辑允许我仅绘制要显示的部分。如何删除未绘制但仍占用空间的多余部分?

screenshot


代码

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;
}

1 个答案:

答案 0 :(得分:1)

我的解决方案

我最近遇到了类似的问题(我需要将图像剪成两半)并在 flutter api site 上找到了此示例代码(使用其他对齐点来更改切片行为)- 没有剩余空间:< /p>

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