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

Question

我有一个用 Dismissible 包裹的容器，容器和可忽略的背景都有它们的角落。 我的问题是，即使顶部容器的角落被切割，原本角落的空间也是白色而不是透明的。

这是我拥有的和我想要的（在油漆上制作）

我试着扔 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 中的裁剪器属性，背景将是透明的，并且不会丢失折叠的 animation。

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