flutter - 如何防止带有borderRadius的容器内的剪辑内容不与每个角的边框重叠

Question

我制作了一个容器，它应该显示一个带有彩色边框的图片，添加了borderRadius，我将它设置为8，但是我注意到当我将容器设置为剪辑内容时，它会使边框角褪色像下面这样:

我是这样写的

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            height: 300,
            width: 300,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: const BorderRadius.all(Radius.circular(16)),
            ),
            clipBehavior: Clip.antiAlias,
            child: Container(
              constraints: BoxConstraints.expand(),
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

我希望内容不与我拥有的边框重叠，该怎么做？

Answer 1

I want the content not to overlap the border I have, how to do that?

为此，您需要设置 Container 的 foregroundDecoration 和 decoration 属性，两者的区别在于,foregroundDecoration 将在 child 的 前面 绘制装饰，而 decoration 将在 child 的后面 绘制装饰，这就是为什么仅使用 decoration

时会出现剪辑

注意:使用 clipBehavior 设置 foregroundDecoration 将触发 AssertionError 作为 clipBehavior 必须用 decoration

指定

将您的代码更新为以下内容，以获得所需的效果:

Center(
  child: Container(
    height: 300,
    width: 300,
    foregroundDecoration: BoxDecoration(
      border: Border.all(color: Colors.red, width: 2),
      borderRadius: const BorderRadius.all(Radius.circular(16)),
    ),
    decoration: BoxDecoration(
      borderRadius: const BorderRadius.all(Radius.circular(16)),
    ),
    clipBehavior: Clip.antiAlias,
    child: Container(
      constraints: BoxConstraints.expand(),
      color: Colors.blue,
    ),
  ),
),