欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter开发 - 设置圆角:ClipRRect,被你忽略的秘密(设置圆角失效)

程序员文章站 2024-01-07 20:44:34
...

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

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

按照惯例,我们先看下效果图:
Flutter开发 - 设置圆角: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使用,感兴趣的小伙伴可以点过去看看。

上一篇:

下一篇: