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

问题描述

我有一个用 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,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,)),);
  }
}

解决方法

找到here

问题在于dismissible.dart 中的剪切行为。我已经通过编辑 Dismissible 类本身设法解决了这个问题。在第 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-property，背景就会透明，不会丢失折叠动画。

,

您可以通过将背景移出 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,decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(_borderRadius),gradient: LinearGradient(
                    colors: [Colors.blue,Colors.pink],begin: Alignment.topCenter,end: Alignment.bottomCenter,],);
  }
}