颤动卡片边框半径溢出隐藏 - Dart

在Flutter中，我们经常需要在UI设计中使用卡片容器来放置内容。而卡片容器通常需要设置边框和圆角半径。然而，在设置卡片圆角半径后，如果内容超出该卡片容器的大小，边框和圆角半径可能会显得失效而丑陋。

为了解决这个问题，我们需要使用ClipRRect小部件来强制卡片容器裁剪超出部分的内容，同时仍显示卡片的边框及圆角半径。

下面是一个例子：

ClipRRect(
  borderRadius: BorderRadius.circular(12.0),
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.grey[300],
        width: 1.0,
      ),
      borderRadius: BorderRadius.circular(12.0),
    ),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Hello World!',
          style: Theme.of(context).textTheme.headline6,
        ),
        SizedBox(height: 8.0),
        Text(
          'This is a demo of content overflow hiding.',
          style: Theme.of(context).textTheme.subtitle1,
        ),
        SizedBox(height: 8.0),
        RaisedButton(
          child: Text('Click Me!'),
          onPressed: () {},
        ),
      ],
    ),
  ),
)

在上述代码中，我们首先使用Container小部件包裹我们的内容，同时设置容器的边框和圆角半径。然后，我们再使用ClipRRect小部件来裁剪超出卡片容器大小的内容，以实现边框和圆角半径的显示效果。

使用ClipRRect小部件而不是Container的decoration属性来设置圆角半径是为了确保在裁剪超出部分的内容时圆角半径也能被裁减，从而使卡片容器看起来更自然。

最终效果如下所示：

现在，你已经学会了如何在Flutter中使用ClipRRect小部件来实现卡片容器的内容溢出隐藏，并仍能显示边框及圆角半径。