Flutter开发 - 设置圆角:ClipRRect，被你忽略的秘密（设置圆角失效）

什么？设置圆角失效？你有遇到过么？知道原因么？

今天，这篇博客，博主将带你揭开ClipRRect设置圆角失效的秘密。

按照惯例，我们先看下效果图：

废话不多说，直接揭开谜底：影响圆角的元凶不是别人，正式margin的设置，来看下代码：

import 'package:flutter/material.dart';

class ClipRectPage extends StatefulWidget {
  @override
  _ClipRectPageState createState() => _ClipRectPageState();
}

class _ClipRectPageState extends State<ClipRectPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('设置圆角:ClipRRect'),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            ///正常
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      width: 300,
                      height: 100,
                      color: Colors.red,
                      child: Center(child: Text('正常圆角'))
                    )
                ),
              ),
            ),
            ///上面没有圆角
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(top: 15),
                      width: 300,
                      height: 100,
                      color: Colors.red,
                        child: Center(child: Text('上边无圆角'))
                    )
                ),
              ),
            ),
            ///左边没有圆角
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(left: 15),
                      width: 300,
                      height: 100,
                      color: Colors.red,
                        child: Center(child: Text('左边无圆角'))
                    )
                ),
              ),
            ),
            ///右边没有圆角
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(right: 15),
                      width: 300,
                      height: 100,
                      color: Colors.red,
                        child: Center(child: Text('右边无圆角'))
                    )
                ),
              ),
            ),
            ///下边没有圆角
            Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      margin: EdgeInsets.only(bottom: 15),
                      width: 300,
                      height: 100,
                      color: Colors.red,
                        child: Center(child: Text('下边无圆角'))
                    )
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

你会发现，但凡设置了margin的地方，圆角都不见了，但是我总不能不设置margin吧？可以设置啊，就像这个页面中的每一个widget，在外层包一个Container，设置margin即可。

推荐另一种写圆角widget的利器：Card，它的圆角不会受到设置margin的影响，上一篇博客里有使用来写布局：Card使用，感兴趣的小伙伴可以点过去看看。