如何使容器在他的圆角之外透明？

Question

我有一个包裹在 Dismissible 中的容器，容器和 dismissible 背景都被切角了。我的问题是，即使顶部容器的角被切掉，本来应该是角的 space 是白色而不是透明的。

这是我拥有的与我想要的（油漆制作）

我试过 Colors.transparent 但没有成功。

完整代码如下：

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  static const Radius _borderRadius = const Radius.circular(65.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Dismissible(
        key: ValueKey("hmm"),
        background: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 3),
            borderRadius: BorderRadius.all(_borderRadius), 
            color: Colors.white,
          ),
        ),
        secondaryBackground: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 3),
            borderRadius: BorderRadius.all(_borderRadius), 
            color: Colors.white,
          ),
        ),
        child: Container(
          width: 300,
          height: 200,
          decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(_borderRadius),
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.pink],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              )),
        ),
      )),
    );
  }
}

Answer 1

找到

问题是 dismissible.dart 中的裁剪行为。我已经设法通过编辑 Dismissible class 本身来解决问题。在第 559 - 573 行中，您会发现如下所示的 if 语句：

if (background != null) {
      content = Stack(children: <Widget>[
        if (!_moveAnimation.isDismissed)
          Positioned.fill(
            child: ClipRect(
              clipper: _DismissibleClipper(
                axis: _directionIsXAxis ? Axis.horizontal : Axis.vertical,
                moveAnimation: _moveAnimation,
              ),
              child: background,
            ),
          ),
        content,
      ]);
    }

如果只注释掉ClipRect中的clipper-属性，背景会透明，不会丢失折叠动画

Answer 2

您可以通过将背景从 Dismissible 中移出来解决此问题：

完整源代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

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

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  static const Radius _borderRadius = const Radius.circular(65.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Center(
            child: Container(
              width: 300,
              height: 200,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 3),
                borderRadius: BorderRadius.all(_borderRadius),
                color: Colors.white,
              ),
            ),
          ),
          Dismissible(
            key: ValueKey("hmm"),
            child: Center(
              child: Container(
                width: 300,
                height: 200,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(_borderRadius),
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.pink],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如何使容器在他的圆角之外透明？

How do I make a Container Transparent outside of his rounded corners?

dart

flutter

flutter-layout

flutter-design

完整源代码：