如何使容器在他的圓角之外變得透明？

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